JQuery拖動(dòng)表頭邊框線(xiàn)調(diào)整表格列寬效果代碼
類(lèi)似于桌面程序中的表格拖動(dòng)表頭的效果，當(dāng)鼠標(biāo)停留在表頭邊框線(xiàn)上時(shí)，鼠標(biāo)會(huì)變成表示左右拖動(dòng)的形狀，接著拖動(dòng)鼠標(biāo)，會(huì)在表格中出現(xiàn)一條隨鼠標(biāo)移動(dòng)的豎線(xiàn)，最后放開(kāi)鼠標(biāo)，表格列寬會(huì)被調(diào)整。最近比較空閑，便自己動(dòng)手嘗試實(shí)現(xiàn)，在此分享下小小的成果。
首先需要如圖所示的鼠標(biāo)圖標(biāo)文件，在自己的硬盤(pán)中搜索*.cur，肯定能找到。
為了能在所有需要該效果的頁(yè)面使用，并且不需要更改頁(yè)面任何HTML，我把所有的代碼整合在 $(document).ready(function() {}); 中，并寫(xiě)入一個(gè)獨(dú)立的JS文件。
用一個(gè)1像素寬的DIV來(lái)模擬一條豎線(xiàn)，在頁(yè)面載入后添加到body元素中
$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});
接下來(lái)是鼠標(biāo)移動(dòng)到表格縱向邊框上鼠標(biāo)變型的問(wèn)題，起初我考慮在表頭中添加一個(gè)很小的塊級(jí)元素觸發(fā)mousemove 和mouseout事件，但為了簡(jiǎn)單起見(jiàn)，我還是選擇為整個(gè)表頭添加該事件。
在TH的mousemove事件中處理鼠標(biāo)變型：
$("th").bind("mousemove", function(event) {
var th = $(this);
//不給第一列和最后一列添加效果
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
//距離表頭邊框線(xiàn)左右4像素才觸發(fā)效果
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//修改為你的鼠標(biāo)圖標(biāo)路徑
}
else {
th.css({ 'cursor': 'default' });
}
});
當(dāng)鼠標(biāo)按下時(shí)，顯示豎線(xiàn)，并設(shè)置它的高度，位置CSS屬性，同時(shí)記錄當(dāng)前要改變列寬的TH對(duì)象，因?yàn)橐粭l邊框線(xiàn)由兩個(gè)TH共享，這里總是取前一個(gè)TH對(duì)象。
$("th").bind("mousedown", function(event) {
var th = $(this);
//與mousemove函數(shù)中同樣的判斷
if (th.prevAll().length < 1 | th.nextAll().length < 1) {
return;
}
var pos = th.offset();
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().height();
var top = pos.top;
$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });
//全局變量，代表當(dāng)前是否處于調(diào)整列寬狀態(tài)
lineMove = true;
//總是取前一個(gè)TH對(duì)象
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});
接下來(lái)是鼠標(biāo)移動(dòng)時(shí)，豎線(xiàn)隨之移動(dòng)的效果，因?yàn)樾枰?dāng)鼠標(biāo)離開(kāi)TH元素也要能有該效果，該效果寫(xiě)在BODY元素的mousemove函數(shù)中
$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});
最后是鼠標(biāo)彈起時(shí)，最后的調(diào)整列寬效果。這里我給BODY 和TH兩個(gè)元素添加了同樣的mouseup代碼。我原先以為我只需要給BODY添加mouseup函數(shù)，但不明白為什么鼠標(biāo)在TH中時(shí)，事件沒(méi)有觸發(fā)，我只好給TH元素也添加了代碼。水平有限，下面完全重復(fù)的代碼不知道怎么抽出來(lái)。
$("body").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
$("th").bind("mouseup", function(event) {
if (lineMove == true) {
$("#line").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function() {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
好了，只要在需要這個(gè)效果的頁(yè)面中引入包含以上代碼的JS文件，就可以為頁(yè)面中表格添加該效果。
另外以上代碼在火狐中自定義鼠標(biāo)圖標(biāo)的代碼沒(méi)出效果，所用的jquery為1.2.6
————————————————————————更新——————————————
關(guān)于拖動(dòng)時(shí)會(huì)選中內(nèi)容的BUG，將以下一行代碼添加到$(document).ready函數(shù)里就行了
$("body").bind("selectstart", function() { return !lineMove; });
相關(guān)文章
jquery簡(jiǎn)單實(shí)現(xiàn)幻燈片的方法
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)幻燈片的方法,核心的js代碼只有9行即可實(shí)現(xiàn)幻燈切換效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery 特性操作詳解的相關(guān)資料,并附實(shí)例代碼，需要的朋友可以參考下2016-09-09
jQuery 順便學(xué)習(xí)下CSS選擇器 奇偶匹配nth-child(even)
今天學(xué)習(xí)jQuery,看到nth-child(even)用法，特意找了下這個(gè)選擇器的用法,在CSS3標(biāo)準(zhǔn)中，用法很強(qiáng)大。2010-05-05
用jQuery技術(shù)實(shí)現(xiàn)Tab頁(yè)界面之二
這個(gè)tab頁(yè)是把數(shù)據(jù)全部取回來(lái)再顯示，所以沒(méi)有數(shù)據(jù)緩存的特點(diǎn)。但是因?yàn)閿?shù)據(jù)全部是顯示的html代碼，所以對(duì)搜索引擎是友好的，也許對(duì)seo有好處。2009-09-09
當(dāng)我們遇到提交表單時(shí)，需要我們重復(fù)添加好幾個(gè)表單，在訂單表格中添加多個(gè)不同型號(hào)的產(chǎn)品信息。這個(gè)時(shí)候有復(fù)制表單表單按鈕，也就是新增一項(xiàng)，通過(guò)點(diǎn)擊復(fù)制按鈕來(lái)實(shí)現(xiàn)新增一項(xiàng)，怎么實(shí)現(xiàn)的呢？下面小編跟大家分享，需要的朋友的朋友可以參考下2015-09-09
下面小編就為大家?guī)?lái)一篇jQuery 局部div刷新和全局刷新方法總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作的相關(guān)資料，利用jquery實(shí)現(xiàn)了對(duì)一個(gè)表單字段格式的即時(shí)檢查，感興趣的小伙伴們可以參考一下2016-05-05
jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
如果頁(yè)面比較高，當(dāng)滾動(dòng)條拖到頁(yè)面的下面的時(shí)候，側(cè)邊欄會(huì)出現(xiàn)一個(gè)固定跟隨瀏覽器的DIV框，下面將思路及具體實(shí)現(xiàn)與大家分享下2014-09-09
基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線(xiàn)考試倒計(jì)時(shí)
這篇文章主要介紹了基于jQuery+Cookie實(shí)現(xiàn)的防止刷新的在線(xiàn)考試倒計(jì)時(shí)的方法和示例，有需要的小伙伴可以參考下2015-06-06
jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡(jiǎn)單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實(shí)例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03