[smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词、子句、段落的时候可以进行扩展操作。
右键菜单栏有很多基于jQuery的插件,其中灵活性比较强、易用、可扩展的一个是smartMenu.js(github有不少重名库,本插件来自:www.zhangxinxu.com)
用法:
$(document.getElementById(id).contentWindow.document.body).find('.word').smartMenu(data,{
offsetX:,
offsetY:,
textLimit:,
});
其中document.getElementById(id).contentWindow.document.body是jquery的选择器部分,将搜索范围限制在阅读器iframe窗体中查找元素。
smartMenu是该插件的方法,用来为jQuery对象添加右键菜单栏,其中data参数是由菜单项组成的数组,第二个json参数是配置选项,其API如下:
| 参数名 | 默认值 | 相关说明 |
|---|---|---|
| name | "" | 字符串。上下文菜单的名称,用以区分不同的上下文菜单。如果页面只有一个上下文菜单,此参数可缺省;如果是多个菜单,此参数必须,否则菜单会出现冲突。 |
| offsetX | 2 | 数值。上下文菜单左上角距离鼠标水平偏移距离。 |
| offsetY | 2 | 数值。上下文菜单左上角距离鼠标垂直偏移距离。 |
| textLimit | 6 | 数值。上下文菜单项限制显示的文字个数。如果超出会截取,并以…补全,完成文字以title形式显示。 |
| beforeShow | $.noop | 函数。菜单即将显示之前执行的回调函数。$.noop为jQuery 1.4+版本支持,所以,如果你想让插件向下兼容,可设置将插件js中所有的$.noop替换成function() {} |
| afterShow | $.noop | 函数。菜单显示后执行的回调函数。 |
offsetX和offsetY如果不设置,则右键单击元素后,菜单栏在鼠标左上角较远处弹出,设置为120的效果如下:

还可以使用beforeShow和afterShow函数进行更复杂的操作。
[smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件的更多相关文章
- 一个基于jQuery的移动端条件选择查询插件(原创)
下载插件 目前给出的下载是混淆了后的代码 愿意一起探讨的可以找我要源码 使用方式: var ConditionsChoose = $("#Screening").Condition ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- 基于jQuery的图片相册滑出放大插件
今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...
- js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细)
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
- 基于jQuery功能非常强大的图片裁剪插件
今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
随机推荐
- 【转】RAM 大全-DRAM, SRAM, SDRAM的关系与区别
http://blog.csdn.net/huleide/article/details/5506698 ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是R ...
- LArea插件的使用
楼主菜鸟一枚,开发微信端三级滑动遇到的N多技术问题,与大家分享,话不多说,先上效果图: LArea插件的使用,前端部分参考如下: 关于PHP插件使用,请往下看: 1.首先在前端页面引入js样式和插 ...
- Servlet 笔记-Cookie 处理
Cookie 是存储在客户端计算机上的文本文件,并保留了各种跟踪信息. 识别返回用户包括三个步骤: 服务器脚本向浏览器发送一组 Cookie.例如:姓名.年龄或识别号码等. 浏览器将这些信息存储在本地 ...
- Markdown不常见功能
推荐几个Markdown不常见功能 1.表情符号 emoji表情使用:EMOJICODE:的格式,详细列表可见 https://www.webpagefx.com/tools/emoji-cheat- ...
- 在Javaava中stringBuilder的用法
String对象是不可改变的.每次使用 System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与创建新的 ...
- 使用缓存Memcache存储access_token
接上篇文本,千辛万苦终于拿到了access_token. 正常情况下access_token有效期为7200秒,重复获取将导致上次获取的access_token失效.目前,获取access_token ...
- 读书笔记-你不知道的JS上-this
关于this 与静态词法作用域不用,this的指向动态绑定,在函数执行期间才能确定.感觉有点像C++的多态? var a = 1; var obj = { a: 2, fn: function() { ...
- 基于Vue.js的大型报告页项目实现过程及问题总结(一)
今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有考虑报告的模块化区分,九月底产品提出新的 ...
- Winsock网络编程笔记(1)----入门
今天第一次接触winsock网络编程,看的资料是Windows网络编程第二版.通过博客记住自己的看书笔记.. 在这里贴出第一个程序,虽然程序什么都没做,但以此作为入门,熟悉其网络编程风格.. #inc ...
- CSS实现自适应不同大小屏幕的背景大图
在网上搜了好多demo:可总有这样那样的一些小瑕疵,试过几次后发现这样效果是最好的 html: <div class='bg'> <img src="image/bk02. ...