[smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件

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

右键菜单栏有很多基于jQuery的插件,其中灵活性比较强、易用、可扩展的一个是smartMenu.js(github有不少重名库,本插件来自:www.zhangxinxu.com)

用法:

$(document.getElementById(id).contentWindow.document.body).find('.word').smartMenu(data,{
  offsetX:120,
  offsetY:120,
  textLimit:12,
});

其中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函数进行更复杂的操作。

 

posted @ 2017-11-22 13:59  肖兆琦  阅读(1900)  评论(0编辑  收藏  举报