Context.js 右键菜单

2016-09-21 08:33
分类:编程  AJAX  
作者:285267128

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

在线实例

实例演示

使用方法

  1. context.init({
  2.     fadeSpeed: 100,
  3.     filter: function ($obj){},
  4.     above: 'auto',
  5.     preventDoubleContext: true,
  6.     compress: false
  7. });
复制

Headers

  1. {
  2. header: 'My Header Title'
  3. }
复制

Anchor Links

  1. {
  2. text: 'My Link Title', 
  3. href: 'http://contextjs.com/', 
  4. target: '_blank'
  5. }
复制

Dividers

  1. {
  2. divider: true
  3. }
复制

Event Based Actions

  1. {
  2. text: 'Event Based Link',
  3. action: function(e){
  4. e.preventDefault();
  5. alert('Do Something');
  6. }
  7. }
复制

Sub-Menus

  1. {
  2. text: 'My Sub-menu',
  3. subMenu: [menuObjects]
  4. }
复制

Tracking Links with Google Analytics

  1. {
  2. text: 'context.js', 
  3. href: 'http://contextjs.com/context.js', 
  4. target:'_blank', 
  5. action: function(e){
  6. _gaq.push(['_trackEvent', 'ContextJS Download', this.pathname, this.innerHTML]);
  7. }
  8. }
复制

参数详解

ParamaterTypeDefaultDescription
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

 

  1. context.settings({initSettings});
复制

 

ParamaterTypeDefaultDescription
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

 

  1. context.attach('#download', [menuObjects]);
复制

 

ParamaterTypeDefaultDescription
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

 

  1. context.destroy('#download');
复制

 

ParamaterTypeDefaultDescription
selector string null The jQuery (or css) selector of the element you want to remove the context menu from

 

好文要顶 收藏该文 我要举报
如果您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力!
上一篇:jquery 的几种写法和常见问题
下一篇:jQuery属性-addClass()方法

一起悦读网    Copyright © 2016    浙ICP备11048508号