JS实现鼠标悬浮显示超链选项

编辑
文档创建者:yets11 (67190 )     浏览次数:2600次     编辑次数:4次     最近更新:ukae 于 2018-08-08     

目录:

1. 描述编辑

根据超级链接方法可以为一个单元格添加超级链接,以实现钻取、跳转等多种功能,但是有时一个单元格元素包含多个超链接时,必须要单击一次超链接元素,才会弹出备选超链接选项,对于使用者来说,交互体验不佳。

此处提供一个方法使鼠标移动到超链接时,直接显示多个超链接选项,而不需要二次点击,若只有一个超链则直接打开,如下效果:
222

2. 实现思路编辑

利用单元格的jquery事件mouseover来控制鼠标移动到单元格的动作,利用mouseout来执行鼠标移出单元格的动作;

但是其中需要判断是否包含超链接以及是否有多个超链接,另外还需要处理鼠标移出单元格时是否移动到菜单的判断。

3. 示例编辑

3.1 新建模板

新建一个工作簿,B2单元格内容为超链接1,B3单元格内容为超链接2

为超链接1添加3个超链接:

222

超链接2添加1个超链接(作为对比):
222

3.2加载结束事件

222

代码如下:

$('td').mouseover(function(){ //设置鼠标移动到单元格事件 var $link=$(this).find('.linkspan'); //如果包含超链接 if($link.length>0){ //如果包含多个超链接备选项,弹出菜单,否则不处理 if($link.attr('onclick').replace('return').indexOf('return')>=0){ //调用一次超链接点击事件 $link.click(); var x=window.event.x; var y=window.event.y; //设置弹出菜单的左、上方位置为鼠标当前位置,也可以按需要修改 $('.menu').css('left',x); $('.menu').css('top',y); } } }).mouseout(function(e){ ////设置鼠标出单元格事件,需要隐藏原来的菜单 var $link=$(this).find('.linkspan'); if($link.length>0){ var $target=$(e.toElement); if(!$target.hasClass('menu')){ //隐藏弹出菜单 $('.menu').hide(); }} })

3.3 保存预览

保存预览,效果如上图,可以看到,在单元格包含多个超链接时,鼠标移动其中会显示多个菜单,如果是单个超链接,还是按照原来的点击一次进行跳转,不影响效果。

3.4 其他需求

如果需要鼠标移动到超链接本身而不是移动到单元格就显示菜单的需求时,可用以下代码

$('td .linkspan').mouseover(function(){ //设置鼠标移动到超链接事件 var $link=$(this); //如果包含超链接 if($link.length>0){ //如果包含多个超链接备选项,弹出菜单,否则不处理 if($link.attr('onclick').replace('return').indexOf('return')>=0){ //调用一次超链接点击事件 $link.click(); var x=window.event.x; var y=window.event.y; //设置弹出菜单的左、上方位置为鼠标当前位置,也可以按需要修改 $('.menu').css('left',x); $('.menu').css('top',y); } } }).mouseout(function(e){ ////设置鼠标出超链接事件,需要隐藏原来的菜单 var $link=$(this); if($link.length>0){ var $target=$(e.toElement); if(!$target.hasClass('menu')){ //隐藏弹出菜单 $('.menu').hide(); }} })

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]