JQueryテーブルドラッグ調整列幅効果(自作)_jquery-jsチュートリアル-php.cn

JQueryテーブルドラッグ調整列幅効果(自作)_jquery

WBOY

リリース： 2016-05-16 16:37:57

オリジナル

1330 人が閲覧しました

デスクトッププログラムで表のヘッダーをドラッグした場合と同様に、マウスをヘッダーの境界線上に置くと、マウスが左右にドラッグすることを示す形状に変わり、マウスをドラッグします。テーブルに線が表示されます。マウスを離すと垂直線が移動し、テーブルの列幅が調整されます。最近暇だったので自分でも実践してみたので、その小さな成果をここでシェアしたいと思います。

まず、図に示すようなマウスアイコンファイルが必要です。ハードドライブで *.cur を検索すると、必ず見つかります。

ページ上の HTML を変更せずにすべてのページでこの効果を使用できるようにするために、すべてのコードを $(document).ready(function() {}); に統合し、別の JS ファイルを作成しました。

1 ピクセル幅の DIV を使用して垂直線をシミュレートし、ページの読み込み後に body 要素に追加します

$(document).ready(function() {
$("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> ");
});

ログイン後にコピー

次のステップは、マウスがテーブルの垂直境界線に移動したときのマウスの変形の問題です。最初は、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オブジェクトが境界線を共有しているため記録されます。 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 要素に追加しました。当初は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 ファイルをこの効果が必要なページに導入する限り、この効果をページ上のテーブルに追加できます。

また、Firefox でマウスアイコンをカスタマイズする場合、上記のコードは効果がありません。使用される jquery は 1.2.6

です。

エフェクトファイルダウンロード