jQuery表頭可拉伸插件是一個非常實用的工具,它可以讓你很方便地拉伸表格頭部的列寬,讓表格看起來更加美觀,也更加方便用戶的使用。
$(function() { var thElm, thIndex, startX, newWidth, oldWidth; $("table th").mousedown(function(e) { e.preventDefault(); thElm = $(this), thIndex = $("table th").index(thElm); startX = e.pageX; oldWidth = thElm.width(); thElm.addClass("resizing"); }); $(document).mousemove(function(e) { if (thElm) { newWidth = oldWidth + (e.pageX - startX); $("table tbody").css("display", "none"); thElm.width(newWidth); $("table tbody").css("display", "block"); } }); $(document).mouseup(function() { if (thElm) { thElm.removeClass("resizing"); thElm = null; } }); });
以上就是該插件的代碼,其實非常簡單。當用戶在表頭上按下鼠標時,該插件會獲取到所按下的列的index以及起始位置,然后用戶拉伸列寬時,插件會調整列寬,實時展現效果。當用戶松開鼠標時,插件會停止調整列寬。
如果你想為自己的網站添加這個插件,只需要簡單地將代碼復制到你的頁面中,然后稍微修改一下選擇器就可以了。
總之,在一個開發的網站中,好用的插件可以節省你大量的時間,并且讓你的用戶更加喜歡你的頁面。希望這個插件對你有所幫助!
上一篇div id demo
下一篇div float 溢出