[smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
2024-10-11 11:12:47
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词、子句、段落的时候可以进行扩展操作。
右键菜单栏有很多基于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函数进行更复杂的操作。
最新文章
- node(ActiveMq)
- 前段播放 流媒体(RTMP,RTSP,HLS)
- 使用C#反射中的MakeGenericType函数,来为泛型方法和泛型类指定(泛型的)类型
- 用php怎么改文件名
- Pyqt 打包资源文件
- [OpenCV] Install openCV in Qt Creator
- SQL Server中的uniqueidentifier类型
- 【Java】图片高质量缩放类
- Oracle11g数据库导入到oracle10g的解决方法
- Ioc及Bean容器(三)
- 第二十六课 典型问题分析(Bugfix)
- 2d旋转(css3实现过度效果和动画效果)
- Fatal error in launcher: Unable to create process using '";c:\python37\python3.exe"; ";C:\Python37\Scripts\pip3.exe"; install opencv-python'
- ICPC 2018 南京网络赛 J Magical Girl Haze(多层图最短路)
- FPGA管脚分配文件保存方法
- Win7 x86内核调试与TP反调试的研究
- Spring AOP execution表达式
- 【BZOJ】1596: [Usaco2008 Jan]电话网络
- Linq to Objects for Java
- php图片压缩-高清晰度