几款jQuery右键菜单插件介绍
来源:互联网 发布:js dom遍历 编辑:程序博客网 时间:2024/04/30 12:59
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单。
类似右键菜单的组件网上很多。一般而言,改变浏览器的默认菜单应当慎用,这会使多数用户感到不习惯。但是在企业Web应用中,用户的使用环境更加可控,在这种应用中使用自定义右键菜单会更加适合。
以下列举几款比较成熟的jQuery右键菜单插件,我们将逐一介绍,请读者自行比较,并根据自己的需求选择。
1.VERY SIMPLE CONTEXT MENU-Intekhab A RizviProject Page: http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/
jQuery Very Simple ContextMenu Plugin
使用:
1.在插件主页下载所需文件。
2.在你的html文件中包含jquery库,vscontext.jquery.js,css/vscontext.css。
<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="vscontext.jquery.js" type="text/javascript"><!--mce:1--></script>
3.在html中创建要响应右键菜单的元素。
<div id="item">右键点我</div>
4.创建菜单项目。
<li>的class有seprator的,会在该项下面有一条分割线。
<div class="vs-context-menu">
<ul>
<li class="cut seprator"><a id="menu_1" href="javascript:cut();">剪切</a></li>
<li class="copy"><a id="menu_2" href="javascript:copy();">复制</a></li>
<li class="paste seprator"><a id="menu_3" href="javascript:paste();">粘贴</a></li>
<li class="edit"><a id="menu_4" href="javascript:edit();">编辑</a></li>
<li class="delete"><a id="menu_5" href="javascript:del();">删除</a></li>
</ul>
</div>
菜单项的图标要在css文件里设置相应<li>的背景。
.vs-context-menu li.cut a { background-image: url(icons/cut.png); }
.vs-context-menu li.copy a { background-image: url(icons/copy.png); }
.vs-context-menu li.paste a { background-image: url(icons/paste.png); }
.vs-context-menu li.edit a { background-image: url(icons/edit.png); }
.vs-context-menu li.delete a { background-image: url(icons/delete.png); }
5.初始化菜单,添加菜单事件。
<script type="text/javascript"><!--mce:2--></script>
2.CONTEXT MENU-Cory S.N. LaViska
Project Page: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/
jQuery Context Menu Plugin
使用:见插件官方网站。
Methods:Project Page: http://www.planitworks.nl/jeegoocontext/
JEEGOOCONTEXT
菜单可以通过以下两种方法初始化:
$('selector').jeegoocontext('menu_id');
$('selector').jeegoocontext('menu_id', 'options');
“selector”为菜单组建要绑定的内容,可以是任何jQuery选择器。
“menu_id”为菜单ID(没有 “#”)。
“options”为对象,可以配置属性和回调函数。
所有菜单内容都可以从菜单解绑,只需调用:
$ ('context').nojeegoocontext();
Options properties:
可设置以下4个回调:
onShowonHoveronSelectonHide每个回调接收两个参数:e 和 context,e为该事件的来源元素,context为菜单弹出所在的区域。利用这些回调函数,可以用return false的方法取消菜单事件的默认行为。
Project Page: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm
jQuery Context Menu script
这也是一个简单的右键菜单,菜单内容同样用<ul>和<li>嵌套构造多级菜单。使用方法参看插件页面。
5.CONTEXT MENU-Chris Domigan
Project Page: http://www.trendskitchens.co.nz/jquery/contextmenu/
ContextMenu plugin
这也是一个名为Context Menu的插件。
使用:
参数:
menu_id通过引用菜单的ID,你可以在多个元素上绑定相同的菜单。如:
$("table td").contextMenu("myMenu")
将会把ID为”myMenu”的菜单绑定到所有的表格单元格上。
settingssettings支持以下属性:
另外的,你可以调用:
$.contextMenu.defaults(settings)
为所有菜单定义一个默认样式。
6.JQUERY CONTEXTMENU PLUGIN-Matt Kruse
Project Page: http://www.javascripttoolbox.com/lib/contextmenu/index.php
这又是一个名叫ContextMenu的右键菜单插件。这个插件非常强大,作者写有一套Javascript Toolbox。
jQuery ContextMenu Plugin
使用:
$(function() {
$(".context").contextMenu([menu], {options});
});
菜单数组结构:
[
// Key = Option Content, Value = function to execute when option is clicked
{ 'Option Content' : function(menuItemClicked,menuObject) { } } ,
// A constant to represent a separator item
$.contextMenu.separator,
// A more complex option with each option declared explicitly
// Key = Option Content, Value = Object defining properties
{ 'Advanced Option' :
{
// 所有的属性都是可选的
// The function to be executed when the option is clicked.
// Arguments passed to this function are:
// menuItemClicked - A reference to the DIV containing the option clicked
// menuObject - A reference to the contextMenu object
// Return false to not close the menu when the option is clicked.
// Return anything else (or nothing) for normal behavior
onclick: function(menuItemClicked,menuObject) { },
// An additional class name to apply to the option
className: 'name',
// The class name to apply to the option when it is hovered over
hoverClassName: 'name',
// The background-image to use for this icon.
// If a theme doesn't support background images, it won't be displayed.
// A theme's CSS should explicitly take this into account.
icon: 'image.gif',
// Set to true to disable an option.
disabled: false,
// Title attribute text to show when the mouse is over an option
title: 'Title Text',
// Function to call when this option is hovered over.
// Arguments passed to this function are:
// className - The class name (string) that is defined in the options
// to be applied for hover
hoverItem: function(className) { },
// Function to call when this option is no longer hovered over.
// Arguments passed to this function are:
// className - The class name (string) that is defined in the options
// to be removed
hoverItemOut: function(className) { }
}
}
]
参数:
{
// true|false 是否显示菜单阴影
shadow:true,
// 菜单阴影的位置偏移,
// 如果设置了,覆盖单独的X, Y偏移
shadowOffset:0,
// 菜单阴影的偏移, X, Y
// (可以是负数)
shadowOffsetX:5,
shadowOffsetY:5,
// 阴影默认和菜单一样大,这里的值让阴影比菜单大或小一点
// 这里设置为-3使看上去效果最好
shadowWidthAdjust:-3,
shadowHeightAdjust:-3,
// 阴影透明度
shadowOpacity:.2,
// 设置给显示阴影的div的class
shadowClass:'context-menu-shadow',
// 阴影颜色
shadowColor:'black',
// 菜单相对鼠标点击位置的偏移
offsetX:0,
offsetY:0,
// jQuery选择器,定义菜单attach的DOM
appendTo:'body',
// 菜单显示方向
direction:'down',
// 保持菜单在屏幕可见区域
constrainToScreen:true,
// jQuery过渡效果,显示和隐藏菜单
showTransition:'show',
hideTransition:'hide',
// 过渡的速度 - slow/normal/fast/#ms
showSpeed:'',
hideSpeed:'',
// 显示/隐藏菜单以后的回调函数
showCallback:null,
hideCallback:null,
// CSS 类名 to apply to the generated menu HTML.
// 参见http://www.JavascriptToolbox.com/lib/contextmenu/#themes
className:'context-menu',
itemClassName:'context-menu-item',
itemHoverClassName:'context-menu-item-hover',
disabledItemClassName:'context-menu-item-disabled',
disabledItemHoverClassName:'context-menu-item-disabled-hover',
separatorClassName:'context-menu-separator',
innerDivClassName:'context-menu-item-inner',
// 类名前缀 to prepend to the theme name for css styling
themePrefix:'context-menu-theme-',
// 主题名,包括: 'default','xp','vista','osx','human','gloss'
// Multiple themes may be applied with a comma-separated list.
theme:'default',
// A flag to determine if an iframe shim should be used for <=IE6 on Windows
// This is to prevent selectbox/flash/etc bleed-thru.
// If animations cause problems in <=IE6 and you don't _need_ an iframe,
// set this to false.
useIframe:/*@cc_on @*//*@if (@_win32) true, @else @*/false,/*@end @*/
// 构造菜单
// Arguments:
// menu: Either String, Function, or Array
// String - a jQuery selector used to get the menu content on the page
// Function - Function to run each time menu is displayed. This
// function should return an Array of menu options
// Array - An array of options in the required format
// opts: An Object of options, overriding any or all of the options here
// Returns:
// contextMenu object
create: function(menu,opts) { },
// Create the iframe object to show behind the menu.
// Arguments: none
// Returns: iframe object
createIframe: function() { } ,
// Accept an Array representing a menu structure and turn it into HTML
// Arguments:
// menu: The Array of options
// cmenu: The contextMenu object
// Returns:
// DOM object containing the html for the menu
createMenu: function(menu,cmenu) { },
// Create the DOM object for an individual option, called by createMenu
// Arguments:
// label: The text to display
// obj: Either a Function or an Object
// Function - runs when the option is clicked
// Object - an Option structure as described in Menu Array Structure
// Returns:
// DOM object containing html for a single option
createMenuItem: function(label,obj) { },
// 创建一个分割线行
// Arguments: none
// Returns:
// DOM object containing html for the separator
createSeparator: function() { },
// Determine if an individual item is currently disabled. This is called each
// time the item is hovered or clicked because the disabled status may change
// at any time. You can override this function with app-specific functionality
// to determine which options should be disabled based on business rules.
// Arguments:
// item: DOM object of the Option being checked
// Returns:
// boolean
isItemDisabled: function(item) { },
// 鼠标移入移出调用
// no return value
// Arguments:
// className: The hover class to apply or remove
// Returns:
// none
hoverItem: function(className) { },
hoverItemOut: function(className) { },
// 在菜单后面创建用来显示阴影的DOM元素
// Arguments:
// cmenu: contextMenu object
// Returns:
// DOM object containing html for the shadow
createShadow: function(cmenu) { },
// Display the shadow object, given the position of the menu itself.
// Arguments:
// x: The x (left) position of the menu
// y: The y (top) position of the menu
// e: The event that triggered the context menu
// Returns:
// none
showShadow: function(x,y,e) { },
// A hook to call before the menu is shown, in case special processing needs
// to be done. Using this you can modify the menu contents, etc on the fly.
// Arguments:
// none
// Returns:
// boolean: false to cancel the default show operation, true to work as normal
beforeShow: function() { return true; },
// 使用指定的过渡方式使菜单可见
// Arguments:
// target: The object that originally caught the contextmenu event
// e: The original event
// Returns:
// none
show: function(target,e) { },
// 得到菜单应该显示的位置,给出右击事件的x, y
// Arguments:
// clickX: The x (left) position of the click event
// clickY: The y (top) position of the click event
// cmenu: The contextMenu object
// e: The original event
// Returns:
// 指定菜单显示的位置 {'x':x,'y':y}
getPosition: function(clickX,clickY,cmenu,e) { },
// 隐藏菜单
// Arguments:
// none
// Returns:
// none
hide: function() { }
}
设置默认参数:
// 关闭所有菜单的阴影
$.contextMenu.shadow = false;
// 设置所有菜单的主题为'xp'
$.contextMenu.theme = 'xp';
转自:http://hi.baidu.com/%CE%D2%BA%DC%B0%AE%D5%C5%B2%AE%C2%D7/blog/item/061bc251abf8a24b1138c2e3.html
- 几款jQuery右键菜单插件介绍
- 几款jQuery右键菜单插件介绍
- jquery 右键菜单 插件
- jQuery右键菜单插件 jQuery ContextMenu
- Jquery右键菜单插件(RightMenu)修正
- jQuery右键菜单contextMenu插件使用实例
- Web右键菜单jquery插件smartMenu
- Jquery的右键菜单插件ContextMenu
- Jquery的右键菜单插件ContextMenu
- JSP----jQuery插件ContextMenu生成右键菜单
- 【jQuery】右键菜单插件——contextmenu
- 【JQuery】右键菜单插件——contextmenu
- JSP----jQuery插件ContextMenu生成右键菜单
- JSP----jQuery插件ContextMenu生成右键菜单
- 【jQuery】smartMenu右键自定义上下文菜单插件
- JQuery右键菜单插件ContextMenu使用指南
- jquery - 菜单插件(右键菜单,左键菜单)
- jquery超强插件-颜色获取,右键菜单,图片展示
- Linux系统--查看系统版本
- IOS 5支持的字体
- QT编程前期准备
- linux下共享内存的实现
- JAVA大数四则运算
- 几款jQuery右键菜单插件介绍
- 处理图片
- 正则表达式的多行模式与单行模式
- Linux系统--查看磁盘空间
- make: powerpc-e300c3-linux-gnu-g++:命令未找到
- Linux系统--查看内存
- 程序员在上海(1)
- window manager 参数
- AMD公司的灵魂Athlon产品回忆录