威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > 首先需要如图所示的鼠标图标文件

原标题:首先需要如图所示的鼠标图标文件

浏览次数:116 时间:2020-01-18

类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整。最近比较空闲,便自己动手尝试实现,在此分享下小小的成果。

首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到。

为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $.ready; 中,并写入一个独立的JS文件。

用一个1像素宽的DIV来模拟一条竖线,在页面载入后添加到body元素中

$.ready.append(" ");});

接下来是鼠标移动到表格纵向边框上鼠标变型的问题,起初我考虑在表头中添加一个很小的块级元素触发mousemove 和mouseout事件,但为了简单起见,我还是选择为整个表头添加该事件。

在TH的mousemove事件中处理鼠标变型:

$.bind("mousemove", function {var th = $;//不给第一列和最后一列添加效果if .length <= 1 || th.nextAll {return;}var left = th.offset().left;//距离表头边框线左右4像素才触发效果if (event.clientX - left < 4 ||  - ) < 4) {th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });//修改为你的鼠标图标路径}else {th.css({ 'cursor': 'default' });}});

当鼠标按下时,显示竖线,并设置它的高度,位置CSS属性,同时记录当前要改变列宽的TH对象,因为一条边框线由两个TH共享,这里总是取前一个TH对象。

$.bind("mousedown", function {var th = $;//与mousemove函数中同样的判断if .length < 1 | th.nextAll {return;}var pos = th.offset();if (event.clientX - pos.left < 4 ||  - (event.clientX - pos.left)) < 4) {var height = th.parent;var top = pos.top;$.css({ "height": height, "top": top,"left":event .clientX,"display":"" });//全局变量,代表当前是否处于调整列宽状态lineMove = true;//总是取前一个TH对象if (event.clientX - pos.left < th.width {currTh = th.prev();}else {currTh = th;}}});

接下来是鼠标移动时,竖线随之移动的效果,因为需要当鼠标离开TH元素也要能有该效果,该效果写在BODY元素的mousemove函数中

$.bind("mousemove", function {if  {$.css({ "left": event.clientX }).show;

最后是鼠标弹起时,最后的调整列宽效果。这里我给BODY 和TH两个元素添加了同样的mouseup代码。我原先以为我只需要给BODY添加mouseup函数,但不明白为什么鼠标在TH中时,事件没有触发,我只好给TH元素也添加了代码。水平有限,下面完全重复的代码不知道怎么抽出来。

$.bind("mouseup", function {if  {$;lineMove = false;var pos = currTh.offset();var index = currTh.prevAll().length;currTh.width(event.clientX - pos.left);currTh.parent.each.children.width(event.clientX - pos.left);});}});$.bind("mouseup", function {if  {$;lineMove = false;var pos = currTh.offset();var index = currTh.prevAll().length;currTh.width(event.clientX - pos.left);currTh.parent.each.children.width(event.clientX - pos.left);});}});

好了,只要在需要这个效果的页面中引入包含以上代码的JS文件,就可以为页面中表格添加该效果。

另外以上代码在火狐中自定义鼠标图标的代码没出效果,所用的jquery为1.2.6

————————————————————————更新——————————————

关于拖动时会选中内容的BUG,将以下一行代码添加到$.ready函数里就行了

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

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:首先需要如图所示的鼠标图标文件

关键词:

上一篇:函数c就成了回调函数

下一篇:没有了