使表格的標(biāo)題列可左右拉伸jquery插件封裝
更新時(shí)間：2014年11月24日 16:23:47 投稿：hebedich
這篇文章主要介紹了使表格的標(biāo)題列可左右拉伸jquery插件封裝,需要的朋友可以參考下
插件名稱命名為:jquery.tableresize.js，代碼如下：
復(fù)制代碼 代碼如下:
/*
Writen by mlcactus, 2014-11-24
這是我封裝的一個(gè)jquery插件，能夠使table的各列可以左右拉伸，從而使寬度變小或變大
用法：
單個(gè)table：$("#table_id").tableresize();
頁面所有table：$("table").tableresize();
*/
(function ($) {
$.fn.tableresize = function () {
var _document = $("body");
$(this).each(function () {
if (!$.tableresize) {
$.tableresize = {};
}
var _table = $(this);
//設(shè)定ID
var id = _table.attr("id") || "tableresize_" + (Math.random() * 100000).toFixed(0).toString();
var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
//設(shè)定臨時(shí)變量存放對(duì)象
var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
ths.mousemove(function (e) {
var _this = $(this);
var left = _this.offset().left, top = _this.offset().top, width = _this.width(), height = _this.height(), right = left + width, bottom = top + height, clientX = e.clientX, clientY = e.clientY;
var leftside = !_firstth.is(_this) && Math.abs(left - clientX) <= 5, rightside = Math.abs(right - clientX) <= 5;
if (cobjs._currentLeft || clientY > top && clientY < bottom && (leftside || rightside)) {
_document.css("cursor", "e-resize");
if (!cobjs._currentLeft) {
if (leftside) {
cobjs._currentObj = _this.prev();
}
else {
cobjs._currentObj = _this;
}
}
}
else {
cobjs._currentObj = null;
}
});
ths.mouseout(function (e) {
if (!cobjs._currentLeft) {
cobjs._currentObj = null;
_document.css("cursor", "auto");
}
});
_document.mousedown(function (e) {
if (cobjs._currentObj) {
cobjs._currentLeft = e.clientX;
}
else {
cobjs._currentLeft = null;
}
});
_document.mouseup(function (e) {
if (cobjs._currentLeft) {
cobjs._currentObj.width(cobjs._currentObj.width() + (e.clientX - cobjs._currentLeft));
}
cobjs._currentObj = null;
cobjs._currentLeft = null;
_document.css("cursor", "auto");
});
});
};
})(jQuery);
頁面代碼為：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server">
<title></title>
<style type="text/css" >
td{ text-align:center;}
</style>
<script type="text/javascript" src="script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/jquery.tableresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//使兩張table同時(shí)支持左右拉伸
$("table").tableresize();
});
</script>
</head>
<body>
表格1<br/>
<table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody><tr>
<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年紀(jì)</td><td style="width:200px;">地址</td><td style="width:200px;">電話</td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>
</tr><tr>
<td>29</td><td>Name:63</td><td>Age:48</td><td>Address:90</td><td>Phone:76</td>
</tr>
</tbody>
</table>
<br/>表格2<br/>
<table cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
<tbody><tr>
<td style="width:200px;">ID</td><td style="width:200px;">名字</td><td style="width:200px;">年紀(jì)</td><td style="width:200px;">地址</td><td style="width:200px;">電話</td>
</tr><tr>
<td>22</td><td>Name:44</td><td>Age:23</td><td>Address:47</td><td>Phone:15</td>
</tr><tr>
<td>28</td><td>Name:42</td><td>Age:68</td><td>Address:30</td><td>Phone:50</td>
</tr>
</tbody></table>
</body>
</html>
您可能感興趣的文章:
- jQuery中:header選擇器用法實(shí)例
- Jquery修改頁面標(biāo)題title其它JS失效的解決方法
- 讓新消息在網(wǎng)頁標(biāo)題閃爍提示的jQuery代碼
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- Jquery 設(shè)置標(biāo)題的自動(dòng)翻轉(zhuǎn)
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動(dòng)而移動(dòng)
- jQuery 標(biāo)題的自動(dòng)翻轉(zhuǎn)實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
- jQuery實(shí)現(xiàn)點(diǎn)擊標(biāo)題輸入詳細(xì)信息
- jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法
相關(guān)文章
解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題
這篇文章主要介紹了如何解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題,需要的朋友可以參考下2014-05-05
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計(jì)者更好地駕御 HTML 表格，你可以對(duì)表格進(jìn)行橫向和豎向排序，設(shè)置固定表頭，對(duì)表格進(jìn)行搜索，對(duì)大表格進(jìn)行分頁，對(duì)表格進(jìn)行滾動(dòng)，拖放操作等等。這些插件很多都包含詳細(xì)的教程。2010-04-04
jquery.cookie.js是一個(gè)基于jquery的插件,一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫入、刪除 cookie。接下來通過本文給大家介紹Jquery操作cookie記住用戶名，需要的朋友參考下吧2016-03-03
下面小編就為大家?guī)硪黄猨Query 常用代碼集錦(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
jQuery底層AJAX實(shí)現(xiàn)，其返回其創(chuàng)建的XMLHttpRequest對(duì)象，大多數(shù)情況下無需直接操作該函數(shù)，除非需要操作不常用的選項(xiàng)，以獲得更多的靈活性，這篇文章給大家介紹JQuery AJAX操作代碼，感興趣的朋友一起看看吧2022-12-12
jQuery是繼prototype 之后的又一個(gè)優(yōu)秀的Javascript框架，本篇文章給大家分享收藏的jquery技巧，對(duì)jquery技巧相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
下面小編就為大家?guī)硪黄猨query分隔Url的param方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05![jQuery中[attribute^=value]選擇器用法實(shí)例](http://img.jbzj.com/images/xgimg/bcimg7.png)
jQuery中[attribute^=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實(shí)例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery 頁面載入進(jìn)度條實(shí)現(xiàn)代碼
頁面 Loading 條基本人人都會(huì)用。它的原理很簡(jiǎn)單：在頁頭放置一個(gè)文字或者圖片的 loading 狀態(tài)，然后頁尾載入一段 JS 隱藏掉，即根據(jù)瀏覽器的載入順序來實(shí)現(xiàn)的簡(jiǎn)易 Loading 狀態(tài)條。2009-02-02
本文給大家分享的是使用javascript實(shí)現(xiàn)的七夕情人節(jié)丘比特射箭小游戲的代碼，并附上源碼下載，誰說程序猿就不懂得浪漫呢，小伙伴們感覺拿去獻(xiàn)寶吧（當(dāng)然了，首先你得有女票才行^_^）2015-08-08