表格拖動滾動條標題固定程式碼例項
如果表格中資料很多的時候,但是頁面的空間又是有限的,這個時候就需要利用滾動條,但是當拖動滾動條的時候,我們往往希望標題是固定的,特別是表格的列比較多的時候更是如此,本章節就分享一段這樣的例項程式碼。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> @charset "UTF-8"; body { font-family:'微軟雅黑', Arial, sans-serif; font-size:13px; font-style:normal; font-weight:normal; line-height:21px; } table { border:solid 1px #D5D5D5; border-collapse:collapse; width:100%; } table td { border:1px solid #D5D5D5; font-size:12px; padding:7px 5px; } table th { background-color:#EEE; border-right:1px solid #D5D5D5; font-size:13.5px; line-height:120%; font-weight:bold; padding:8px 5px; text-align:left; } .ui-resizable{position:relative;} .ui-resizable-handle { display:block; font-size:0.1px; position:absolute; z-index:99999; } .ui-resizable-s { border-top:1px solid #CCCCCC; bottom:-5px; cursor:s-resize; height:14px; left:0; width:100%; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> (function($){ $.chromatable={ defaults:{ width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ var options = $.extend({}, $.chromatable.defaults, options); return this.each(function(){ var $this = $(this); var $uniqueID = $(this).attr("ID") + ("wrapper"); $(this).css('width', options.width).addClass("_scrolling"); $(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>'); $(".scrolling_outer").css({'position':'relative'}); $("#"+$uniqueID).css({ 'border':'1px solid #CCCCCC', 'overflow-x':'hidden', 'overflow-y':'auto', 'padding-right':'17px' }); $("#"+$uniqueID).css('height', options.height); $("#"+$uniqueID).css('width', options.width); $(this).before($(this).clone().attr("id", "").addClass("_thead").css({ 'width' : 'auto', 'display' : 'block', 'position':'absolute', 'border':'none', 'border-bottom':'1px solid #CCC', 'top':'1px' })); $('._thead').children('tbody').remove(); $(this).each(function( $this ){ if(options.width == "100%" || options.width == "auto") { $("#"+$uniqueID).css({'padding-right':'0px'}); } if (options.scrolling == "no") { $("#"+$uniqueID).before('<a href="#" class="expander" style="width:100%;">Expand table</a>'); $("#"+$uniqueID).css({'padding-right':'0px'}); $(".expander").each(function(int){ $(this).attr("ID", int); $( this ).bind ("click",function(){ $("#"+$uniqueID).css({'height':'auto'}); $("#"+$uniqueID+" ._thead").remove(); $(this).remove(); }); }); $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden"); } }); $curr = $this.prev(); $("thead:eq(0)>tr th",this).each(function(i){ $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width()); }); if(options.width == "100%" || "auto") { $(window).resize(function(){ resizer($this); }); } }); }; function resizer($this) { $curr = $this.prev(); $("thead:eq(0)>tr th", $this).each(function (i){ $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width()); }); }; })(jQuery); $(document).ready(function(){ $("#yourTableID").chromatable({ width: "100%", height: "400px", scrolling: "no" }); $("#yourTableID2").chromatable({ width: "900px", height: "400px", scrolling: "yes" }); }); </script> </head> <body> <table id="yourTableID2" width="100%" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>名稱</th> <th>作者</th> <th>備註</th> </tr> </thead> <tbody> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> <tr> <td>螞蟻部落一</td> <td>螞蟻部落二</td> <td>螞蟻部落三</td> </tr> </tbody> </table> </body> </html>
相關文章
- 拖動滾動條載入資料程式碼例項
- 拖動滾動條實現div跟隨效果程式碼例項
- js標題title滾動程式碼例項JS
- 拖動滾動條實現網頁內容自動載入程式碼例項網頁
- 美化滾動條效果程式碼例項
- 網頁title標題滾動效果程式碼例項網頁
- css隱藏滾動條程式碼例項CSS
- js獲取滾動條高度例項程式碼JS
- 滑鼠滾動固定js(jquery)例項分享JSjQuery
- jQuerydiv元素拖動效果程式碼例項jQuery
- 帶有滾動條的全屏遮罩層程式碼例項遮罩
- javascript模擬實現滾動條效果程式碼例項JavaScript
- 移動端div塊拖動效果程式碼例項
- SVG拖動繪製矩形程式碼例項SVG
- 可以拖動的div塊程式碼例項
- css3自定義滾動條樣式程式碼例項CSSS3
- 表格顯示滾動條
- 表格實現標題合併程式碼例項
- js下拉滾動條瀑布流載入資料程式碼例項JS
- 拖動滾動條一定距離可以固定於頂部的導航欄
- javascript動態操作table表格程式碼例項JavaScript
- 公告文字水平滾動例項程式碼
- javascript文字水平滾動程式碼例項JavaScript
- js實現的div拖動效果例項程式碼JS
- 計算瀏覽器垂直滾動條的寬度程式碼例項瀏覽器
- jQuery標題自動頂貼效果程式碼例項jQuery
- 滑鼠中鍵滾動mousewheel事件例項程式碼事件
- 頁面全屏垂直平滑滾動程式碼例項
- 滑鼠按住拖動具有半透明效果的程式碼例項
- js物件導向封裝拖動效果程式碼例項JS物件封裝
- js通過拖動調整元素位置程式碼例項JS
- 可以拖動立方體3D效果程式碼例項3D
- 按住滑鼠可以拖動箭頭旋轉程式碼例項
- 滑鼠拖動實現將div放入方格例項程式碼
- jQuery動態進度條程式碼例項jQuery
- 實現網頁標題跳動效果程式碼例項網頁
- 拖動滾動條實現內容自動載入效果
- js實現的文字垂直滾動例項程式碼JS