特效介绍
wdContextMenu是一个jQuery插件,可以用来自定义网页右键菜单,支持多级二级菜单,支持菜单左侧图标标识,多个自定义选项,可以满足您的项目的不同的需求。
使用方法
1、将 contextmenu.css 文件和 images 文件夹放到您的项目中,请注意 contextmenu.css 中图片的路径,这里的图片主要是右键菜单的箭头背景等,然后引入 contextmenu.css。2、将 jquery.js 和 jquery.contextmenu.js 放到您的项目中,然后再需要使用的页面,先引入 jquery.js 文件,再引入 jquery.contextmenu.js 文件。
3、下面是配置参数:
var option = { width: 150, items: [ { text: "Item One", icon: "sample-css/wi0126-16.gif", alias: "1-1", action: menuAction }, { text: "Item Two", icon: "sample-css/ac0036-16.gif", alias: "1-2", action: menuAction }, //this is normal menu item, menuAction will be called if this item is clicked on { text: "Item Three", icon: "sample-css/ei0021-16.gif", alias: "1-3", action: menuAction }, //this is a split line { type: "splitLine" }, //this is a parent item, which has some sub-menu items { text: "Group One", icon: "sample-css/wi0009-16.gif", alias: "1-4", type: "group", width: 170, items: [ { text: "Group Three", icon: "sample-css/wi0054-16.gif", alias: "2-2", type: "group", width: 190, items: [ { text: "Group3 Item One", icon: "sample-css/wi0062-16.gif", alias: "3-1", action: menuAction }, { text: "Group3 Item Tow", icon: "sample-css/wi0063-16.gif", alias: "3-2", action: menuAction } ] }, { text: "Group Two Item1", icon: "sample-css/wi0096-16.gif", alias: "2-1", action: menuAction }, { text: "Group Two Item1", icon: "sample-css/wi0111-16.gif", alias: "2-3", action: menuAction }, { text: "Group Two Item1", icon: "sample-css/wi0122-16.gif", alias: "2-4", action: menuAction } ] }, { type: "splitLine" }, { text: "Item Four", icon: "sample-css/wi0124-16.gif", alias: "1-5", action: menuAction }, { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [ { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction }, { text: "Item Two", icon: "sample-css/wi0122-16.gif", alias: "4-2", action: menuAction } ] } ] }; $("#target").contextmenu(option);注:这里的 "#target" 选择器,是需要在上面右键弹出菜单的容器。
禁用某些菜单
var option = { ... onShow: applyrule, } $("#target").contextmenu(option); function applyrule(menu) { menu.applyrule({ name: "target2", disable: true, items: ["1-2", "2-3", "2-4", "1-6"] }); }
下面是官方英文介绍的翻译:
1、简介
这是wdtree version1.4和允许自由使用(LGPL)。
2、浏览器支持
Firefox2.0 + IE6 + opera9 + safari3 + Chrome
三.安装与使用
下载软件包,解压到一个目录。
拷贝解压缩目录Apache WWW目录/子目录。
在浏览器中打开 index.html 查看案例代码。