利用smartmenu实现点击右键出现菜单并实现菜单的只读方法
在网上我们能搜索到有关于smartmenu实现右键菜单的很多例子，但是利用smartmenu你会发现它具有的功能少之又少，只能简单的实现点击右键出现菜单，但是有的时候我们需要实现菜单里面有些菜单在一定情况下面是只读的，不能点击的（即点击了也是没有效果的），这样我们就必须对smartmenu.js文件进行修改，以便实现自己想要的功能，在下面我在smartmenu中增加了自己想要的实现菜单只读的功能，不过smartmenu传递数据的方法也随着发生了改变，在以前用smartmenu是可以只传递两个数据一个是text，一个是func或者data，在修改之后smartmenu必须传递三个数据，第三个数据名字是readonly，如果你传readonly：true进去的话，这个菜单就是只读的，你点击它，它不会进行任何操作，如果要是你传递了readonly:false这个时候这个菜单就是可以点击的并且有你自己想要的效果，接下来给大家看一下效果，如图：
灰色代表不能点击，白色代表可以点击的。
下面我将修改后的smartmenu.js代码和smartmenu.css代码贴在这里，如果有需要的哥们可以直接拷走这些代码放在一个文件里面直接就可以使用了，感谢大家的阅读，具体代码如下：
smartmenu.css的代码如下：
@charset "utf-8";
/* smartMenu.css by zhangxinxu */
.smart_menu_box{display:none; width:160px; position:absolute; z-index:201105;}
.smart_menu_body{padding:1px; border:1px solid #B8CBCB; background-color:#fff; -moz-box-shadow:2px 2px 5px #666; -webkit-box-shadow:2px 2px 5px #666; box-shadow:2px 2px 5px #666;}
.smart_menu_ul{margin:0; padding:0; list-style-type:none;}
.smart_menu_li{position:relative;}
.smart_menu_a{display:block; height:25px; line-height:24px; padding:0 5px 0 25px; color:#000; font-size:12px; text-decoration:none; overflow:hidden;}
.smart_menu_a:hover, .smart_menu_a_hover{background-color:#348CCC; color:#fff; text-decoration:none;}
.smart_menu_li_separate{line-height:0; margin:3px; border-bottom:1px solid #B8CBCB; font-size:0;}
.smart_menu_triangle{width:0; height:0; border:5px dashed transparent; border-left:5px solid #666; overflow:hidden; position:absolute; top:7px; right:5px;}
.smart_menu_a:hover .smart_menu_triangle, .smart_menu_a_hover .smart_menu_triangle{border-left-color:#fff;}
.smart_menu_li_hover .smart_menu_box{top:-1px; left:130px;}
.smart_menu_lird{position:relative;background-color:#808a87;}
smartmenu.js代码如下：
/*
* 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 修复脚本放在
* 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: 2,
offsetY: 2,
textLimit: 6,
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 = '
'
'
- ';
- ';
- ' + htmlCreateMenu(obj.data) +
'' + text + '' +
' '; - ' +
'' + text + '' +
' '; - ' + htmlCreateMenu(obj.data) +
'
' '; - ' +
'
' ';
$.each(dataMenu, function (i, arr) {
if (i) {
htmlMenu = htmlMenu + '
}
if ($.isArray(arr)) {
$.each(arr, function (j, obj) {
var text = obj.text, htmlMenuLi = "", strTitle = "", rand = Math.random().toString().replace(".", "");
var rd = obj.readonly;
if (text) {
if (text.length > params.textLimit) {
text = text.slice(0, params.textLimit) + "…";
strTitle = ' title="' + obj.text + '"';
}
if (rd == false) {
if ($.isArray(obj.data) && obj.data.length) {
htmlMenuLi = '
} else {
htmlMenuLi = '
}
htmlMenu += htmlMenuLi;
var objFunc = D.data("func");
objFunc[rand] = obj.func;
D.data("func", objFunc);
}
else {
if ($.isArray(obj.data) && obj.data.length) {
htmlMenuLi = '
} else {
htmlMenuLi = '
}
htmlMenu += htmlMenuLi;
}
}
});
}
});
htmlMenu = htmlMenu + '
'
'
}
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) {
jqueryMenu.css({
display: "block",
left: e.clientX + params.offsetX,
top: e.clientY + st + params.offsetY
});
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);
具体调用的方法如下：
$(this).bind("mousedown", function (e) {
if (e.which == 3) {
yjoption1 = {
name: "操作1",
offsetX: 2,
offsetY: 2,
textLimit: 10,
beforeShow: $.noop,
afterShow: $.smartMenu.remove()
};
yjdata1 = [
[
{
text: "编辑",
func: function () {
$("#btnedit").trigger('click');
},
readonly: false
},
{
text: "取消",
func: function () {
$("#btncancel").trigger('click');
},
readonly: true
},
{
text: "取消选择",
func: function () {
$("#btncancelselect").trigger('click');
},
readonly: true
}, {
text: "保存",
func: function () {
$("#btnsave").trigger('click');
},
readonly: true
},
{
text: "清除时间片",
func: function () {
$("#clearTime").trigger('click');
},
readonly: true
},
{
text: "应用时间片",
func: function () {
$("#btnappl").trigger('click');
},
readonly: true
}
]
];}})
$(this).smartMenu(yjdata1, yjoption1);
在这里感谢各位读者的阅读，谢谢。