相关文章推荐
星星上的斑马  ·  flex Vector - ...·  4 天前    · 
星星上的斑马  ·  python - pipenv ...·  10 月前    · 
星星上的斑马  ·  org.jboss.seam.Entity ...·  11 月前    · 
星星上的斑马  ·  spring - Caused by: ...·  11 月前    · 
星星上的斑马  ·  Django ...·  11 月前    · 
玩足球的斑马  ·  System.Runtime.Interop ...·  7 分钟前    · 
根据 超级链接 方法可以为一个单元格添加超级链接,以实现钻取、跳转等多种功能,但是有时一个单元格元素包含多个超链接时,必须要单击一次超链接元素,才会弹出备选超链接选项,对于使用者来说,交互体验不佳。

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

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

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

3.1 新建模板

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

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


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();
 
推荐文章