JQuery는 테이블 헤더 테두리 선을 드래그하여 테이블 열 너비 효과를 조정합니다.-JS 튜토리얼-php.cn

JQuery는 테이블 헤더 테두리 선을 드래그하여 테이블 열 너비 효과를 조정합니다.

WBOY

풀어 주다： 2016-05-16 16:36:42

원래의

1379명이 탐색했습니다.

데스크톱 프로그램에서 표의 머리글을 드래그하는 것과 유사하게 머리글의 경계선에 마우스를 놓으면 마우스가 좌우로 드래그하는 모양으로 바뀌게 됩니다. 그런 다음 마우스를 드래그합니다. 표에 선이 나타납니다. 마우스를 놓으면 수직선이 이동합니다. 마지막으로, 표 열 너비가 조정됩니다. 최근에 여유가 생겨서 직접 구현해 보았는데, 소소한 결과를 여기에 공유하고자 합니다.

먼저 그림과 같은 마우스 아이콘 파일이 필요합니다. 하드 드라이브에서 *.cur를 검색하면 확실히 찾을 수 있습니다.

페이지의 HTML을 변경하지 않고도 모든 페이지에서 이 효과를 사용할 수 있도록 $(document).ready(function() {});에 모든 코드를 통합하고 별도의 JS 파일을 작성했습니다.

1픽셀 너비의 DIV를 사용하여 수직선을 시뮬레이션하고 페이지 로드 후 본문 요소에 추가합니다.

$(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 개체가 경계선을 공유하기 때문에 기록됩니다. 두 개의 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 요소에 동일한 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 파일을 이 효과가 필요한 페이지에 삽입하기만 하면 이 효과를 페이지의 테이블에 추가할 수 있습니다.

또한 위 코드는 Firefox에서 마우스 아이콘을 맞춤설정할 때 아무런 효과가 없습니다. 사용된 jquery는 1.2.6입니다

효과 파일 다운로드

——————————————————————업데이트——————————————

드래그 시 내용을 선택하는 버그에 대해서는 $(document).ready 함수에 다음 코드 줄을 추가하면 됩니다

$("body").bind("selectstart", function() { return !lineMove; });

로그인 후 복사