API Docs for: 1.10.1 最后更新日期：2016年03月28日
Google搜索   
Show:

File: lib/ui/LMenubar-0.1.0.js

  1. /** @language chinese
  2.  * <p>lufylegend.js专用UI，定义包含一个或多个菜单的顶级水平菜单栏</p>
  3.  * <p>使用时需要引进lufylegend.ui-x.x.x.js文件。</p>
  4.  * @class UI:LMenubar
  5.  * @constructor
  6.  * @extends LSprite
  7.  * @param {Array} list 菜单列表，列表的具体格式请看下面的使用举例。
  8.  * @param {Object} style [可选]菜单属性，包含textSize（文字大小），horizontalIndent（水平间隔），verticalIndent（垂直间隔），textColor（文字颜色），lineColor（分割线颜色），backgroundColor（菜单背景颜色），itemBackgroundColor（子菜单背景颜色），selectColor（菜单选中颜色）。
  9.  * @since 0.1.0
  10.  * @examplelink <p><a href="../../../api/ui/LMenubar.html" target="_blank">测试链接</a></p>
  11.  * @public
  12.  */
  13. var LMenubar = (function () {
  14. 	function LMenubar (list, style) {
  15. 		var s = this;
  16. 		LExtends(s, LSprite, []);
  17. 		s.type = "LMenubar";
  18. 		if (!style) {
  19. 			style = {};
  20. 		}
  21. 		if (!style.textSize) {
  22. 			style.textSize = 20;
  23. 		}
  24. 		if (!style.horizontalIndent) {
  25. 			style.horizontalIndent = 10;
  26. 		}
  27. 		if (!style.verticalIndent) {
  28. 			style.verticalIndent = 5;
  29. 		}
  30. 		if (!style.textColor) {
  31. 			style.textColor = "#000000";
  32. 		}
  33. 		if (!style.lineColor) {
  34. 			style.lineColor = "#CCCCCC";
  35. 		}
  36. 		if (!style.backgroundColor) {
  37. 			style.backgroundColor = "#FFFFFF";
  38. 		}
  39. 		if (!style.itemBackgroundColor) {
  40. 			style.itemBackgroundColor = style.backgroundColor;
  41. 		}
  42. 		if (!style.selectColor) {
  43. 			style.selectColor = "#1E90FF";
  44. 		}
  45. 		s.style = style;
  46. 		var back = new LSprite();
  47. 		back.graphics.drawRect(0, "#ffffff", [-LGlobal.width, -LGlobal.height, LGlobal.width * 2, LGlobal.height * 2]);
  48. 		s.addChild(back);
  49. 		s.back = back;
  50. 		s.back.root = s;
  51. 		s.back.mainMenu = true;
  52. 		s.back.background = true;
  53. 		s.back.addEventListener(LMouseEvent.MOUSE_UP, function (e) {});
  54. 		s.back.addEventListener(LMouseEvent.MOUSE_MOVE, function (e) {});
  55. 		s.back.addEventListener(LMouseEvent.MOUSE_DOWN, function (e) {
  56. 			var root = e.clickTarget.root;
  57. 			for (var j = 0; j < root.childList.length; j++) {
  58. 				if (root.childList[j].mainMenu) {
  59. 					if (root.childList[j].background) {
  60. 						continue;
  61. 					}
  62. 					var rW = root.childList[j].getWidth();
  63. 					var rH = root.childList[j].getHeight();
  64. 					root.childList[j].graphics.clear();
  65. 					root.childList[j].graphics.drawRect(0, root.style.lineColor, [0, 0, rW, rH], true, root.style.backgroundColor);
  66. 					continue;
  67. 				}
  68. 				root.childList[j].visible = false;
  69. 			}
  70. 			root.open = false;
  71. 			setTimeout(function () {
  72. 				root.back.visible = false;
  73. 				root.dispatchEvent(LMenubar.MENU_CLOSE);
  74. 			}, 100);
  75. 		});
  76. 		s.back.visible = false;
  77. 		s.setList(s, list, 0, 0, 0);
  78. 	}
  79. 	/** @language chinese
  80. 	 * 菜单栏关闭时调用此事件。
  81. 	 * @event LMenubar.MENU_CLOSE
  82. 	 * @since 0.1.0
  83. 	*/
  84. 	LMenubar.MENU_CLOSE = "menu_close";
  85. 	LMenubar.prototype.openMainMenu = function (index) {
  86. 		var self = this;
  87. 		self.mousedown({clickTarget : self.getChildAt(index + 1)});
  88. 	};
  89. 	LMenubar.prototype.mousedown = function (e) {
  90. 		var target = e.clickTarget;
  91. 		var root = target.root;
  92. 		if (target.mainMenu) {
  93. 			if (root.open) {
  94. 				return;
  95. 			}
  96. 			root.open = true;
  97. 			root.back.visible = true;
  98. 			root.select = target;
  99. 			var sW = target.getWidth();
  100. 			var sH = target.getHeight();
  101. 			target.graphics.clear();
  102. 			target.graphics.drawRect(0, root.style.selectColor, [0, 0, sW, sH], true, root.style.selectColor);
  103. 			if (target.menuList && target.menuList.length) {
  104. 				for (var j = 0; j < target.menuList.length; j++) {
  105. 					target.menuList[j].visible = true;
  106. 					target.menuList[j].graphics.clear();
  107. 					target.menuList[j].graphics.drawRect(1, root.style.lineColor, [0, 0, target.childWidth, target.childHeight], true, root.style.itemBackgroundColor);
  108. 					if (target.menuList[j].arrow) {
  109. 						target.menuList[j].arrow.x = target.childWidth - root.style.horizontalIndent * 2;
  110. 					}
  111. 				}
  112. 			}
  113. 			return;
  114. 		}
  115. 		if (!target.menuList) {
  116. 			if (target.click) {
  117. 				target.click({target : root});
  118. 				root.open = false;
  119. 				setTimeout(function () {
  120. 					root.back.visible = false;
  121. 				}, 100);
  122. 			}
  123. 			for (var j = 0; j < root.childList.length; j++) {
  124. 				if (root.childList[j].mainMenu) {
  125. 					continue;
  126. 				}
  127. 				root.childList[j].visible = false;
  128. 			}
  129. 		}
  130. 	};
  131. 	LMenubar.prototype.mousemove = function (e) {
  132. 		var target = e.clickTarget;
  133. 		var root = target.root;
  134. 		if (!root.open) {
  135. 			return;
  136. 		}
  137. 		if (root.select && root.select.objectIndex == target.objectIndex) {
  138. 			return;
  139. 		}
  140. 		if (root.select) {
  141. 			var rW = root.select.getWidth();
  142. 			var rH = root.select.getHeight();
  143. 			root.select.graphics.clear();
  144. 			root.select.graphics.drawRect(root.select.mainMenu ? 0 : 1, root.style.lineColor, [0, 0, rW, rH], true, root.select.mainMenu ? root.style.backgroundColor : root.style.itemBackgroundColor);
  145. 		}
  146. 		var sW = target.getWidth();
  147. 		var sH = target.getHeight();
  148. 		target.graphics.clear();
  149. 		target.graphics.drawRect(0, root.style.selectColor, [0, 0, sW, sH], true, root.style.selectColor);
  150. 		if (target.mainMenu) {
  151. 			for (var j = 0; j < root.childList.length; j++) {
  152. 				if (root.childList[j].mainMenu) {
  153. 					continue;
  154. 				}
  155. 				root.childList[j].visible = false;
  156. 			}
  157. 		} else if (root.select.depth == target.depth) {
  158. 			if (root.select.menuList && root.select.menuList.length) {
  159. 				for (var j = 0; j < root.select.menuList.length; j++) {
  160. 					root.select.menuList[j].visible = false;
  161. 				}
  162. 			}
  163. 		} else if (root.select.depth > target.depth) {
  164. 			if (root.select.upper.menuList && root.select.upper.menuList.length) {
  165. 				for (var j = 0; j < root.select.upper.menuList.length; j++){
  166. 					root.select.upper.menuList[j].visible = false;
  167. 				}
  168. 			}
  169. 		}
  170. 		if (target.menuList && target.menuList.length) {
  171. 			for (var j = 0; j < target.menuList.length; j++) {
  172. 				target.menuList[j].visible = true;
  173. 				target.menuList[j].graphics.clear();
  174. 				target.menuList[j].graphics.drawRect(1, root.style.lineColor, [0, 0, target.childWidth, target.childHeight], true, target.menuList[j].mainMenu ? root.style.backgroundColor : root.style.itemBackgroundColor);
  175. 				if (!target.mainMenu) {
  176. 					target.menuList[j].x = target.x + target.getWidth();
  177. 				}
  178. 				if (target.menuList[j].arrow) {
  179. 					target.menuList[j].arrow.x = target.childWidth - root.style.horizontalIndent * 2;
  180. 				}
  181. 			}
  182. 		}
  183. 		root.select = target;
  184. 	};
  185. 	LMenubar.prototype.mainMenuHide = function (value) {
  186. 		var self = this;
  187. 		for (var j = 0; j < self.childList.length; j++) {
  188. 			if (self.childList[j].mainMenu) {
  189. 				self.childList[j].visible = false;
  190. 			}
  191. 		}
  192. 	};
  193. 	LMenubar.prototype.setList = function (layer, list, depth, sx, sy) {
  194. 		var s = this, w = 0, h = 0, menuList = [];
  195. 		layer.childWidth = 0;
  196. 		layer.childHeight = 0;
  197. 		for (var i = 0; i < list.length; i++) {
  198. 			var child = list[i];
  199. 			var menu = new LSprite();
  200. 			menu.depth = depth;
  201. 			menuList.push(menu);
  202. 			var label = new LTextField();
  203. 			menu.root = s;
  204. 			menu.upper = layer;
  205. 			menu.click = child.click;
  206. 			label.size = s.style.textSize;
  207. 			label.color = s.style.textColor;
  208. 			label.text = child.label;
  209. 			label.x = s.style.horizontalIndent;
  210. 			label.y = s.style.verticalIndent;
  211. 			menu.addChild(label);
  212. 			menu.graphics.drawRect(0, s.style.backgroundColor, [0, 0, label.getWidth() + s.style.horizontalIndent * 2, label.getHeight() + s.style.verticalIndent * 2], true, s.style.backgroundColor);
  213. 			menu.addEventListener(LMouseEvent.MOUSE_DOWN, s.mousedown);
  214. 			menu.addEventListener(LMouseEvent.MOUSE_MOVE, s.mousemove);
  215. 			if (s.objectIndex == layer.objectIndex) {
  216. 				menu.x = w + sx;
  217. 				menu.y = 0 + sy;
  218. 				menu.mainMenu = true;
  219. 				w += label.getWidth() + s.style.horizontalIndent * 2;
  220. 				h = label.getHeight() + s.style.verticalIndent * 2;
  221. 				if (layer.childWidth < label.getWidth() + s.style.horizontalIndent * 2) {
  222. 					layer.childWidth = label.getWidth() + s.style.horizontalIndent * 2;
  223. 				}
  224. 				if (layer.childHeight < label.getHeight() + s.style.verticalIndent * 2) {
  225. 					layer.childHeight = label.getHeight() + s.style.verticalIndent * 2;
  226. 				}
  227. 			} else {
  228. 				menu.x = 0 + sx;
  229. 				menu.y = h + sy;
  230. 				w = w > label.getWidth() + s.style.horizontalIndent * 4 ? w : label.getWidth() + s.style.horizontalIndent * 4;
  231. 				h += label.getHeight() + s.style.verticalIndent * 2;
  232. 				if (layer.childWidth < label.getWidth() + s.style.horizontalIndent * 4) {
  233. 					layer.childWidth = label.getWidth() + s.style.horizontalIndent * 4;
  234. 				}
  235. 				if (layer.childHeight < label.getHeight() + s.style.verticalIndent * 2) {
  236. 					layer.childHeight = label.getHeight() + s.style.verticalIndent * 2;
  237. 				}
  238. 			}
  239. 			s.addChild(menu);
  240. 			if (child.list && child.list.length > 0) {
  241. 				if (s.objectIndex == layer.objectIndex) {
  242. 					s.setList(menu, child.list, depth + 1, menu.x, menu.y + menu.getHeight());
  243. 				} else {
  244. 					var arrow = new LSprite();
  245. 					menu.arrow = arrow;
  246. 					menu.addChild(arrow);
  247. 					arrow.x = label.getWidth() + s.style.horizontalIndent * 2;
  248. 					arrow.y = label.y;
  249. 					arrow.graphics.drawVertices(0, s.style.textColor, [[0, 0], [0, label.getHeight()], [s.style.horizontalIndent, label.getHeight() * 0.5]], true, s.style.textColor);
  250. 					s.setList(menu, child.list, depth + 1, menu.x + menu.getWidth() + s.style.horizontalIndent * 2, menu.y);
  251. 				}
  252. 			}
  253. 			if (s.objectIndex != layer.objectIndex) {
  254. 				menu.visible = false;
  255. 			}
  256. 		}
  257. 		layer.menuList = menuList;
  258. 	};
  259. 	return LMenubar;
  260. })();
  261.