- 浏览: 16466 次
最新评论
简简单单右键菜单-闲情偶寄-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
发表评论
-
Android 开发平台配置
2012-01-20 01:07 589Android 开发平台配置 2011年05月25日 1 ... -
vs2008安装boost库
2012-01-20 01:07 906vs2008安装boost库 2010年06月10日 首 ... -
NET安全系列之三:用户与角色的概念/基于角色的安全
2012-01-20 01:07 958NET安全系列之三:用户与角色的概念/基于角色的安全 201 ... -
如何将OpenXLive添加到WP7 Silverlight游戏中
2012-01-20 01:07 485如何将OpenXLive添加到WP7 Silverlight游 ... -
Ipmsg
2012-01-20 01:07 982Ipmsg 2010年12月22日 ipmsg全称:IP ... -
D200的库设置
2012-01-19 08:55 532D200的库设置 2010年07月2 ... -
关于malloc函数后free内存空间的疑问
2012-01-19 08:55 613关于malloc函数后free内存空间的疑问 2011年11 ... -
c库函数和系统调用的区别(很模糊)
2012-01-19 08:55 660c库函数和系统调用的区 ... -
系统调用、POSIX、C库、系统命令和内核函数
2012-01-19 08:55 935系统调用、POSIX、C库、 ... -
Pthread 与 Linux
2012-01-19 08:55 543Pthread 与 Linux 2010年10月 ... -
诺基亚5800操作
2012-01-17 01:26 577诺基亚5800操作 2011年06月30日 鉴于5800 ... -
ROOT【个人学习,慎用】
2012-01-17 01:26 466ROOT【个人学习,慎用】 ... -
Silverlight 5 3D前瞻
2012-01-17 01:25 563Silverlight 5 3D前瞻 2011年12月06日 ... -
Android
2012-01-17 01:25 522Android 2010年06月30日 经过近段时间的观 ... -
总体上说,是c++ builder胜于VC++,DELPHI是最好
2012-01-17 01:25 1002总体上说,是c++ builder胜 ... -
千年之魂,第一次写穿越小说,请大家多给建议
2012-01-15 20:07 532千年之魂,第一次写穿越小说,请大家多给建议 2011年02月 ... -
迷倒六个君主的女子
2012-01-15 20:07 515迷倒六个君主的女子 20 ... -
第五卷《鏖战雁门(下)》第47章《抉择》
2012-01-15 20:07 457第五卷《鏖战雁门(下) ... -
萧皇后
2012-01-15 20:07 765萧皇后 2010年11月28日 ... -
义城公主
2012-01-15 20:07 678义城公主 2009年12月06日 义城公主,父杨谐。 ...
相关推荐
2. ... 3. }] 1. { 4. }, 6. } 2. didReceiveRemoteNotification:(NSDictionary *)use
NULL 博文链接:https://long316.iteye.com/blog/1640930
里面是共用的js 博文链接:https://p-x1984.iteye.com/blog/215017
javaMD5加密及登录验证(备忘) - Hibernate - Java - ITeye论坛.mhtjavaMD5加密及登录验证(备忘) - Hibernate - Java - ITeye论坛.mhtjavaMD5加密及登录验证(备忘
java_web开发_高并发处理_-_-_ITeye技术网站.pdf
深入浅出CGlib-打造无入侵的类代理 - llying - ITeye技术网站
ice最简单实现 ruby调用ice接口 - Ruby - language - ITeye论坛
NULL 博文链接:https://mirabelle1211.iteye.com/blog/961255
NULL 博文链接:https://ruby-windy.iteye.com/blog/1214239
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/2216368
NULL 博文链接:https://wang-peng1.iteye.com/blog/683138
NULL 博文链接:https://xblia.iteye.com/blog/1720660
eclipse开发环境(支持tomcat、maven、jetty、JBoss) - - ITeye技术网站
Spring的JdbcTemplate插入操作返回主键ID的方法 - - ITeye技术网站
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。若作者同意转载,必须以超链接形式标明文章原始出处和作者。:copyright: 20032017 ITey
VMware-Horizon-Agent-x86_64-7.6.0-9539447