ijquery

جدول ریسپانسیو با جی کوئری

screenshot

 

با استفاده از این پلاگین می توانید جدولی داشته باشید که در هر رزلیشنی تغیر کند .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery-responsiveTables.js"></script>
    <script type="text/javascript" src="jquery.responsiveText.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.responsive').not('table').responsiveText();
        $('table.responsive').responsiveTables();
      });
    </script>
    <link href='http://fonts.googleapis.com/css?family=Pacifico|Average+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="jquery-responsiveTables.css" />

2-  کد html جهت استفاده پلاگین

      <table class="responsive" data-min="11" data-max="30" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th valign="middle">Opera</th>
          <th valign="middle">Internet Explorer</th>
          <th valign="middle">Firefox</th>
          <th valign="middle">Chrome</th>
          <th valign="middle">Safari</th>
          <th valign="middle">1392</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th valign="middle">1.6 %</th>
          <td valign="middle">12.6 %</td>
          <td valign="middle">27.7 %</td>
          <td valign="middle">52.9 %</td>
          <td valign="middle">4.0 %</td>
          <td valign="middle">فروردین</td>
        </tr>
        <tr>
          <th valign="middle">1.7 %</th>
          <td valign="middle">12.7 %</td>
          <td valign="middle">27.9 %</td>
          <td valign="middle">52.7 %</td>
          <td valign="middle">4.0 %</td>
          <td valign="middle">اردیبهشت</td>
        </tr>
        <tr>
          <th valign="middle">1.8 %</th>
          <td valign="middle">13.0 %</td>
          <td valign="middle">28.5 %</td>
          <td valign="middle">51.7 %</td>
          <td valign="middle">4.1 %</td>
          <td valign="middle">خرداد</td>
        </tr>
        <tr>
          <th valign="middle">1.8 %</th>
          <td valign="middle">13.5 %</td>
          <td valign="middle">29.6 %</td>
          <td valign="middle">50.0 %</td>
          <td valign="middle">4.1 %</td>
          <td valign="middle">تیر</td>
        </tr>
        <tr>
          <th valign="middle">1.9 %</th>
          <td valign="middle">14.3 %</td>
          <td valign="middle">30.2 %</td>
          <td valign="middle">48.4 %</td>
          <td valign="middle">4.2 %</td>
          <td valign="middle">مرداد</td>
        </tr>
      </tbody>
    </table>

پیش نمایش دانلود فایل پلاگین

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *