- 浏览: 196631 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
yhxf_ie:
完全不懂..
Spring Profiles -
cocoa_cactus:
很有收获!之前一直不明白为什么要用beans标签,thanks ...
Spring Profiles -
edison87915:
悬空90 写道1.NIO&原I/O区别NIO和原来的I ...
NIO -
悬空90:
1.NIO&原I/O区别
NIO和原来的I/O最重要 ...
NIO -
mojianpo:
浏览器兼容没有考虑进去
基于JQuery改写的一个[可调列宽TABLE插件]
[menuContext首页:http://www.trendskitchens.co.nz/jquery/contextmenu/]
contextMenu的js文件学习:
/*
*!!!!!![$(x).contextMenu(id,options)---便于称呼先暂时称:对元素x的一次绑定(x可能是一个元素集合)]
* 元素x称为绑定元素
*给元素添加右键菜单[步骤]
*1.基本框架[如menu,shadow的div框架]仅初始化一次[第一次给元素绑定时-即页面中第一次执$(xx).contextMenu(id,options)时]
*2.右键菜单环境/状态-每次对一个元素绑定时初始化一次[如:menuStyle,itemStyle],
* 并将环境压入栈hash,且将环境信息在栈中的序号及绑定元素及事件对象绑定到绑定元素的contextmenu事件(右键)上
*/
//匿名函数定义+执行
(function($) {
//trigger事件源/绑定菜单的元素
//currentTarget??????
var menu, shadow, trigger, content, hash, currentTarget;
var defaults = {
menuStyle: {
listStyle: 'none',
padding: '1px',
margin: '0px',
backgroundColor: '#eee',
border: '1px solid #999',
width: '70px'
},
itemStyle: {
margin: '0px',
color: '#567',
display: 'block',
cursor: 'default',
padding: '3px',
border: '1px solid #ddd',
backgroundColor: 'transparent'
},
itemHoverStyle: {
border: '1px solid #0a246a',
backgroundColor: '#b6bdd2'
},
eventPosX: 'pageX',
eventPosY: 'pageY',
shadow : true,
onContextMenu: null,
//填充菜单内容完毕-显示菜单及阴影之前执行onShowMenu方法[相当于过滤器]
onShowMenu: null
};
//prototype原型-->实例方法
$.fn.contextMenu = function(id, options) {
if (!menu) { // Create singleton menu
menu = $('<div id="jqContextMenu"></div>')
.hide()
.css({position:'absolute', zIndex:'500'})
.appendTo('body')
.bind('click', function(e) {
e.stopPropagation();
});
}
if (!shadow) {
shadow = $('<div></div>')
.css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499})
.appendTo('body')
.hide();
}
hash = hash || [];
//压栈-意途-每次初始化-将右键菜单环境/状态压入栈中-立刻将"最新压入栈中的环境的序号"绑定到元素上
hash.push({
id : id,
//继承$.extend(dest,src,src,src)
menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}),
itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}),
itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}),
bindings: options.bindings || {},
shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow,
onContextMenu: options.onContextMenu || defaults.onContextMenu,
onShowMenu: options.onShowMenu || defaults.onShowMenu,
eventPosX: options.eventPosX || defaults.eventPosX,
eventPosY: options.eventPosY || defaults.eventPosY
});
var index = hash.length - 1;
//给绑定元素绑定contextmenu事件(右键)(绑定元素可以是元素集合)
$(this).bind('contextmenu', function(e) {
//alert(e.srcElement.innerHTML);//alert(e.srcElement);//事件源
// Check if onContextMenu() defined|||
//初始化时,options中onContextMenu方法的意途:有选择性的绑定右键菜单[可根据条件使onContextMenu方法返回false,以至于实现一部分绑定,而个别元素不绑定]
var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
if (bShowContext) display(index, this, e);
return false;
});
return this;
};
//trigger--即事件源[即被绑定菜单的元素?]
function display(index, trigger, e) {
//根据环境在栈中的序号index,取出对应的菜单环境
var cur = hash[index];
//根据id获取并复制(连事件一并复制)事先在页面上布置的菜单div,中的列表ul元素
content = $('#'+cur.id).find('ul:first').clone(true);
//给复制出来的菜单内容-添加菜单样式、条目样式及hover效果
content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(
function() {
$(this).css(cur.itemHoverStyle);
},
function(){
$(this).css(cur.itemStyle);
}
).find('img').css({verticalAlign:'middle',paddingRight:'4px'});
//menu变量-单例-即页面上只会同一时间只会出现一个右键菜单(事先布置的菜单填充到menu[id=jqContextMenu的div]中)
menu.html(content);
// if there's an onShowMenu, run it now -- must run after content has been added
// if you try to alter the content variable before the menu.html(), IE6 has issues
// updating the content
//[判断栈中菜单环境是否设置了onShowMenu方法-实质是初始化时在参数options中是否设置了onShowMenu]相当于过滤器
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
//each方法--此处没有第三个参数,且cur.bindings为对象[非数组],即此处循环处理的是cur.bingdings对象中的各成员/方法,
//因此function(id,func)中id即为cur.bindings对象的属性名/方法名,而func即为cur.bindings对象的属性值/方法定义
//很明显,初始化时,所设置的options中的bindings对象中存放的全是方法名以及方法定义
$.each(cur.bindings, function(id, func) {
//以menu为上下文,根据id搜寻元素[即给cur.bindings中指定的菜单项绑定事件],并绑定click事件
$('#'+id, menu).bind('click', function(e) {
hide();
//trigger为事件源,currentTarget???
func(trigger, currentTarget);
});
});
//menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show();
//设置菜单的坐标并显示菜单
menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).slideDown('fast');
//设置菜单的阴影坐标并显示
if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+4,top:e.pageY+4}).show();
//每执行一次display,即显示一次右键菜单,给document绑定一次click事件
$(document).one('click', hide);
}
function hide() {
//menu.hide();
menu.slideUp(200);
shadow.hide();
}
//Apply defaults
//为jQuery类增加全局/类变量?-----用途??????
$.contextMenu = {
defaults : function(userDefaults) {
$.each(userDefaults, function(i, val) {
if (typeof val == 'object' && defaults[i]) {
$.extend(defaults[i], val);
}
else defaults[i] = val;
});
}
};
})(jQuery);
//等于$(document).ready(function(){})
$(function() {
$('div.contextMenu').hide();
});
contextMenu的js文件学习:
/*
*!!!!!![$(x).contextMenu(id,options)---便于称呼先暂时称:对元素x的一次绑定(x可能是一个元素集合)]
* 元素x称为绑定元素
*给元素添加右键菜单[步骤]
*1.基本框架[如menu,shadow的div框架]仅初始化一次[第一次给元素绑定时-即页面中第一次执$(xx).contextMenu(id,options)时]
*2.右键菜单环境/状态-每次对一个元素绑定时初始化一次[如:menuStyle,itemStyle],
* 并将环境压入栈hash,且将环境信息在栈中的序号及绑定元素及事件对象绑定到绑定元素的contextmenu事件(右键)上
*/
//匿名函数定义+执行
(function($) {
//trigger事件源/绑定菜单的元素
//currentTarget??????
var menu, shadow, trigger, content, hash, currentTarget;
var defaults = {
menuStyle: {
listStyle: 'none',
padding: '1px',
margin: '0px',
backgroundColor: '#eee',
border: '1px solid #999',
width: '70px'
},
itemStyle: {
margin: '0px',
color: '#567',
display: 'block',
cursor: 'default',
padding: '3px',
border: '1px solid #ddd',
backgroundColor: 'transparent'
},
itemHoverStyle: {
border: '1px solid #0a246a',
backgroundColor: '#b6bdd2'
},
eventPosX: 'pageX',
eventPosY: 'pageY',
shadow : true,
onContextMenu: null,
//填充菜单内容完毕-显示菜单及阴影之前执行onShowMenu方法[相当于过滤器]
onShowMenu: null
};
//prototype原型-->实例方法
$.fn.contextMenu = function(id, options) {
if (!menu) { // Create singleton menu
menu = $('<div id="jqContextMenu"></div>')
.hide()
.css({position:'absolute', zIndex:'500'})
.appendTo('body')
.bind('click', function(e) {
e.stopPropagation();
});
}
if (!shadow) {
shadow = $('<div></div>')
.css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499})
.appendTo('body')
.hide();
}
hash = hash || [];
//压栈-意途-每次初始化-将右键菜单环境/状态压入栈中-立刻将"最新压入栈中的环境的序号"绑定到元素上
hash.push({
id : id,
//继承$.extend(dest,src,src,src)
menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}),
itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}),
itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}),
bindings: options.bindings || {},
shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow,
onContextMenu: options.onContextMenu || defaults.onContextMenu,
onShowMenu: options.onShowMenu || defaults.onShowMenu,
eventPosX: options.eventPosX || defaults.eventPosX,
eventPosY: options.eventPosY || defaults.eventPosY
});
var index = hash.length - 1;
//给绑定元素绑定contextmenu事件(右键)(绑定元素可以是元素集合)
$(this).bind('contextmenu', function(e) {
//alert(e.srcElement.innerHTML);//alert(e.srcElement);//事件源
// Check if onContextMenu() defined|||
//初始化时,options中onContextMenu方法的意途:有选择性的绑定右键菜单[可根据条件使onContextMenu方法返回false,以至于实现一部分绑定,而个别元素不绑定]
var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
if (bShowContext) display(index, this, e);
return false;
});
return this;
};
//trigger--即事件源[即被绑定菜单的元素?]
function display(index, trigger, e) {
//根据环境在栈中的序号index,取出对应的菜单环境
var cur = hash[index];
//根据id获取并复制(连事件一并复制)事先在页面上布置的菜单div,中的列表ul元素
content = $('#'+cur.id).find('ul:first').clone(true);
//给复制出来的菜单内容-添加菜单样式、条目样式及hover效果
content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(
function() {
$(this).css(cur.itemHoverStyle);
},
function(){
$(this).css(cur.itemStyle);
}
).find('img').css({verticalAlign:'middle',paddingRight:'4px'});
//menu变量-单例-即页面上只会同一时间只会出现一个右键菜单(事先布置的菜单填充到menu[id=jqContextMenu的div]中)
menu.html(content);
// if there's an onShowMenu, run it now -- must run after content has been added
// if you try to alter the content variable before the menu.html(), IE6 has issues
// updating the content
//[判断栈中菜单环境是否设置了onShowMenu方法-实质是初始化时在参数options中是否设置了onShowMenu]相当于过滤器
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
//each方法--此处没有第三个参数,且cur.bindings为对象[非数组],即此处循环处理的是cur.bingdings对象中的各成员/方法,
//因此function(id,func)中id即为cur.bindings对象的属性名/方法名,而func即为cur.bindings对象的属性值/方法定义
//很明显,初始化时,所设置的options中的bindings对象中存放的全是方法名以及方法定义
$.each(cur.bindings, function(id, func) {
//以menu为上下文,根据id搜寻元素[即给cur.bindings中指定的菜单项绑定事件],并绑定click事件
$('#'+id, menu).bind('click', function(e) {
hide();
//trigger为事件源,currentTarget???
func(trigger, currentTarget);
});
});
//menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show();
//设置菜单的坐标并显示菜单
menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).slideDown('fast');
//设置菜单的阴影坐标并显示
if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+4,top:e.pageY+4}).show();
//每执行一次display,即显示一次右键菜单,给document绑定一次click事件
$(document).one('click', hide);
}
function hide() {
//menu.hide();
menu.slideUp(200);
shadow.hide();
}
//Apply defaults
//为jQuery类增加全局/类变量?-----用途??????
$.contextMenu = {
defaults : function(userDefaults) {
$.each(userDefaults, function(i, val) {
if (typeof val == 'object' && defaults[i]) {
$.extend(defaults[i], val);
}
else defaults[i] = val;
});
}
};
})(jQuery);
//等于$(document).ready(function(){})
$(function() {
$('div.contextMenu').hide();
});
发表评论
-
IE6中PNG透明问题的修复 - 顺便发个 Kill IE 6 的页面
2013-10-21 21:37 49本文解决IE6 PNG图 ... -
Try to use one var statement per scope in JavaScript[转]
2013-03-09 00:37 1328[原文地址:http://www.cnblogs.com/ ... -
window.Onunload与window.onbeforeunload的区别[转]
2013-03-04 17:20 3317<原文地址:http://blog ... -
offsetTop、offsetLeft、offsetWidth、offsetHeight剖析[转]
2013-03-04 16:46 1733<原文地址:http://bl ... -
Jquery中的offset()和position()深入剖析[转]
2013-03-04 16:25 986<原文地址:http://blog.sina.com. ... -
HTML5 本地存储(转)
2013-03-02 23:56 935DOM Storage是在网络客户 ... -
iScroll4 pull to refresh 学习
2013-03-01 01:42 921少量代码及部分CSS3未作注释 改个jQuery版... ... -
JQUERY_尺寸(转)
2011-11-28 09:19 776<script type="text/java ... -
javascript_大致执行过程(转)
2011-11-11 16:46 817[转自:http://www.cnblogs.com/fool ... -
JQUERY_继承_extend(转)
2011-11-07 11:43 15617[转自:http://????] jQuery中的extend ... -
JQUERY_$.fn.xx和$.fn.extend.xx和$.extend.xx(转)
2011-11-07 09:54 312[转自???] $.fn是指jquery的命名空间,加上fn上 ... -
js闭包
2011-09-02 21:35 118一:什么是闭包 “官方 ... -
Javascript 中 null、NaN和undefined
2011-08-23 23:38 175转自:http://www.cnblogs.com/qiant ... -
javascript___NAN___NOT A NUMBER
2011-08-23 23:04 91NaN是一个值类型,同是也是一个数值.意思是Not A Num ... -
JS_静态对象/方法/属性
2011-08-17 00:44 364转自: http://www.cnblogs.com/ ... -
JavaScript 对象的属性和方法4种不同的类型
2011-08-17 00:28 806详细出处参考:http://www.jb51.net/arti ... -
JAVASCRIPT定义类(转)
2011-08-01 05:00 950JavaScript定义类的几种方 ... -
window.location.hash属性介绍(转)
2011-07-21 15:57 810原地址: http://www.cnblogs.co ...
相关推荐
JQuery之ContextMenu(右键菜单) JQuery之ContextMenu(右键菜单) JQuery之ContextMenu(右键菜单)
jquery.contextMenu V1.6.5
import Jquery_contextmenu from 'jquery-contextmenu' Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中...
Add Take Ownership context menu to folders.
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页: http://jquery.com/ ...
Flex右键菜单的详细说明,下载之后照着做即可实现
功能齐全的上下文菜单处理程序,可处理数千个元素。很实用的插件,在网页列表中可实现鼠标右键点击出现操作菜单,提高用户体验。
jquery magic contextmenu
jquery插件之右键菜单 很容易学会。 jquery插件之右键菜单 很容易学会。
JQuery右键菜单,jQuery contextMenu。官网资源,完整版。
NULL 博文链接:https://justcoding.iteye.com/blog/2110279
jQuery的ContextMenu插件使用起来非常简单(当前前提是看了我的上一篇微博,哈哈),但是想改菜单的图标,很多人又要懵圈了。因为ContextMenu插件只提供了有限的几个图标,如剪切、拷贝、删除等等。 修改图标的相关...
前端项目-jquery.ui-contextmenu,将jquery ui菜单小部件转换为contextmenu。
jquery contextmenu鼠标右键点击页面弹出菜单选项 jquery contextmenu鼠标右键点击页面弹出菜单选项
jQuery contextMenu插件和Polyfill $ .contextMenu是用于上下文菜单的管理工具(您猜对了)。 它是为可能显示上下文菜单的数百个元素的应用程序而设计的-因此初始化速度和内存使用都保持很小。 它还允许注册上下文...
基于SVG的开发,一个很好学习例子,希望对大家有帮助!
于是便找到了jQuery的ContextMenu插件。上官网看看Demo,真不错,正是我要的效果。源码下下来,却没有说明文档告诉我们该如何组装,可能写这插件的牛人们觉得步骤太简单,写出来都觉得丢人。可苦了我们这等愚昧之徒...