[对smartMenu.js改进] 解决右键菜单栏在边缘弹出后，移出视图区域无法操作的问题
当用户在视图边缘（如右下角）右键召唤菜单栏的时候，菜单仍然从选中元素的右下角弹出，这时二级菜单栏一般都离开了视图区域，用户无法进一步操作。
这个问题挺常见的，原作者的留言板：
但是作者应该是已经不再维护了，最后一个版本还是2011年10月的。
我给出的比较初步的解决方案：
因为作者没有给出鼠标事件的接口，只能在库的源码中修改坐标计算逻辑，以达到根据位置自适应弹出菜单的目的。
思路：判断右键点击位置，与窗口（我的是iframe窗口）大小作比较，取中心点分为坐标系的四个象限。
1、在第一象限召唤菜单栏，显示在触发事件元素的左下角
2、在第二象限召唤菜单栏，显示在触发事件元素的左上角
3、在第三象限召唤菜单栏，显示在触发事件元素的右上角
4、在第四象限召唤菜单栏，显示在触发事件元素的右下角
完整的代码如下：
/*
* smartMenu.js 智能上下文菜单插件
* http://www.zhangxinxu.com/
*
* Copyright 2011, zhangxinxu
*
* 2011-05-26 v1.0 编写
* 2011-06-03 v1.1 修复func中this失准问题
* 2011-10-10 v1.2 修复脚本放在<head>标签中层无法隐藏的问题
* 2011-10-30 v1.3 修复IE6~7下二级菜单移到第二项隐藏的问题
*/ (function($) {
var D = $(document).data("func", {});
$.smartMenu = $.noop;
$.fn.smartMenu = function(data, options) {
var B = $("body"), defaults = {
name: "",
offsetX: ,
offsetY: ,
textLimit: ,
beforeShow: $.noop,
afterShow: $.noop
};
var params = $.extend(defaults, options || {}); var htmlCreateMenu = function(datum) {
var dataMenu = datum || data, nameMenu = datum? Math.random().toString(): params.name, htmlMenu = "", htmlCorner = "", clKey = "smart_menu_";
if ($.isArray(dataMenu) && dataMenu.length) {
htmlMenu = '<div id="smartMenu_'+ nameMenu +'" class="'+ clKey +'box">' +
'<div class="'+ clKey +'body">' +
'<ul class="'+ clKey +'ul">'; $.each(dataMenu, function(i, arr) {
if (i) {
htmlMenu = htmlMenu + '<li class="'+ clKey +'li_separate"> </li>';
}
if ($.isArray(arr)) {
$.each(arr, function(j, obj) {
var text = obj.text, htmlMenuLi = "", strTitle = "", rand = Math.random().toString().replace(".", "");
if (text) {
if (text.length > params.textLimit) {
text = text.slice(, params.textLimit) + "…";
strTitle = ' title="'+ obj.text +'"';
}
if ($.isArray(obj.data) && obj.data.length) {
htmlMenuLi = '<li class="'+ clKey +'li" data-hover="true">' + htmlCreateMenu(obj.data) +
'<a href="javascript:" class="'+ clKey +'a"'+ strTitle +' data-key="'+ rand +'"><i class="'+ clKey +'triangle"></i>'+ text +'</a>' +
'</li>';
} else {
htmlMenuLi = '<li class="'+ clKey +'li">' +
'<a href="javascript:" class="'+ clKey +'a"'+ strTitle +' data-key="'+ rand +'">'+ text +'</a>' +
'</li>';
} htmlMenu += htmlMenuLi; var objFunc = D.data("func");
objFunc[rand] = obj.func;
D.data("func", objFunc);
}
});
}
}); htmlMenu = htmlMenu + '</ul>' +
'</div>' +
'</div>';
}
return htmlMenu;
}, funSmartMenu = function() {
var idKey = "#smartMenu_", clKey = "smart_menu_", jqueryMenu = $(idKey + params.name);
if (!jqueryMenu.size()) {
$("body").append(htmlCreateMenu()); //事件
$(idKey + params.name +" a").bind("click", function() {
var key = $(this).attr("data-key"),
callback = D.data("func")[key];
if ($.isFunction(callback)) {
callback.call(D.data("trigger"));
}
$.smartMenu.hide();
return false;
});
$(idKey + params.name +" li").each(function() {
var isHover = $(this).attr("data-hover"), clHover = clKey + "li_hover"; $(this).hover(function() {
var jqueryHover = $(this).siblings("." + clHover);
jqueryHover.removeClass(clHover).children("."+ clKey +"box").hide();
jqueryHover.children("."+ clKey +"a").removeClass(clKey +"a_hover"); if (isHover) {
$(this).addClass(clHover).children("."+ clKey +"box").show();
$(this).children("."+ clKey +"a").addClass(clKey +"a_hover");
} }); });
return $(idKey + params.name);
}
return jqueryMenu;
}; $(this).each(function() {
this.oncontextmenu = function(e) {
//回调
if ($.isFunction(params.beforeShow)) {
params.beforeShow.call(this);
}
e = e || window.event;
//阻止冒泡
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
//隐藏当前上下文菜单，确保页面上一次只有一个上下文菜单
$.smartMenu.hide();
var st = D.scrollTop();
var jqueryMenu = funSmartMenu();
if (jqueryMenu) {
/*
2017.12.4修改：根据触发事件的位置，自适应方向弹出
*/
if( e.clientX <= (e.view.innerWidth/2) && e.clientY <= (e.view.innerHeight/2))//左上
{
jqueryMenu.css({
display: "block",
left: e.clientX + params.offsetX ,
top: e.clientY + st + params.offsetY ,
});
}
if( e.clientX >= (e.view.innerWidth/2) && e.clientY <= (e.view.innerHeight/2))//右上
{
jqueryMenu.css({
display: "block",
left: e.clientX + params.offsetX -100,
top: e.clientY + st + params.offsetY ,
});
}
if( e.clientX <= (e.view.innerWidth/2) && e.clientY >= (e.view.innerHeight/2))//左下
{
jqueryMenu.css({
display: "block",
left: e.clientX + params.offsetX ,
top: e.clientY + st + params.offsetY -120,
});
}
if( e.clientX >= (e.view.innerWidth/2) && e.clientY >= (e.view.innerHeight/2))//右下
{
jqueryMenu.css({
display: "block",
left: e.clientX + params.offsetX -100,
top: e.clientY + st + params.offsetY -120,
});
}
D.data("target", jqueryMenu);
D.data("trigger", this);
//回调
if ($.isFunction(params.afterShow)) {
params.afterShow.call(this);
}
return false;
}
};
});
if (!B.data("bind")) {
B.bind("click", $.smartMenu.hide).data("bind", true);
}
};
$.extend($.smartMenu, {
hide: function() {
var target = D.data("target");
if (target && target.css("display") === "block") {
target.hide();
}
},
removeevent: function (event) {
var target = D.data("target");
if (target) {
target.remove();
if ($.isFunction(event)) {
event.call(this);
}
}
},
remove: function() {
var target = D.data("target");
if (target) {
target.remove();
}
}
});
})(jQuery);
修改之后的效果：
在右下方召唤
在左下方召唤
在左上方召唤
在右上方召唤
大概效果就是这样了，经过测试，菜单栏不会弹到视窗外面了。
[对smartMenu.js改进] 解决右键菜单栏在边缘弹出后，移出视图区域无法操作的问题的更多相关文章
- [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...
- 解决 sublime text 3 右键菜单栏出现多余的菜单项分隔符的问题
很早之前装了一个插件 JavaScript Completions,虽然还没有用过它的高级功能,但随着 sublime text 3 逐渐成为我主要的编程工具,最近发现在右键点击文件出现的菜单栏中,菜 ...
- js去掉浏览器右键点击默认事件（+vue项目开启右键行为）
js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...
- webdriver处理鼠标右键菜单栏
selenium中ActionChains类提供了鼠标操作的常用方法,但对于鼠标右键的菜单栏,无论是send_keys(Keys.ARROW_DOWN)还是send_keys("K" ...
- js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
- 将sublimeText添加到鼠标右键菜单栏
将sublimeText添加到鼠标右键菜单栏主要是写一个注册表的文件,将这个注进去,首先你需要清楚你的sublimeText软件的安装路径,然后改一下下面这段代码就可以了 Windows Regist ...
- C# winfrom容器布局与工具栏&&右键菜单栏&&隐藏显示小图标的的简单事件
前两天的时候学习了winfrom,简单地说就是各种布局,然后给按钮,textbox等各种控件添加各种事件的操作,经过前天一晚上,昨天一天的练习操作的还算熟练,但是对构造函数传值还是不是很了解,由于各种 ...
- js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）
js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...
随机推荐
- IT 圈里有哪些经常被读错的词？
原文链接:IT 圈里有哪些经常被读错的词? ()标相应英文单词[]标音标 =====公司/产品名===== Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙Skype ...
- LeetCode 202. Happy Number （快乐数字）
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- Ionic3 打包并签名Android-App
ionic cordova build android --prod --release 此时,在项目根目录中看下看到生成的apk文件:platforms\android\build\outputs\ ...
- 【JAVA零基础入门系列】Day14 Java对象的克隆
今天要介绍一个概念,对象的克隆.本篇有一定难度,请先做好心理准备.看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充. 克隆,自然就是将对象重新复制一份,那为什么要用克隆呢 ...
- ssh连接虚拟机失败解决办法
首先,你需要知道本机IP跟虚拟机IP,然后让两者互相ping一下,看能否ping通 让主机ping虚拟机 :ping (虚拟机ip) 出现如下: 表示主机可以ping通虚拟机 然后让虚拟机ping主机 ...
- Selenium WebDriver 中鼠标和键盘事件分析及扩展[转载]
原文:http://www.ibm.com/developerworks/cn/java/j-lo-keyboard/ 概念 在使用 Selenium WebDriver 做自动化测试的时候,会经常模 ...
- 如何运用GitHub来提高生产效率
这是一篇GitHub的入门级文章,主要针对git的初学者.我们将讨论初学者最关心的一些问题,如:为什么我们要使用GitHub,它的应用有哪些,如何运用它去帮助我们提高工作效率,以及它的基本用法有哪些. ...
- 呵呵哒，LNMP下通过fread方式下载文件时，中文名称文件找不到文件
哎,整整折腾一个下午. 本来好好的,thinkphp 自动的uniq方式保存的文件名,非要使用原文件名,真心蛋疼~~ 然后就只好写个脚本 把原来的所有文件都重新命名一下 - - 然后把数据库对应字段也 ...
- ABP框架个人开发实战(1)_环境搭建
前言 之前关注ABP框架有一阵子了,一直没有潜下心来实际研究一下.最近想自己建站,以后有自己的功能开发项目,可以在自己的站点上开发,并一步步的完善,所以找个比较好用的框架迫在眉睫,选来选去,决定用AB ...
- SpringMVC接收复杂对象
SpringMVC接收复杂对象 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7642977.html 本节内容暂放一边,我先扯点儿,心情好了,代码顺风顺水哈~ ...