jQuery-contextMenu使用教程

效果如下图所示。在【右击菜单】处右击,会出现下面的效果。

添加引用

    <script src="jQuery-contextMenu-master/dist/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="jQuery-contextMenu-master/dist/jquery.contextMenu.css">
<script src="jQuery-contextMenu-master/dist/jquery.contextMenu.js"></script>
<script src="jQuery-contextMenu-master/dist/jquery.ui.position.js"></script>

然后加入下面的代码

 $(document).ready(function () {
$.contextMenu({
selector: "#input1" ,
callback: function (key, options) {
alert(options.selector + " " + key);
},
items: {
"log": { name: "查看日志", icon: "edit" },
"skip": {
name: "跳过此步骤", icon: function () {
return 'context-menu-icon context-menu-icon-quit';
}
}, "test1": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-loading';
}
} , "test2": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-edit';
}
} , "test3": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-delete';
}
} , "test4": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-cut';
}
} , "test5": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-add';
}
} , "test6": {
name: "马良测试1", icon: function () {
return 'context-menu-icon context-menu-icon-copy';
}
}
}
});
})

点击下载

jQuery-contextMenu使用教程的更多相关文章

  1. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  2. 【转载】jQuery Validate 菜鸟教程

    文章1:http://www.runoob.com/jquery/jquery-plugin-validate.html          (jQuery Validate 菜鸟教程)

  3. jQuery插件开发详细教程

    这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...

  4. 转:jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  5. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  6. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  7. 《JQuery常用插件教程》系列分享专栏

    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...

  8. jQuery contextMenu使用

    地址:jQuery contextMenu 需要以下文件: jquery.contextMenu.css jquery.min.css jquery.contextMenu.js jquery.ui. ...

  9. [xPlugins] jQuery Contextmenu右键菜单

    [2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜 ...

  10. jQuery插件开发精品教程,让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

随机推荐

  1. MT【229】最小值函数

    已知定义域为$R$的函数,$f(x),g(x)$满足:$f(x)+g(x)=e^{-x^2+1}$,则$min\{f(x),g(x)\}$的最大值为______ 解答:$min\{f(x),g(x)\ ...

  2. 11 Zabbix Item类型之Zabbix Calculated 计算型Item类型

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 11 Zabbix Item类型之Zabbix Calculated 计算型Item类型 计算类型 ...

  3. 1.Zabbix报错信息:It probably means that the systems requires more physical memory.

    点击返回:自学Zabbix之路 1.Zabbix报错信息:It probably means that the systems requires more physical memory. 1.报错信 ...

  4. 【BZOJ4738/UOJ#276】汽水(点分治,分数规划)

    [BZOJ4738/UOJ#276]汽水(点分治,分数规划) 题面 BZOJ UOJ 题解 今天考试的题目,虽然说是写完了,但是感觉还是半懂不懂的来着. 代码基本照着\(Anson\)爷的码的,orz ...

  5. hdu 2870 Largest Submatrix(平面直方图的最大面积 变形)

    Problem Description Now here is a matrix with letter 'a','b','c','w','x','y','z' and you can change ...

  6. linux已开机时间 系统信息

    linux 查看系统运行时间 (从开机当现在的开机时间) 1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0. ...

  7. SQL Server 增、删、改、小部分查

    --现有三个表Student.Score.Course.Teacher create table Student ( Sno ) not null,--学号 Sname ) not null,--姓名 ...

  8. 【洛谷P1091】合唱队列

    题目大意:给定一个有 N 个正整数的序列,从其中拿走一些数,使得剩下的数满足严格单峰性,即先严格递增后严格递减,允许单调增和单调减,求最少需要拿走多少数. 题解:先考虑严格单调的情况,最少需要拿走多少 ...

  9. Eclipse导入模板格式Xml配置文件

    Eclipse一般常用的可以导入两处 *.xml 格式的模板,一个是常用的注释格式模板,另一个是代码格式化时用的模板,导入方法如下: 假设: 1.xml 是代码注释格式模板     2.xml 是代码 ...

  10. SIFT特征点检测学习一(转载)

    新手上路,先转载学习tornadomeet的博客:http://www.cnblogs.com/tornadomeet/archive/2012/08/16/2643168.html 特征点检测学习_ ...