Context.js 右键菜单
2024-09-23 05:56:25
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]);
- }
- }
复制
参数详解
Paramater | Type | Default | Description |
---|---|---|---|
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});
复制
Paramater | Type | Default | Description |
---|---|---|---|
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]);
复制
Paramater | Type | Default | Description |
---|---|---|---|
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');
复制
Paramater | Type | Default | Description |
---|---|---|---|
selector | string | null | The jQuery (or css) selector of the element you want to remove the context menu from |
最新文章
- 你可能没注意的CSS单位
- select、poll、epoll之间的区别总结[整理]
- Oracle 建立索引及SQL优化
- phalcon: update修改数据却变成了insert插入数据
- [转]为什么不能用memcached存储Session
- C#与数据库访问技术总结(十二)数据阅读器(DataReader)2
- iOS开发-xCode代码格式化xAlign
- C#通过RFC调用SAP
- Enterprise Library系列文章目录(转载)
- 在虚拟机上安装红帽Linux.5.5.for.x86.服务器版系统(按针对安装oracle 10g作的配置)
- sysfs实例
- c#发送http请求注意
- 优化UI控件 【译】
- JS封装运动框架(另一种写法)
- 数据分析之Pandas和Numpy学习笔记(持续更新)<;1>;
- Android Gradle 学习笔记(一):Gradle 入门
- 关于leal和mov
- 用Eclipse上传项目到github
- 完整的Django入门指南学习笔记5
- BZOJ4053 : [Cerc2013]Subway