ContextJS is a lightweight solution for contextual menus. Currently, there are two versions.
The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it's base styles.
Features
- Linted: Valid JS
- Can be used with or without Twitters Bootstrap.css
- Event Based Links
- Anchor Links
- Headers
- Dividers
- Recursive Menus (infinite depth)
- Vertical Space Detection (turns into a "dropup")
- Horizontal Space Detection (Drops to the left instead of right)
- Add/Delete menus Dynamically
在线实例
实例演示
使用方法
- context.init({
- fadeSpeed: 100,
- filter: function ($obj){},
- above: 'auto',
- preventDoubleContext: true,
- compress: false
- });
复制
Headers
- {
- header: 'My Header Title'
- }
复制
Anchor Links
- {
- text: 'My Link Title',
- href: 'http://contextjs.com/',
- target: '_blank'
- }
复制
Dividers
- {
- divider: true
- }
复制
Event Based Actions
- {
- text: 'Event Based Link',
- action: function(e){
- e.preventDefault();
- alert('Do Something');
- }
- }
复制
Sub-Menus
- {
- text: 'My Sub-menu',
- subMenu: [menuObjects]
- }
复制
Tracking Links with Google Analytics
- {
- text: 'context.js',
- href: 'http://contextjs.com/context.js',
- target:'_blank',
- action: function(e){
- _gaq.push(['_trackEvent', 'ContextJS Download', this.pathname, this.innerHTML]);
- }
- }
复制
参数详解
fadeSpeed | int | 100 | The speed in which the context menu fades in (in milliseconds) |
filter | function | null | Function that each finished list element will pass through for extra modification. |
above | string || boolean | 'auto' | If set to 'auto', menu will appear as a "dropup" if there is not enough room below it. Settings to true will make the menu a "popup" by default. |
preventDoubleContext | boolean | true | If set to true, browser-based context menus will not work on contextjs menus. |
compress | boolean | false | If set to true, context menus will have less padding, making them (hopefully) more unobtrusive |
Updating Settings
- context.settings({initSettings});
复制
settings | object | null | The init settings can be placed in here to update context menus written to the DOM. Changing settings between attaching menus will give the menus their own options. |
Attaching
- context.attach('#download', [menuObjects]);
复制
selector | string | null | The jQuery (or css) selector of the element you want to apply the context menu to |
menuObjects | array | null | An array of objects that define the menus structure |
Destroying
- context.destroy('#download');
复制
selector | string | null | The jQuery (or css) selector of the element you want to remove the context menu from |
相关推荐
右键菜单插件context.js
《jQuery右键菜单插件context.js的深度解析与应用》 在前端开发中,交互体验是提升用户体验的关键一环,而右键菜单作为常见的交互元素,能够为用户提供便捷的操作选项。jQuery作为一个轻量级的JavaScript库,其丰富...
综上所述,"基于ASP.NET+C#开发的TreeView控件自定义Context Menu 右键菜单程序代码"是一个结合了前端和后端技术的项目,通过JavaScript、C#和HTML/CSS实现了自定义的右键菜单功能,增强了TreeView控件的交互性。...
**jQuery右键菜单插件ContextJS详解** 在网页开发中,右键菜单通常是增强用户体验的一种常见功能,它能提供快捷的操作选项。`ContextJS`是一个专门为jQuery设计的右键菜单插件,允许开发者轻松地为网页元素添加...
综上所述,`class2context`是一款强大且易于集成的JavaScript右键上下文菜单插件,能够帮助开发者快速构建具有定制化右键功能的网页应用。通过合理的配置和扩展,它可以满足各种复杂场景的需求,提升用户在网页交互...
标题“echarts右键菜单实例 --- 不修改源码”表明我们将探讨如何在ECharts图表上添加右键菜单,而无需直接修改ECharts的源代码。这意味着我们将通过ECharts的API和事件监听来实现这一功能,这是一个常见的最佳实践,...
在IT行业中,右键菜单是一种常见的用户交互元素,它为用户提供了一种快捷的方式来访问与当前选定元素相关的操作或功能。本项目"右键菜单 jQuery 易于修改"专注于利用jQuery库来实现一个可定制化的右键菜单系统。下面...
例如,`vue-context-menu`是一个方便的Vue插件,允许你更简单地创建和管理右键菜单。安装它: ```bash npm install vue-contextmenu --save ``` 然后在你的应用中引入并使用它: ```javascript import ...
因此,我们的第一步是在客户端(浏览器)使用JavaScript或jQuery来捕获这个事件,然后防止默认的浏览器右键菜单出现。 ```javascript document.addEventListener('contextmenu', function(event) { event....
在这个项目中,我们讨论的是一个Vue 2.0的右键菜单组件,允许开发者自定义菜单内容,从而更好地满足各种应用场景的需求。 首先,右键菜单是一种常见的交互元素,通常用于提供用户在特定上下文中的操作选项。在Web...
在本主题中,我们将探讨如何使用JavaScript来模仿Windows XP操作系统中的鼠标右键菜单功能。 在Windows XP中,当你点击鼠标右键时,会出现一个上下文菜单,提供与当前操作相关的选项。在网页上实现类似的功能,可以...
jQuery右键菜单插件context js是一款轻量级的网页右键菜单插件context js。
在计算机用户界面设计中,右键菜单(通常称为ContextMenu)是一种常见的交互元素,它为用户提供了一种快捷方式来访问特定的操作或功能。本教程将详细讲解三种不同的ContextMenu实现方法,帮助开发者更好地理解和应用...
在Web开发中,为了提供更丰富的用户体验,开发者经常需要自定义这样的右键菜单,这通常涉及到JavaScript和jQuery的使用。 首先,HTML本身并不直接支持自定义右键菜单,因为它的标准事件处理并不包含对鼠标右键点击...
总的来说,jQuery右键菜单插件context.js是一个实用的工具,通过它,开发者可以轻松地在网页上实现自定义的右键菜单功能,提高用户交互的便捷性和网站的专业性。理解并掌握这个插件的使用方法,对于提升网页应用的...
"JavaScript Context Menu Control" 是一个专为此目的设计的库,它允许开发者轻松地创建功能强大的右键菜单,且能与任何服务器端或客户端控件无缝集成。 在网页开发中,右键菜单通常用于提供与特定元素相关的特殊...
**纯JavaScript右键上下文菜单插件:class2context** 在网页开发中,右键上下文菜单通常是增强用户交互体验的重要元素。class2context插件就是专为实现这一功能而设计的一款纯JavaScript解决方案,它无需依赖任何...
5. **context.js**:核心功能脚本,与右键菜单和划词搜索功能直接相关。 6. **manifest.json**:扩展的配置文件,定义了扩展的元数据(如名称、版本、权限等)以及它包含的所有组件。 7. **images**:包含扩展所需的...
在这个特定的案例中,"好看的javascript网页鼠标右键菜单"是利用JavaScript实现的一种增强用户界面的技巧。通常,网页上的鼠标右键点击事件会被浏览器默认的上下文菜单所捕获,但通过自定义JavaScript代码,我们可以...