表单/表格

可展开收缩jQuery表格插件

创客主机

可展开收缩jQuery表格插件-创客云
这是一款可展开列的 jQuery 表格插件,该插件首先在初始化时,所有的表格列采用简洁的显示方式,当用户点击表格列头时,该列被展开,显示详细信息。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
WordPress 主题
  1. <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
  2. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  4. <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>

HTML 结构

  1. <div class="loader">
  2.   <div class="lds-ripple">
  3.     <div></div>
  4.     <div></div>
  5.   </div>
  6. </div>
  7. <aside class="sidebar">
  8.   <div class="logo">
  9.     <a href="#">+</a>
  10.   </div>
  11. </aside>
  12. <section class="table-wrapper">
  13.   <table>
  14.     <thead>
  15.       <tr>
  16.         <th></th>
  17.         <th class="trigger"><p>Basic</p></th>
  18.         <th class="trigger"><p>Basic</p><span>plus</span></th>
  19.         <th class="trigger"><p>Standard</p></th>
  20.         <th class="trigger"><p>Standard</p><span>plus</span></th>
  21.         <th class="trigger"><p>Medium</p></th>
  22.         <th class="trigger"><p>Medium</p><span>plus</span></th>
  23.         <th class="trigger"><p>Large</p></th>
  24.         <th class="trigger"><p>Large</p><span>plus</span></th>
  25.         <th class="trigger"><p>Extended</p></th>
  26.         <th class="trigger"><p>Extended</p><span>plus</span></th>
  27.       </tr>
  28.     </thead>
  29.     <tbody>
  30.       <tr>
  31.         <td><p><strong>Price</strong></p></td>
  32.         <td><p>$19</p> <span>Per Month</span></td>
  33.         <td><p>$29</p> <span>Per Month</span></td>
  34.         <td><p>$39</p> <span>Per Month</span></td>
  35.         <td><p>$49</p> <span>Per Month</span></td>
  36.         <td><p>$59</p> <span>Per Month</span></td>
  37.         <td><p>$69</p> <span>Per Month</span></td>
  38.         <td><p>$79</p> <span>Per Month</span></td>
  39.         <td><p>$89</p> <span>Per Month</span></td>
  40.         <td><p>$99</p> <span>Per Month</span></td>
  41.         <td><p>$129</p> <span>Per Month</span></td>
  42.       </tr>
  43.       <tr>
  44.         <td><p><strong>Bandwidth</strong></p><p>Monthly</p></td>
  45.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  46.           <p>1GB *</p><span>Unlimited in first year</span></td>
  47.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  48.           <p>2GB *</p><span>Unlimited in first year</span></td>
  49.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  50.           <p>3GB *</p><span>Unlimited in first year</span></td>
  51.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  52.           <p>4GB *</p><span>Unlimited in first year</span></td>
  53.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  54.           <p>5GB *</p><span>Unlimited in first year</span></td>
  55.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  56.           <p>6GB *</p><span>Unlimited in first year</span></td>
  57.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  58.           <p>7GB *</p><span>Unlimited in first year</span></td>
  59.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  60.           <p>8GB *</p><span>Unlimited in first year</span></td>
  61.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  62.           <p>9GB *</p><span>Unlimited in first year</span></td>
  63.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  64.           <p>12GB *</p><span>Unlimited in first year</span></td>
  65.       </tr>
  66.       <tr>
  67.         <td><p><strong>Storage</strong></p><p>Free installation</p></td>
  68.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  69.           <p>1GB *</p><span>Free installation</span></td>
  70.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  71.           <p>2GB *</p><span>Free installation</span></td>
  72.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  73.           <p>3GB *</p><span>Free installation</span></td>
  74.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  75.           <p>4GB *</p><span>Free installation</span></td>
  76.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  77.           <p>5GB *</p><span>Free installation</span></td>
  78.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  79.           <p>6GB *</p><span>Free installation</span></td>
  80.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  81.           <p>7GB *</p><span>Free installation</span></td>
  82.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  83.           <p>8GB *</p><span>Free installation</span></td>
  84.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  85.           <p>9GB *</p><span>Free installation</span></td>
  86.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  87.           <p>12GB *</p><span>Free installation</span></td>
  88.       </tr>
  89.       <tr>
  90.         <td><p><strong>Add Ons</strong></p><p>Sub domains</p></td>
  91.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  92.           <p>- *</p>
  93.           <span>Without Sub domain</span></td>
  94.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  95.           <p>- *</p>
  96.           <span>Without Sub domain</span></td>
  97.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  98.           <p>- *</p>
  99.           <span>Without Sub domain</span></td>
  100.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  101.           <p>1 *</p>
  102.           <span>Sub domain</span></td>
  103.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  104.           <p>2 *</p>
  105.           <span>Sub domains</span></td>
  106.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  107.           <p>3 *</p>
  108.           <span>Sub domains</span></td>
  109.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  110.           <p>4 *</p>
  111.           <span>Sub domains</span></td>
  112.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  113.           <p>5 *</p>
  114.           <span>Sub domains</span></td>
  115.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  116.           <p>6 *</p>
  117.           <span>Sub domains</span></td>
  118.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  119.           <p>7 *</p>
  120.           <span>Sub domains</span></td>
  121.       </tr>
  122.       <tr>
  123.         <td><p><strong>Database</strong></p><p>Support</p></td>
  124.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  125.           <p>- *</p>
  126.           <span>Without Sub domain</span></td>
  127.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  128.           <p>- *</p>
  129.           <span>Without Sub domain</span></td>
  130.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  131.           <p>- *</p>
  132.           <span>Without Sub domain</span></td>
  133.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  134.           <p>1 *</p>
  135.           <span>MySQL Database - Without Support</span></td>
  136.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  137.           <p>2 *</p>
  138.           <span>MySQL Databases - Without Support</span></td>
  139.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  140.           <p>3 *</p>
  141.           <span>MySQL Databases - Without Support</span></td>
  142.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  143.           <p>4 *</p>
  144.           <span>MySQL Databases - With Support</span></td>
  145.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  146.           <p>5 *</p>
  147.           <span>MySQL Databases - With Support</span></td>
  148.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  149.           <p>6 *</p>
  150.           <span>MySQL Databases - With Support</span></td>
  151.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  152.           <p>7 *</p>
  153.           <span>MySQL Databases - With Support</span></td>
  154.       </tr>
  155.       <tr>
  156.         <td><p><strong>Backup</strong></p><p>Free (Yes/No)</p></td>
  157.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  158.           <span>No.</span></td>
  159.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  160.           <span>No.</span></td>
  161.         <td><img src="assets/img/icon-close.png" class="close" alt=""/>
  162.           <span>No.</span></td>
  163.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  164.           <span>Yes.</span></td>
  165.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  166.           <span>Yes.</span></td>
  167.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/>  
  168.           <span>Yes.</span></td>
  169.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/>  
  170.           <span>Yes.</span></td>
  171.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/>  
  172.           <span>Yes.</span></td>
  173.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> 
  174.           <span>Yes.</span></td>
  175.         <td><img src="assets/img/icon-correct.png" class="correct" alt=""/>  
  176.           <span>Yes.</span></td>
  177.       </tr>
  178.     </tbody>
  179.   </table>
  180. </section>

Github 网址:https://github.com/COIDEAwebsite/multipurpose-table-with-animated-collapsible-columns

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!