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

右键菜单栏有很多基于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. admin的基础配置

    admin自定义配置 一.admin.py 我们知道在models.py文件中创建的数据表,一方面我们可以通过视图函数对其进行增删改查,一方面我们也可以通过admin进行,通常我们是通过admin的前 ...

  2. 案例:AWR手工创建快照失败,SYSAUX表空间剩余不足处理

    案例:AWR手工创建快照失败,SYSAUX表空间剩余不足处理 版本:Oracle 11.2.0.4 RAC 问题现象:AWR手工创建快照失败,SYSAUX表空间剩余不足. 1. 查看SYSAUX表空间 ...

  3. MVC-HtmlHelper简单总结

    Asp.Net MVC - Htmlhelper 总结 HtmlHelper是一个返回Html字符串的方法.返回的字符串可以是任意类型.例如你可以使用HtmlHelper方法返回一个标准的html标签 ...

  4. 【NOIP2015提高组】 Day1 T2 信息传递

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  5. C GOTO使用示例

    GOTO虽然会破坏程序的结构,使用代码可读性变差,但是GOTO依然还是有可用的地方 #include <stdio.h>#include <stdbool.h> int mai ...

  6. 使用EF操作Mysql数据库中文变问号的解决方案

    问题场景:使用Entity Framework 6.0 操作Mysql数据库,中文保存至数据库后全部变成问号.但是使用Mysql API却不会. 原因排查:首先想到的肯定是数据库编码问题,一次查询了表 ...

  7. Linux.SSH.修改SSH端口号

    Linux系统的默认SSH端口是22, 一般为发安全起见, 建议修改成其它端口 编辑配置文件: vi /etc/ssh/sshd_config 找到 #Port 22 把前面的#号去掉, 22修改成新 ...

  8. 解析 .Net Core 注入 (3) 创建对象

    回顾 通过前两节的学习,我们知道 IServiceCollection 以元数据(ServiceDescriptor)的形式存放着用户注册的服务,它的 IServiceCollection 的拓展方法 ...

  9. mysql 安装配置

    l  下载压缩包: 官网下载地址:https://dev.mysql.com/downloads/mysql/5.1.html#downloads 第一步: 将下载的压缩包解压到你要安装的目录下 第二 ...

  10. zabbix3.2源码搭建

    首先环境是标准的lnmp 1.创建zabbix组和系统用户来管理 groupadd zabbix useradd -g zabbix  zabbix -s /sbin/nologin 2.在mysql ...