企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

jQuery smartMenu右键自定义菜单插件的使用方法

JavaScript笔记 码云 85℃ 0评论
目录
[隐藏]

今天介绍的这个插件是我最近项目中刚刚用到的,这是一个什么插件呢?我们在打开一个页面时,点击鼠标右键会出现一个默认的上下菜单选择弹框,说到这儿了,我想大家脑海里应该知道具体效果了,如下图:

jQuery smartMenu右键自定义菜单插件的使用方法

看到上图是不是有一种熟悉的感觉,但是我们在实际项目中开发浏览器的默认右键选择菜单却不是我们想要的,我们希望我们做的浏览器菜单右键菜单选项更智能,可以根据自己的需要来自定义。

我们在qq和QQ邮箱都能体验到这些功能,如下图:

浏览器菜单右键菜单选项

QQ邮箱菜单右键菜单选项

第一次接触感觉功能还是很强大实用的,但是大家有了这个sumartMenu插件,直接一行代码绑定就可以实现我们想要的页面自定义菜单功能,接下来就是他的使用方法,别走开一起往下看。

一、smartMenu插件简单介绍

1、大小

非压缩版本4~5K的样子,YUIcompressor压缩后2K出头,所以,该插件只能算是个实用的小插件而已。

2、使用

此插件使用不需要任何图片资源,但是需要调用一段CSS样式,你可以在头部放入如下的一段CSS文件引入代码:

<link rel="stylesheet" href="../css/smartMenu.css" type="text/css" />

3、脚本部分,jQuery库以及插件脚本类似下面的调用

<script type="text/javascript" src="../libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-smartMenu.js"></script>

注:smartMenu插件需要jQuery1.4+以上版本支持,暂不向下兼容。

二、资源下载

下载附带demo的打包的zip源文件:https://pan.baidu.com/s/1ggeGEf5 密码:cn8i

Demo的JS相关代码:

var chkSingle = $("th input"), chkGroup = $("td input");//选中样式切换
var funTrStyle = function() {
    chkGroup.each(function() {
        if ($(this).attr("checked")) {
            $(this).parents("tr").addClass("bg");    
        } else {
            $(this).parents("tr").removeClass("bg");    
        }
    });
}, funTrGet = function() {
    return $("td input:checked").parents("tr");
};//全反选
chkSingle.bind("click", function() {
    if ($(this).attr("checked")) {
        chkGroup.attr("checked", "checked");
    } else {
        chkGroup.attr("checked", "");
    }
    funTrStyle();    
});
chkGroup.bind("click", funTrStyle);
funTrStyle();
//自定义右键上下文//数据
var objDelete = {
    text: "删除",
    func: function() {
        funTrGet().remove();
    }    
}, objRubbish = {
    text: "这是垃圾邮件",
    func: function() {
        funTrGet().hide();
    }    
}, objRead = {
    text: "标记为已读",
    func: function() {
        funTrGet().css("font-weight", "400");
    }
}, objUnRead = {
    text: "标记为未读",
    func: function() {
        funTrGet().css("font-weight", "700");
    }    
}, objSend = {
    text: "移动到",
    data: [
        [{
            text: "收件箱",
            func: function() {
                funTrGet().hide();
            }
        }, {
            text: "已发送",
            func: function() {
                funTrGet().hide();
            }
        }, {
            text: "QQ邮箱订阅",
            func: function() {
                funTrGet().hide();
            }
        }], [{
            text: "新建文件夹",
            func: function() {
                alert("模拟不了,弹出个框框意思下");    
            }
        }]
    ]
};
var mailMenuData = [
    [objDelete, objRubbish]
];
//绑定
$("tr").smartMenu(mailMenuData, {
    name: "mail",
    //根据已读与否状态显示不同的上下文菜单
    beforeShow: function() {
        //右键选中当前行  
        $(this).find("input").attr("checked", "checked");    
        funTrStyle();
        
        //动态数据,及时清除
        $.smartMenu.remove();
        
        //确定显示数据 - 主要是已读与未读
        var numTrBold = 0, numTrNormal = 0, eleTr = funTrGet();
        eleTr.each(function() {
            if ($(this).css("font-weight") === "700") {
                numTrBold++;    
            } else {
                numTrNormal++;    
            }
        });
        if (eleTr.size() === numTrBold) {
            //全是粗体
            mailMenuData[1] = [objRead, objSend];
        } else if (eleTr.size() === numTrNormal) {
            //全是正常
            mailMenuData[1] = [objUnRead, objSend];
        } else {
            //混杂
            mailMenuData[1] = [objRead, objUnRead, objSend];
        }
    }
});

三、smartMenu插件data参数介绍

插件的使用如下:

$(选择器).smartMenu(data, options);

其中$(选择器)元素就是你需要右键显示列表内容的元素。而data参数决定了右键显示的自定义菜单的内容(包括分组,层级等)。这里就具体讲下这个data参数。

首先data参数的结构模型如下:

var data = [[{}, {}, {}], [{}]];

右键出现的上下文菜单的每一项都是由一个有着固定键值的对象创建的,这个对象只支持三个关键键值:text,func,data,分别表示菜单文字,点击菜单的方法,菜单对应的二级菜单数据,例如下面,这是第一个demo页面设置图片内边距的对象数据:

图片内边距的对象数据

对象中的text内容对应的是菜单的文字内容,如果该文字内容超过插件限制的文字个数,菜单会截取文字并在后面添加点点点…,完整文字会以title的形式显示。

func对应方法,也就是点击菜单后执行的动作,其中方法中的this指的就是当前绑定自定义右键的元素,例如在demo1中this就是指张含韵小姐这张图片了,于是就可以使用$(this)设置图片的相关样式。

data关键字一般不与func同时出现,因为含有data关键字的菜单项自带显示下级菜单的方法。这里的data关键字对应的值的格式与整个外部的data参数格式是一致的,就是一种多级嵌套而已。

很多的对象放在一个数组中,形成一个组。当有多个组的时候,我们右键显示菜单的时候就会发现:每个组和每个组之间会用分隔线分隔开,如下图标示:

每个组和每个组之间会用分隔线分隔开

而所有的这些组集合在一个数组中就是本段多介绍的data参数。

最后奉上第一个demo页面图片部分的data参数数据内容:

var imageMenuData = [
    [{
        text: "图片描边",
        data: [[{
            text: "5像素深蓝",
            func: function() {
                $(this).css("border", "5px solid #34538b");
            }
        }, {
            text: "5像素浅蓝",
            func: function() {
                $(this).css("border", "5px solid #a0b3d6");
            }
        }, {
            text: "5像素淡蓝",
            func: function() {
                $(this).css("border", "5px solid #cad5eb");
            }
        }]]
    }, {
        text: "图片内间距",
        func: function() {
            $(this).css("padding", "10px");
        }
    }, {
        text: "图片背景色",
        func: function() {
            $(this).css("background-color", "#beceeb");
        }
    }],
    [{
        text: "查看原图",
        func: function() {
            var src = $(this).attr("src");
            window.open(src.replace("/s512", ""));    
        }
    }]
];

四、smartMenu插件API参数详解

这里的API参数也就是options参数内容了,具体名称,作用等参见下表:

smartMenu插件API参数详解

一般情况下,上面的API参数用的比较多的就是name。demo页面中用到了beforeShow这个API参数,用来在菜单显示之前改变data数据。

下表就是插件相关类名以及相对应的含义:

beforeShow这个API参数

上面API参数中提到一个常用的name参数,这个参数会以id名称应用到菜单最外部容器上,最外部容器id创建规则是:”smartMenu_”+name,记住这个规则,这是比较重要的。因为这可以设置不同的右键菜单样式。

举个很简单的例子,我们有一个自定义的右键菜单内容,菜单里面显示的全部都是邮件地址列表,显然,CSS样式控制的140像素容器宽度是不够用的,但是,我们又不能修改smart_menu_box的宽度为200像素(比如),因为这会让所有的菜单宽度都是200像素。怎么办呢,这时候配合name值创建的容器id就发挥作用了,可以灵活定义特殊的上下文菜单的样式。

例如,这个邮件地址上下文菜单的name值是”email”,则我们可以通过以下样式控制其上下文菜单的宽度层级什么的,子元素当然也不在话下:

#smartMenu_email { width: 200px; }

id优先级高于class,所以,重置smart_menu_box默认的140像素宽度是绝对没有问题的。

另外,理论上,本插件支持无限层级的菜单。

除了API参数外,本插件还裸露了两个扩展方法,名称为:$.smartMenu.hide()和$.smartMenu.remove(),其中前者是隐藏右键菜单,后者是移除右键菜单。如果右键的显示的菜单是动态的,在菜单隐藏或是显示之前,一定要执行一下$.smartMenu.remove()方法,移除菜单内容。这样,每次右键的时候,插件根据新的data重建上下文菜单,否则,会直接显示页面上缓存的HTML上下文内容。

在demo页面,也就是QQ邮箱交互效果demo页面中就有$.smartMenu.remove()方法使用的痕迹。

特别介绍一下,这个插件是张鑫旭老师写的,爱学习的我看了一下,收获不少,所以收藏起来日后查看复习,当然插件也存在的一些未发现的bug问题,欢迎感兴趣有能力的同学让我们一起交流完善此插件,为前端行业做些许的贡献,感谢大家的阅读。

转载请注明:码云笔记 » jQuery smartMenu右键自定义菜单插件的使用方法

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址