[smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词、子句、段落的时候可以进行扩展操作。
右键菜单栏有很多基于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的实用的右键拓展菜单栏插件的更多相关文章
- 一个基于jQuery的移动端条件选择查询插件(原创)
下载插件 目前给出的下载是混淆了后的代码 愿意一起探讨的可以找我要源码 使用方式: var ConditionsChoose = $("#Screening").Condition ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- 基于jQuery的图片相册滑出放大插件
今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...
- js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细)
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
- 基于jQuery功能非常强大的图片裁剪插件
今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
随机推荐
- Numpy的小总结
1.Numpy是什么? numpy是Python的一个科学计算库,提供矩阵运算的功能. 1.1Numpy的导入 import numpy as np #一般都是用numpy的别名来进行操作 1.2Nu ...
- Spring源码情操陶冶-AOP之Advice通知类解析与使用
阅读本文请先稍微浏览下上篇文章Spring源码情操陶冶-AOP之ConfigBeanDefinitionParser解析器,本文则对aop模式的通知类作简单的分析 入口 根据前文讲解,我们知道通知类的 ...
- js正则验证特殊字符
js正则验证特殊字符 方案一 var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, regCn = /[·!#¥(--):: ...
- Java基础总结--数组
---数组的定义---组织存储一组数据1.存放相同类型数据的集合--就是一种容器本质上变量也是一种容器--区别就是只存储了一个数据的容器--面对容器,而不是分散的数据eg.买一盘鸡蛋--蛋托其实就是容 ...
- LeetCode 204. Count Primes (质数的个数)
Description: Count the number of prime numbers less than a non-negative number, n. 题目标签:Hash Table 题 ...
- Idea报错Check $M2_HOME environment variable and mvn script match.
-Dmaven.multiModuleProjectDirectory=$M2_HOME
- Java基础笔记7
OOP面向对象有三个特点 1.封装 封装的好处: 起到一定的保护作用 封装的是属性. java如何进行封装; 1.使用private关键字对象属性封装. 只能在本类中使用. 2.为每个属性提供方法 ...
- 径向基网络(RBF network)
来源:http://blog.csdn.net/zouxy09/article/details/13297881 1.径向基函数 径向基函数(Radical Basis Function,RBF)方法 ...
- 独热编码OneHotEncoder简介
在分类和聚类运算中我们经常计算两个个体之间的距离,对于连续的数字(Numric)这一点不成问题,但是对于名词性(Norminal)的类别,计算距离很难.即使将类别与数字对应,例如{'A','B','C ...
- linux学习(一)认识、安装Linux
一.什么是Linux linux是一种操作系统,我们用的android和ios就是分别是linux操作系统和类unix操作系统. linux也是我们经常说的服务器.我们看的网站,游戏,app背后都是服 ...