正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词、子句、段落的时候可以进行扩展操作。

右键菜单栏有很多基于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的实用的右键拓展菜单栏插件的更多相关文章

  1. 一个基于jQuery的移动端条件选择查询插件(原创)

    下载插件 目前给出的下载是混淆了后的代码 愿意一起探讨的可以找我要源码 使用方式: var ConditionsChoose = $("#Screening").Condition ...

  2. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  3. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  4. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  5. js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细)

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  6. 基于jQuery功能非常强大的图片裁剪插件

    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...

  7. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  8. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  9. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

随机推荐

  1. LeetCode Questions List (LeetCode 问题列表)- Java Solutions

    因为在开始写这个博客之前,已经刷了100题了,所以现在还是有很多题目没有加进来,为了方便查找哪些没加进来,先列一个表可以比较清楚的查看,也方便给大家查找.如果有哪些题目的链接有错误,请大家留言和谅解, ...

  2. 变量值a交换b,b交换a....

    package day01; public class Test1 { public static void main(String[] args) { //不利用其它变量时期A和B的值交换 Inte ...

  3. [Bayesian] “我是bayesian我怕谁”系列 - Variational Inference

    涉及的领域可能有些生僻,骗不了大家点赞.但毕竟是人工智能的主流技术,在园子却成了非主流. 不可否认的是:乃值钱的技术,提高身价的技术,改变世界观的技术. 关于变分,通常的课本思路是: GMM --&g ...

  4. 搭建yeoman自动化构建工具

    yeoman可以快速的搭建一个项目的手脚架,初次接触yeoman,在搭建的过程中遇到了很多的问题. yeoman需要node.js(http://nodejs.org)和git(http://git- ...

  5. code force 403B.B. The Meeting Place Cannot Be Changed

    B. The Meeting Place Cannot Be Changed time limit per test 5 seconds memory limit per test 256 megab ...

  6. JavaScript instanceof 运算符深入剖析【转载】

    http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/   instanceof 运算符简介 在 JavaScript ...

  7. Icon font font face

    font-face自定义字体,iconfont就是把各种图片做成字体.iconfont优势: 字体文件小,一般20-50kb: 容易编辑和维护,尺寸和颜色可以用css来控制: 透明完全兼容IE6:   ...

  8. WIN7+wampserver2.4+zend stadio10.6.1配置Xdebug

    一.前言 zend stadio调试很不方便,php5.3版本之前可使用zend debuger调试,php5.3以后就需要使用XDebug调试了.下面介绍我配置的经验,希望帮助更多的人 二.配置步骤 ...

  9. RE:考勤系统的复盘

     一大早看了 <美团旅行前端技术体系的思考与实践> 这篇文,恰巧又在昨天完成了一个项目.确实让我忍不住码篇总结,为自己做一个复盘. 历时两个月,考勤系统 这个项目总算能够称得上完成了.项目 ...

  10. 如何将FastReportOnlineDesign 灵活的应用到C/S B/S 程序当中?

    一.好久没有写博客了,主要是停在这里太久了,有些事情让自己尽量不在去想,忘记不了一段难以忘怀的记忆,就让这一段美好的记忆沉没在无锡的太湖中吧!不在去想了.难以忘怀..... 二.废话不多说了,不如正题 ...