简简单单右键菜单
2009-10-30 00:00:00 来源：WEB开发网CSS中会用到的所有图片 m_arrow m_item m_splitLine menu_bg 注意有四张图片哦。。
第三来看javascript了
先来看个完整的吧
001.;(function($) {
002. function returnfalse() { return false; };
003. $.fn.contextmenu = function(option) {
004. option = $.extend({ alias: "cmroot", width: 150 }, option);
005. var ruleName = null, target = null,
006. groups = {}, mitems = {}, actions = {}, showGroups = [],
007. itemTpl = "<div class='b-m-$[type]' unselectable=on><nobr unselectable=on><img src='$[icon]' align='absmiddle'/><span unselectable=on>$[text]</span></nobr></div>";
008. var gTemplet = $("<div/>").addClass("b-m-mpanel").attr("unselectable", "on").css("display", "none");
009. var iTemplet = $("<div/>").addClass("b-m-item").attr("unselectable", "on");
010. var sTemplet = $("<div/>").addClass("b-m-split");
011. //创建菜单组
012. var buildGroup = function(obj) {
013. groups[obj.alias] = this;
014. this.gidx = obj.alias;
015. this.id = obj.alias;
016. if (obj.disable) {
017. this.disable = obj.disable;
018. this.className = "b-m-idisable";
019. }
020. $(this).width(obj.width).click(returnfalse).mousedown(returnfalse).appendTo($("body"));
021. obj = null;
022. return this;
023. };
024. var buildItem = function(obj) {
025. var T = this;
026. T.title = obj.text;
027. T.idx = obj.alias;
028. T.gidx = obj.gidx;
029. T.data = obj;
030. T.innerHTML = itemTpl.replace(/\$\[([^\]]+)\]/g, function() {
031. return obj[arguments[1]];
032. });
033. if (obj.disable) {
034. T.disable = obj.disable;
035. T.className = "b-m-idisable";
036. }
037. obj.items && (T.group = true);
038. obj.action && (actions[obj.alias] = obj.action);
039. mitems[obj.alias] = T;
040. T = obj = null;
041. return this;
042. };
043. //添加菜单项
044. var addItems = function(gidx, items) {
045. var tmp = null;
046. for (var i = 0; i < items.length; i++) {
047. if (items[i].type == "splitLine") {
048. //菜单分隔线
049. tmp = sTemplet.clone()[0];
050. } else {
051. items[i].gidx = gidx;
052. if (items[i].type == "group") {
053. //菜单组
054. buildGroup.apply(gTemplet.clone()[0], [items[i]]);
055. arguments.callee(items[i].alias, items[i].items);
056. items[i].type = "arrow";
057. tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
058. } else {
059. //菜单项
060. items[i].type = "ibody";
061. tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
062. $(tmp).click(function(e) {
063. if (!this.disable) {
064. if ($.isFunction(actions[this.idx])) {
065. actions[this.idx].call(this, target);
066. }
067. hideMenuPane();
068. }
069. return false;
070. });
071.
072. } //Endif
073. $(tmp).bind("contextmenu", returnfalse).hover(overItem, outItem);
074. } //Endif
075. groups[gidx].appendChild(tmp);
076. tmp = items[i] = items[i].items = null;
077. } //Endfor
078. gidx = items = null;
079. };
080. var overItem = function(e) {
081. //如果菜单项不可用
082. if (this.disable)
083. return false;
084. hideMenuPane.call(groups[this.gidx]);
085. //如果是菜单组
086. if (this.group) {
087. var pos = $(this).offset();
088. var width = $(this).outerWidth();
089. showMenuGroup.apply(groups[this.idx], [pos, width]);
090. }
091. this.className = "b-m-ifocus";
092. return false;
093. };
094. //菜单项失去焦点
095. var outItem = function(e) {
096. //如果菜单项不可用
097. if (this.disable )
098. return false;
099. if (!this.group) {
100. //菜单项
101. this.className = "b-m-item";
102. } //Endif
103. return false;
104. };
105. //在指定位置显示指定的菜单组
106. var showMenuGroup = function(pos, width) {
107. var bwidth = $("body").width();
108. var bheight = document.documentElement.clientHeight;
109. var mwidth = $(this).outerWidth();
110. var mheight = $(this).outerHeight();
111. pos.left = (pos.left + width + mwidth > bwidth) ? (pos.left - mwidth < 0 ? 0 : pos.left - mwidth) : pos.left + width;
112. pos.top = (pos.top + mheight > bheight) ? (pos.top - mheight + (width > 0 ? 25 : 0) < 0 ? 0 : pos.top - mheight + (width > 0 ? 25 : 0)) : pos.top;
113. $(this).css(pos).show();
114. showGroups.push(this.gidx);
115. };
116. //隐藏菜单组
117. var hideMenuPane = function() {
118. var alias = null;
119. for (var i = showGroups.length - 1; i >= 0; i--) {
120. if (showGroups[i] == this.gidx)
121. break;
122. alias = showGroups.pop();
123. groups[alias].style.display = "none";
124. mitems[alias] && (mitems[alias].className = "b-m-item");
125. } //Endfor
126. //CollectGarbage();
127. };
128. function applyRule(rule) {
129. if (ruleName && ruleName == rule.name)
130. return false;
131. for (var i in mitems)
132. disable(i, !rule.disable);
133. for (var i = 0; i < rule.items.length; i++)
134. disable(rule.items[i], rule.disable);
135. ruleName = rule.name;
136. };
137. function disable(alias, disabled) {
138. var item = mitems[alias];
139. item.className = (item.disable = item.lastChild.disabled = disabled) ? "b-m-idisable" : "b-m-item";
140. };
141.
142. /** 右键菜单显示 */
143. function showMenu(e, menutarget) {
144. target = menutarget;
145. showMenuGroup.call(groups.cmroot, { left: e.pageX, top: e.pageY }, 0);
146. $(document).one('mousedown', hideMenuPane);
147. }
148. var $root = $("#" + option.alias);
149. var root = null;
150. if ($root.length == 0) {
151. root = buildGroup.apply(gTemplet.clone()[0], [option]);
152. root.applyrule = applyRule;
153. root.showMenu = showMenu;
154. addItems(option.alias, option.items);
155. }
156. else {
157. root = $root[0];
158. }
159. var me = $(this).each(function() {
160. return $(this).bind('contextmenu', function(e) {
161. var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true;
162. if (bShowContext) {
163. if (option.onShow && $.isFunction(option.onShow)) {
164. option.onShow.call(this, root);
165. }
166. root.showMenu(e, this);
167. }
168. return false;
169. });
170. });
171. //设置显示规则
172. if (option.rule) {
173. applyRule(option.rule);
174. }
175. gTemplet = iTemplet = sTemplet = itemTpl = buildGroup = buildItem = null;
176. addItems = overItem = outItem = null;
177. //CollectGarbage();
178. return me;
179. }
180.})(jQuery);
中查找“简简单单右键菜单”更多相关内容
中查找“简简单单右键菜单”更多相关内容更多精彩
赞助商链接
