jQuery Context Menu 右键菜单
2009-06-28 23:20
417 查看
引入JS和CSS
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />
菜单条的HTML定义
<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>
调用
$(document).ready( function() {
$("#selector").contextMenu({
menu: 'myMenu' //菜单条UL的ID
},
function(action, el, pos) { //单击菜单条的事件
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
});
参数说明
action 菜单中A的href(去除#)
el 被右击元素DOM
pos.x 相对于被右击元素的X坐标
pos.y
pos.docX 绝对X坐标
pos.docY
方法
disableContextMenu()
enableContextMenu()
disableContextMenuItems(“#option1,#option2,")
enableContextMenuItems(“#option1,#option2,")
destroyContextMenu()
演示
下载
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />
菜单条的HTML定义
<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>
调用
$(document).ready( function() {
$("#selector").contextMenu({
menu: 'myMenu' //菜单条UL的ID
},
function(action, el, pos) { //单击菜单条的事件
alert(
'Action: ' + action + '\n\n' +
'Element ID: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});
});
参数说明
action 菜单中A的href(去除#)
el 被右击元素DOM
pos.x 相对于被右击元素的X坐标
pos.y
pos.docX 绝对X坐标
pos.docY
方法
disableContextMenu()
enableContextMenu()
disableContextMenuItems(“#option1,#option2,")
enableContextMenuItems(“#option1,#option2,")
destroyContextMenu()
演示
下载
相关文章推荐
- Jquery contentMenu右键菜单 当某个事件出发时才显示菜单
- C# 右键菜单 contextMenuStrip
- ContextMenuStrip右键菜单 获取关联控件、判断点击
- 转:C#判断ContextMenuStrip右键菜单的来源(从哪个控件弹出来的)
- C#判断ContextMenuStrip右键菜单的来源(从哪个控件弹出来的)
- C#如何使用右键菜单【contextMenuStrip】
- Buzzword样式的右键菜单 Customized Context Menu as Buzzword
- C#判断ContextMenuStrip右键菜单的来源(从哪个控件弹出来的)
- PopupMenu和ContextMenuStrip右键菜单使用
- 手机浏览器中屏蔽img的系统右键菜单context menu
- 【C#】ContextMenuStrip 右键菜单颜色设置
- C# ContextMenuStrip 点击右键不显示菜单,只点击左键显示菜单
- C#contextmenustrip长度问题 右键快捷菜单上的文字不能完全显示
- C# 系统应用之ListView控件 (三).添加ContextMenuStrip右键菜单打开删除文件
- 【转载于<小锋刚>博客园】C#遍历ContextMenuStrip右键菜单中包含子菜单的所有菜单并添加事件
- arcengine onmouseup使用contextmenustrip添加右键菜单
- C#遍历ContextMenuStrip右键菜单中包含子菜单的所有菜单并添加事件
- Win7/Win8右键菜单管理工具(Easy Context Menu) v1.5 绿色版
- Android 菜单, option menu 和 context menu (右键菜单)
- C# winform中使用contextMenuStrip作为右键菜单时,菜单项失效的问题