简简单单右键菜单-闲情偶寄-iteye技术网站

简简单单右键菜单-闲情偶寄-iteye技术网站
2011年03月21日
　　今天是给大家介绍一款在网页上使用的右键菜单，原作者的网址是：http://51jsr.iteye.com/blog/305517
　　这个右键菜单已经非常优秀，不过呢。却是IE Only，而且在DTD模式下
　　
　　连IE显示都是有问题的，所以呢只有自己动手了，另外就顺便改造成jQuery控件，顺便分析一下代码。
　　首先来看一下效果吧
　　
　　↑这是控件的效果
　　
　　←Windows Se7en 系统的邮件菜单
　　插一句吧，其实我最终的目标是提供一个ASP.NET MVC 框架前台UI Controls解决方案，因为后面的控件会用到这个右键菜单所以就讲一下。
　　首先还是来分析一下HTML吧
　　1：一级菜单（每一组菜单）即是一个独立的div容器
　　2：每一项又是div，嵌套一个nobr（可用div代替不过要额外写个class）的标签，里面是图标和span包裹的位置内容
　　
　　菜单项/菜单组
　　
　　分割线
　　这里一个要注意的地方就是多级菜单其实在HTMl结构是分离的，只是通过显示的位置在视觉上给人连载一起（另外就是箭头图标了）
　　第二接着是CSS了（是修改过的）
　　CSS非常简单,因为HTML结构本身也不复杂 .b-m-mpanel { background: #F0F0F0 url(images/contextmenu/menu_bg.gif) left repeat-y; border: 1px solid #718BB7; padding: 2px 0; position: absolute; z-index: 99997; } .b-m-split { height: 6px; background: url(images/contextmenu/m_splitLine.gif) center repeat-x; font-size: 0px; margin: 0 2px; } .b-m-item, .b-m-idisable { padding: 4px 2px; margin: 0 2px 0 3px; cursor: normal; line-height:100%; } .b-m-idisable { color:#808080; } .b-m-ibody, .b-m-arrow { overflow: hidden; text-overflow: ellipsis; } .b-m-arrow { background: url(images/contextmenu/m_arrow.gif) right no-repeat; } .b-m-idisable .b-m-arrow { background:none; } .b-m-item img, .b-m-ifocus img, .b-m-idisable img { margin-right: 8px; } .b-m-ifocus { background: url(images/contextmenu/m_item.gif) repeat-x bottom; border: 1px solid #AACCF6; padding: 3px 1px ; margin: 0 2px 0 3px; cursor: normal; line-height:100%; } .b-m-idisable img { visibility:hidden; }
　　CSS中会用到的所有图片注意有四张图片哦。。
　　第三来看javascript了
　　先来看个完整的吧 ;(function($) { function returnfalse() { return false; }; $.fn.contextmenu = function(option) { option = $.extend({ alias: "cmroot", width: 150 }, option); var ruleName = null, target = null, groups = {}, mitems = {}, actions = {}, showGroups = [], itemTpl = "$[text]"; var gTemplet = $("").addClass("b-m-mpanel").attr("unselectabl e", "on").css("display", "none"); var iTemplet = $("").addClass("b-m-item").attr("unselectable" , "on"); var sTemplet = $("").addClass("b-m-split"); //创建菜单组 var buildGroup = function(obj) { groups[obj.alias] = this; this.gidx = obj.alias; this.id = obj.alias; if (obj.disable) { this.disable = obj.disable; this.className = "b-m-idisable"; } $(this).width(obj.width).click(returnfalse).moused own(returnfalse).appendTo($("body")); obj = null; return this; }; var buildItem = function(obj) { var T = this; T.title = obj.text; T.idx = obj.alias; T.gidx = obj.gidx; T.data = obj; T.innerHTML = itemTpl.replace(/\$\[([^\]]+)\]/g, function() { return obj[arguments[1]]; }); if (obj.disable) { T.disable = obj.disable; T.className = "b-m-idisable"; } obj.items && (T.group = true); obj.action && (actions[obj.alias] = obj.action); mitems[obj.alias] = T; T = obj = null; return this; }; //添加菜单项 var addItems = function(gidx, items) { var tmp = null; for (var i = 0; i bwidth) ? (pos.left - mwidth bheight) ? (pos.top - mheight + (width > 0 ? 25 : 0) 0 ? 25 : 0)) : pos.top; $(this).css(pos).show(); showGroups.push(this.gidx); }; //隐藏菜单组 var hideMenuPane = function() { var alias = null; for (var i = showGroups.length - 1; i >= 0; i--) { if (showGroups[i] == this.gidx) break; alias = showGroups.pop(); groups[alias].style.display = "none"; mitems[alias] && (mitems[alias].className = "b-m-item"); } //Endfor //CollectGarbage(); }; function applyRule(rule) { if (ruleName && ruleName == rule.name) return false; for (var i in mitems) disable(i, !rule.disable); for (var i = 0; i {text:String, icon:String, type:String, alias:String, width:Number, items:Array} -- 菜单组 -> {text:String, icon:String, type:String, alias:String, action:Function } -- 菜单项 -> {type:String} --分割线*/
　　详细描述下：
　　items:Array 右键菜单的内容定义，数组的元素格式如下所示：
　　{text: String, icon: String, alias: String, type: "group"|"item"|"splitLine", width:int, items:Array,action:Funtion}
　　其中：
　　text:String 菜单项的文字说明。
　　icon: String 图标的Src地址，如果没有图标，如果item不需要图标,请设置成none.gif(在images/icons/中可以找到)。
　　alias:String 唯一标识菜单项。
　　type:"group"|"item"|"splitLine" 分别为组，项，分割线，当选择是"splitLine"则其他设置项无需设置。
　　width:int 当且仅当type="group"时有效，设置新组容器的宽度。
　　items:Array 子元素可无限层次。
　　action:Function 当菜单项被点击时被使用
　　alias: String (可选参数)唯一标识，当页面上只有一种右键菜单时可以省略
　　width : Number (可选参数) 右键菜单根的宽度, 默认值：150px。
　　onContextMenu: Function (可选参数) 当右键菜单触发时预先调用的函数，返回参数为Boolean指示是否显示菜单
　　onShow: Function (可选参数) 当菜单显示时触发，一般在该函数中应用规则
　　rule : Json (可选参数) 默认规则，设置哪些项默认为禁用，格式如下所示 { name:String, disable: Boolean, items:Array}
　　name:String 规则名称 disable:Boolean 规则是禁用还是启用 items:Array 需要应用规则的item alias的集合
　　有点复杂哈，如果还有不明白看示例哈。
　　定义一堆临时变量，还有4个模板临时变量 var ruleName = null, target = null, groups = {}, mitems = {}, actions = {}, showGroups = [], //定义内部的临时变量。用到的地方再来分析 //一个菜单项的模板哦 ,容器和项，分割线的模板 itemTpl = "$[text]"; var gTemplet = $("").addClass("b-m-mpanel").attr("unselectabl e", "on").css("display", "none"); var iTemplet = $("").addClass("b-m-item").attr("unselectable" , "on"); var sTemplet = $("").addClass("b-m-split");
　　接着我们要跳过一些函数的定义，直接来看创建HTML的部分 //获取菜单的跟 var $root = $("#" + option.alias); var root = null; if ($root.length == 0) { //如果顶级不存在，这创建顶级菜单哦 root = buildGroup.apply(gTemplet.clone()[0], [option]); root.applyrule = applyRule; //把一个方法注册到dom上 root.showMenu = showMenu; //另外一个方法注册的该dom上 addItems(option.alias, option.items); //添加菜单项 } else { root = $root[0]; //否则就用这个了 } 这个代码很玄乎，好像做了些什么好像有什么都没做，其实只有来看下buildGroup方法和addItems才知道到底干了什么 var buildGroup = function(obj) { //创建菜单容器 groups[obj.alias] = this; //菜单项注册到临时变量中 this.gidx = obj.alias; this.id = obj.alias; if (obj.disable) { //如果是禁用状态 this.disable = obj.disable; this.className = "b-m-idisable"; } //设置菜单宽度，设置事件的阻止事件冒泡，并添加到body中 $(this).width(obj.width).click(returnfalse).moused own(returnfalse).appendTo($("body")); obj = null; return this; //返回菜单本身 };
　　有了容器就可以往里面添加菜单项了，我在代码中加了详细的注释了，应该可以很好的理解了 //添加菜单项 var addItems = function(gidx, items) { var tmp = null; for (var i = 0; i
　　

简简单单右键菜单-闲情偶寄-iteye技术网站相关推荐

Oracle Golden Gate体系架构详解(原创) - CzmMiao的博客生活 - ITeye技术网站
Oracle Golden Gate体系架构详解(原创) - CzmMiao的博客生活 - ITeye技术网站
将要看的两本书 - Hide From All - ITeye技术网站
将要看的两本书 - Hide From All - ITeye技术网站将要看的两本书博客分类:Theory - Data Structure & Algorithm 算法CC++C#数据结 ...
字符编码原理 ASCII，Unicode和UTF-8 - - ITeye技术网站
字符编码原理 ASCII,Unicode和UTF-8 - - ITeye技术网站字符编码原理 ASCII,Unicode和UTF-8 博客分类:coder加密与解密编码utf-8unicode原理 ...
【强烈推荐】如何解决JQuery类Post方式的跨域问题 - 空山雪林通用模块设计工作室 - ITeye技术网站...
[强烈推荐]如何解决JQuery类Post方式的跨域问题 - 空山雪林通用模块设计工作室 - ITeye技术网站 [强烈推荐]如何解决JQuery类Post方式的跨域问题博客分类:核心代码片段 jQ ...
常见英文缩写小节-江晚正愁余-iteye技术网站
常见英文缩写小节-江晚正愁余-iteye技术网站 2011年03月01日 1.消息交换模式(Message Exchange Patterns,MEP) 2.WSDL(网络服务描述语言,Web Ser ...
打破思维断层之KMP分析 - wsc - ITeye技术网站
打破思维断层之KMP分析 - wsc - ITeye技术网站打破思维断层之KMP分析 - wsc - ITeye技术网站打破思维断层之KMP分析博客分类:算法分析 kmp算法思维断层 KMP ...
ums网管应用unix系统的常用操作 (五)--iteye技术网站
ums网管应用unix系统的常用操作 (五)--iteye技术网站 2011年04月01日 10, 设置sybase最大连接数为1024,需要预先做好以下设置 a, 在/etc/system文件末尾添 ...
test an interface(测试接口)-博学之,审问之,慎思之,明辨之,笃行之-iteye技术网站
test an interface(测试接口)-博学之,审问之,慎思之,明辨之,笃行之-iteye技术网站 2011年09月01日问题: 你是否想过怎么测试接口,但是又苦于接口没有办法初始化.或者你 ...
[7] 编写Python脚本将Hive的运算结果保存到MySQL数据库中(1) - 摩西莫西 - ITeye技术网站...
[7] 编写Python脚本将Hive的运算结果保存到MySQL数据库中(1) - 摩西莫西 - ITeye技术网站 [7] 编写Python脚本将Hive的运算结果保存到MySQL数据库中(1) - ...

简简单单右键菜单-闲情偶寄-iteye技术网站

简简单单右键菜单-闲情偶寄-iteye技术网站相关推荐

最新文章

热门文章