Jquery 订阅所有【Jquery】的日志

2009年最受欢迎jQuery插件—Chromatabler【表格】

作者:rainweb 日期:2010-01-28

字体大小: 小 中 大

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件，有些插件在本博客中已经有介绍，有些还没有，本文介绍的是：2009年最受欢迎jQuery插件—Chromatabler【表格】

表格

一看Chromatabler，汗~~没见过这个单词啊，一查还真没有，但就是效果来看，就是表格的表头固定，内容滚动。这样可以再有限的空间内显示更多的内容，但就实用性或者没关角度，没有tab选项卡实用，一般用在统计显示中，这样一个页面可以显示多个表格了。

使用说明

1、首先还是导入JS、CSS文件

2、设置表格的宽度和高度

XML/HTML代码 
  1. <script>  
  2. $("#yourTableID2").chromatable({   
  3.            
  4.                 width: "900px",   
  5.                 height: "400px",   
  6.                 scrolling: "yes"   
  7.                    
  8.             });    
  9. </script>  

 3、很简单，最后就是html表格代码

XML/HTML代码
  1. <table id="yourTableID2" width="100%" border="0" cellspacing="0" cellpadding="0">  
  2.   <thead>  
  3.     <tr>  
  4.       <th>Check out this header</th>  
  5.       <th>Look here's another one</th>  
  6.       <th>Wow, look at me!</th>  
  7.     </tr>  
  8.   </thead>  
  9.   <tbody>  
  10.     <tr>  
  11.       <td>Quisque in wisi quis orci tincidunt fermentum</td>  
  12.       <td>Mauris aliquet mattis metus</td>  
  13.       <td>Etiam eu ante non leo egestas nonummy</td>  
  14.     </tr>  
  15.     <tr>  
  16.       <td>Quisque in wisi quis orci tincidunt fermentum</td>  
  17.       <td>Mauris aliquet mattis metus</td>  
  18.       <td>Etiam eu ante non leo egestas nonummy</td>  
  19.     </tr>  
  20.     <tr>  
  21.       <td>Some content goes in here</td>  
  22.       <td>Praesent vitae ligula nec orci pretium vestibulum</td>  
  23.       <td>Maecenas tempus dictum libero</td>  
  24.     </tr>  
  25.     <tr>  
  26.       <td>Quisque in wisi quis orci tincidunt fermentum</td>  
  27.       <td>Mauris aliquet mattis metus</td>  
  28.       <td>Etiam eu ante non leo egestas nonummy</td>  
  29.     </tr>  
  30.   </tbody>  
  31. </table>  

 

查看demo   下载例子

PS：用了大半年了才发现FCK可以直接贴html高亮代码，以前全是直接贴近来的太丑了，我说人家帖的代码都那么整齐，BS自己一回。




[本日志由 rainweb 于 2010-01-28 03:34 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.