表单/表格

可展开收缩jQuery表格插件

PetitQPetitQ 表单/表格 2019-5-05 2.29K 0
收藏
阿里云


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

使用方法

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

也想出现在这里？联系我们吧
创客主机
  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

可展开收缩 jQuery 表格插件

已有 572 人购买
  • 79a4
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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

登录