Context.js 右键菜单
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 |
Context.js 右键菜单的更多相关文章
- js 右键菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础,单线程,跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js:使用 JavaScript 生成
ASP.NET Boilerplate 学习 1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...
- JS组件系列——Bootstrap右键菜单解决方案:ContextMenu
前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...
- js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现自定义右键菜单--兼容IE、Firefox、Chrome
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题
2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9.10.11小节,下载代码时请注意. 先废话几句.最近用到文档在线浏览功能,之前用的是print2flash(一个 ...
- js禁止页面复制 禁用页面右键菜单的代码
js实现禁止页面复制功能.禁用页面右键菜单等功能. <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...
- js禁止默认的右键菜单或出现自定义右键菜单
1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...
- 禁止页面复制功能 js禁止复制 禁用页面右键菜单
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
随机推荐
- Sqlserver分页的问题
好久没有用SqlServer了,今天写了一个分页,遇到了小问题,本着温故而知新的道理,再来随便写些什么吧. 语句是这样的 string sql=“select * from ( select*,(ro ...
- IO流-文件管理
File f = new File(“test.txt”); File的构造器不会在文件不存在的情况下新建一个文件,从File对象中创建文件是由文件流的构造器或File类的createNewFile方 ...
- Spring3 整合 Hibernate4实现数据库操作(1)
Hibernate知识学习:http://justsee.iteye.com/blog/1061576 注意Hibernate4在开发当中的一些改变 :http://snake-hand.iteye ...
- nodejs支持ssi实现include shtml页面
express 对于include的代码默认不处理,直接输出,没办法执行include的内容,但可以通过Nginx实现. 1. 配置nginx设置开启ssi模式. server { … ssi on; ...
- c#编码规范
1 规范目的 --------------------- 3 2 适用范围 --------------------- 3 3 代码注释 --------------------- 3 3.1 ...
- php基础教程-变量
变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问.在指令式语言中,变量通常是可变的:但在纯函数式语言(如Haskell)中,变量可能是不可变(immutable) ...
- Unity3D Player角色移动控制脚本
1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position.之前写过类似的文章,这次增加了平时常用API的脚本,每个脚本均手打测试可用. 2. ...
- apache解析多个域名
之前搭建了一个网站在这台服务器上,今天心血来潮准备搭建个word press 博客,准备使用二级域名 blog.xdlxb.cn 来解析. 只需要设置httpd.conf 文件就可以了 如下 开启重定 ...
- Sass细节一变量
同步发布在个人站 变量 局部变量和全局变量的定义 Sass的变量是用$申明的,有局部变量(选择器内部的变量)和全局变量(不在任何选择器内的变量).例如: //这里$width就是全局变量 $width ...
- log4net的配置详解
log4net是一款优秀的第三方日志框架,可以很容易的加载到开发项目中(引用log4net的dll,再配置些基本参数即可),帮助程序员把日志信息输出到各种不同的目标,常见的有文本.数据库.window ...