JQueryテーブルドラッグによる列幅調整効果(自分で書いたもの)
3766 ワード
デスクトッププログラムの表がヘッダーをドラッグする効果と同様に、マウスがヘッダーの枠線にとどまると、マウスは左右にドラッグする形になり、次にマウスをドラッグすると、マウスに従って移動する縦線が表に現れ、最後にマウスを離すと、表の列幅が調整されます.最近暇なので、自分でやってみて、小さな成果を分かち合います.
まず、図に示すようなマウスアイコンファイルが必要で、自分のハードディスクで*を検索する.Cur、きっと見つかるよ.
この効果を必要とするすべてのページで使用でき、ページのHTMLを変更する必要がないように、私はすべてのコードを$(document)に統合しました.ready(function() {}); で、独立したJSファイルを書き込みます.
1ピクセル幅のDIVで縦線をシミュレートし、ページ読み込み後にbody要素に追加
マウスを押すと、縦線が表示され、その高さ、位置CSS属性が設定され、現在列幅を変更するTHオブジェクトが記録されます.1つの枠線が2つのTHで共有されているため、ここでは常に前のTHオブジェクトが取られます.
次にマウスが移動すると、縦線が移動する効果です.マウスがTH要素から離れてもこの効果が得られる必要があります.この効果はBODY要素のmousemove関数に書かれています.
最後に、マウスが跳ね上がると、最後の列幅調整効果が得られます.ここではBODYとTHの2つの要素に同じmouseupコードを追加しました.BODYにmouseup関数を追加するだけだと思っていたが、なぜマウスがTHの中にいるときにイベントがトリガーされなかったのか分からず、TH要素にもコードを追加するしかなかった.レベルが限られていて、次の完全に繰り返されるコードはどのように抽出するか分かりません.
よし、この効果が必要なページに上記のコードを含むJSファイルを導入すれば、ページ内のテーブルにその効果を追加できます.
また、上記のコードは火狐でマウスアイコンをカスタマイズするコードでは効果がなく、jqueryは1.2.6
効果ファイルのダウンロード
まず、図に示すようなマウスアイコンファイルが必要で、自分のハードディスクで*を検索する.Cur、きっと見つかるよ.
この効果を必要とするすべてのページで使用でき、ページのHTMLを変更する必要がないように、私はすべてのコードを$(document)に統合しました.ready(function() {}); で、独立したJSファイルを書き込みます.
1ピクセル幅のDIVで縦線をシミュレートし、ページ読み込み後にbody要素に追加
$(document).ready(function() { $("body").append(""); });
接下来是鼠标移动到表格纵向边框上鼠标变型的问题，起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseout事件，但为了简单起见，我还是选择为整个表头添加该事件。
在TH的mousemove事件中处理鼠标变型：
$("th").bind("mousemove", function(event) {
var th = $(this);
//
if (th.prevAll().length <= 1 || th.nextAll().length < 1) {
return;
}
var left = th.offset().left;
// 4
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });
//
}
else {
th.css({ 'cursor': 'default' });
}
});マウスを押すと、縦線が表示され、その高さ、位置CSS属性が設定され、現在列幅を変更するTHオブジェクトが記録されます.1つの枠線が2つのTHで共有されているため、ここでは常に前のTHオブジェクトが取られます.
$("th").bind("mousedown", function(event) {
var th = $(this);
// mousemove
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":"" });
// ，
lineMove = true;
// TH
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
});次にマウスが移動すると、縦線が移動する効果です.マウスがTH要素から離れてもこの効果が得られる必要があります.この効果はBODY要素のmousemove関数に書かれています.
$("body").bind("mousemove", function(event) {
if (lineMove == true) {
$("#line").css({ "left": event.clientX }).show();
}
});最後に、マウスが跳ね上がると、最後の列幅調整効果が得られます.ここではBODYとTHの2つの要素に同じmouseupコードを追加しました.BODYにmouseup関数を追加するだけだと思っていたが、なぜマウスがTHの中にいるときにイベントがトリガーされなかったのか分からず、TH要素にもコードを追加するしかなかった.レベルが限られていて、次の完全に繰り返されるコードはどのように抽出するか分かりません.
$("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);
});
}
});よし、この効果が必要なページに上記のコードを含むJSファイルを導入すれば、ページ内のテーブルにその効果を追加できます.
また、上記のコードは火狐でマウスアイコンをカスタマイズするコードでは効果がなく、jqueryは1.2.6
効果ファイルのダウンロード