wdContextMenu 自定义网页右键菜单插件_导航菜单_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

wdContextMenu 自定义网页右键菜单插件

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-01-11 12:31:37 去下载去预览

特效介绍

wdContextMenu是一个jQuery插件，可以用来自定义网页右键菜单，支持多级二级菜单，支持菜单左侧图标标识，多个自定义选项，可以满足您的项目的不同的需求。

使用方法

    1、将 contextmenu.css 文件和 images 文件夹放到您的项目中，请注意 contextmenu.css 中图片的路径，这里的图片主要是右键菜单的箭头背景等，然后引入 contextmenu.css。

   2、将 jquery.js 和 jquery.contextmenu.js 放到您的项目中，然后再需要使用的页面，先引入 jquery.js 文件，再引入 jquery.contextmenu.js 文件。

   3、下面是配置参数：

01var option = { width: 150, items: [
02    { text: "Item One", icon: "sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },
03    { text: "Item Two", icon: "sample-css/ac0036-16.gif", alias: "1-2", action: menuAction },
04    //this is normal menu item, menuAction will be called if this item is clicked on
05    { text: "Item Three", icon: "sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },
06    //this is a split line
07    { type: "splitLine" },
08    //this is a parent item, which has some sub-menu items
09    { text: "Group One", icon: "sample-css/wi0009-16.gif", alias: "1-4", type: "group", width: 170, items: [
10    { text: "Group Three", icon: "sample-css/wi0054-16.gif", alias: "2-2", type: "group", width: 190, items: [
11    { text: "Group3 Item One", icon: "sample-css/wi0062-16.gif", alias: "3-1", action: menuAction },
12    { text: "Group3 Item Tow", icon: "sample-css/wi0063-16.gif", alias: "3-2", action: menuAction }
13    ]
14    },
15    { text: "Group Two Item1", icon: "sample-css/wi0096-16.gif", alias: "2-1", action: menuAction },
16    { text: "Group Two Item1", icon: "sample-css/wi0111-16.gif", alias: "2-3", action: menuAction },
17    { text: "Group Two Item1", icon: "sample-css/wi0122-16.gif", alias: "2-4", action: menuAction }
18    ]
19    },
20    { type: "splitLine" },
21    { text: "Item Four", icon: "sample-css/wi0124-16.gif", alias: "1-5", action: menuAction },
22    { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
23    { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
24    { text: "Item Two", icon: "sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
25    ]
26    }
27    ]
28};
29$("#target").contextmenu(option);

注：这里的 "#target" 选择器，是需要在上面右键弹出菜单的容器。

禁用某些菜单

01var option = {
02    ...
03    onShow: applyrule,    
04}
05$("#target").contextmenu(option);      
06function applyrule(menu) {               
07    menu.applyrule({ name: "target2",
08      disable: true,
09      items: ["1-2", "2-3", "2-4", "1-6"]
10    });
11}

   下面是官方英文介绍的翻译：

   1、简介

       这是wdtree version1.4和允许自由使用（LGPL）。

   2、浏览器支持

       Firefox2.0 + IE6 + opera9 + safari3 + Chrome

   三.安装与使用

       下载软件包，解压到一个目录。

       拷贝解压缩目录Apache WWW目录/子目录。

       在浏览器中打开 index.html 查看案例代码。