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

右键菜单栏有很多基于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函数进行更复杂的操作。

最新文章

  1. node(ActiveMq)
  2. 前段播放 流媒体(RTMP,RTSP,HLS)
  3. 使用C#反射中的MakeGenericType函数,来为泛型方法和泛型类指定(泛型的)类型
  4. 用php怎么改文件名
  5. Pyqt 打包资源文件
  6. [OpenCV] Install openCV in Qt Creator
  7. SQL Server中的uniqueidentifier类型
  8. 【Java】图片高质量缩放类
  9. Oracle11g数据库导入到oracle10g的解决方法
  10. Ioc及Bean容器(三)
  11. 第二十六课 典型问题分析(Bugfix)
  12. 2d旋转(css3实现过度效果和动画效果)
  13. Fatal error in launcher: Unable to create process using '"c:\python37\python3.exe" "C:\Python37\Scripts\pip3.exe" install opencv-python'
  14. ICPC 2018 南京网络赛 J Magical Girl Haze(多层图最短路)
  15. FPGA管脚分配文件保存方法
  16. Win7 x86内核调试与TP反调试的研究
  17. Spring AOP execution表达式
  18. 【BZOJ】1596: [Usaco2008 Jan]电话网络
  19. Linq to Objects for Java
  20. php图片压缩-高清晰度

热门文章

  1. mysql的并发处理机制_下篇
  2. 怎用不用工具创建一个javaWeb项目
  3. 日志管理之 Docker logs - 每天5分钟玩转 Docker 容器技术(87)
  4. Windows下mysql5.5主从同步
  5. 京东口红top 30分析
  6. 数据模型(LP32 ILP32 LP64 LLP64 ILP64 )
  7. 1026: [SCOI2009]windy数
  8. HDU 2665 Kth number(划分树)
  9. 理解Java包
  10. Linux系统安装_Centos6.9