zoukankan      html  css  js  c++  java
  • [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函数进行更复杂的操作。

  • 相关阅读:
    js每天进步一点点
    优化数据库的方法及SQL语句优化的原则
    实用js代码大全
    【怒转】 idea快捷键说明大全(中英文对照)
    正则表达式手册
    Flink分布式缓存Distributed Cache
    初识Flink广播变量broadcast
    怒转一波,此人整理的Flink特别好
    flink批处理中的source以及sink介绍
    初识Flink-从WorldCount开始
  • 原文地址:https://www.cnblogs.com/xiaozhaoqi/p/7878857.html
Copyright © 2011-2022 走看看