jquery-contextify是一款基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单使用Bootstrap的下拉菜单组件来制作,通过简单的配置即可在指定元素上生成右键菜单。
安装
可以通过bower来安装jquery-contextify右键菜单插件。
$ bower install jquery-contextify
使用方法
在页面中引入Bootstrap相关文件,jQuery和jquery.contextify.min.js文件。
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> <script type="text/javascript" src="path/to/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.contextify.min.js.js"></script>
HTML结构
以一个超链接为例,右键点击这个超链接可以生成右键菜单。
<a class="foo" href="#" data-name="John">右键点击这里</a>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该右键菜单插件。
var options = {items:[ {header: 'Options'}, {text: 'First Link', href: '#'}, {text: 'Second Link', onclick: function(e) { alert('Hello ' + e.data.name); }}, {divider: true}, {text: 'Stuff', href: '#'} ]} $('.foo').contextify(options);
配置参数
jquery-contextify右键菜单插件的可用配置参数有:
参数 | 类型 | 默认值 | 描述 |
items | array | [] | 右键菜单项数组对象 |
action | string | contextmenu | 显示右键菜单的条件,可以是:contextmenu ,click 或mouseover 。 |
menuId | string | contextify-menu | 右键菜单的ID属性 |
menuClass | string | dropdown-menu | 右键菜单的class属性 |
headerClass | string | dropdown-header | 右键菜单头部的class属性 |
dividerClass | string | divider | 右键菜单分割线的class属性 |
jquery-contextify右键菜单的github地址为:https://github.com/abeMedia/jquery-contextify
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!