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

File: lib/ui/LMenubar-0.1.1.js

/** @language chinese
 * <p>lufylegend.js专用UI,定义包含一个或多个菜单的顶级水平菜单栏</p>
 * <p>使用时需要引进lufylegend.ui-x.x.x.js文件。</p>
 * @class UI:LMenubar
 * @constructor
 * @extends LSprite
 * @param {Array} list 菜单列表,列表的具体格式请看下面的使用举例。
 * @param {Object} style [可选]菜单属性,包含textSize(文字大小),horizontalIndent(水平间隔),verticalIndent(垂直间隔),textColor(文字颜色),lineColor(分割线颜色),backgroundColor(菜单背景颜色),itemBackgroundColor(子菜单背景颜色),selectColor(菜单选中颜色)。
 * @since 0.1.0
 * @examplelink <p><a href="../../../api/ui/LMenubar.html" target="_blank">测试链接</a></p>
 * @public
 */
var LMenubar = (function () {
	function LMenubar (list, style) {
		var s = this;
		LExtends(s, LSprite, []);
		s.type = "LMenubar";
		if (!style) {
			style = {};
		}
		if (!style.textSize) {
			style.textSize = 20;
		}
		if (!style.horizontalIndent) {
			style.horizontalIndent = 10;
		}
		if (!style.verticalIndent) {
			style.verticalIndent = 5;
		}
		if (!style.textColor) {
			style.textColor = "#000000";
		}
		if (!style.lineColor) {
			style.lineColor = "#CCCCCC";
		}
		if (!style.backgroundColor) {
			style.backgroundColor = "#FFFFFF";
		}
		if (!style.itemBackgroundColor) {
			style.itemBackgroundColor = style.backgroundColor;
		}
		if (!style.selectColor) {
			style.selectColor = "#1E90FF";
		}
		s.style = style;
		var back = new LSprite();
		back.graphics.drawRect(0, "#ffffff", [-LGlobal.width, -LGlobal.height, LGlobal.width * 2, LGlobal.height * 2]);
		s.addChild(back);
		s.back = back;
		s.back.root = s;
		s.back.mainMenu = true;
		s.back.background = true;
		s.back.addEventListener(LMouseEvent.MOUSE_UP, function (e) {});
		s.back.addEventListener(LMouseEvent.MOUSE_MOVE, function (e) {});
		s.back.addEventListener(LMouseEvent.MOUSE_DOWN, function (e) {
			var root = e.clickTarget.root;
			for (var j = 0; j < root.childList.length; j++) {
				if (root.childList[j].mainMenu) {
					if (root.childList[j].background) {
						continue;
					}
					var rW = root.childList[j].getWidth();
					var rH = root.childList[j].getHeight();
					root.childList[j].graphics.clear();
					root.childList[j].graphics.drawRect(0, root.style.lineColor, [0, 0, rW, rH], true, root.style.backgroundColor);
					continue;
				}
				root.childList[j].visible = false;
			}
			root.open = false;
			setTimeout(function () {
				root.back.visible = false;
				root.dispatchEvent(LMenubar.MENU_CLOSE);
			}, 100);
		});
		s.back.visible = false;
		s.setList(s, list, 0, 0, 0);
	}
	/** @language chinese
	 * 菜单栏关闭时调用此事件。
	 * @event LMenubar.MENU_CLOSE
	 * @since 0.1.0
	*/
	LMenubar.MENU_CLOSE = "menu_close";
	LMenubar.prototype.openMainMenu = function (index) {
		var self = this;
		self.mousedown({clickTarget : self.getChildAt(index + 1)});
	};
	LMenubar.prototype.mousedown = function (e) {
		var target = e.clickTarget;
		var root = target.root;
		if (target.mainMenu) {
			if (root.open) {
				return;
			}
			root.open = true;
			root.back.visible = true;
			root.select = target;
			var sW = target.getWidth();
			var sH = target.getHeight();
			target.graphics.clear();
			target.graphics.drawRect(0, root.style.selectColor, [0, 0, sW, sH], true, root.style.selectColor);
			if (target.menuList && target.menuList.length) {
				for (var j = 0; j < target.menuList.length; j++) {
					target.menuList[j].visible = true;
					target.menuList[j].graphics.clear();
					target.menuList[j].graphics.drawRect(1, root.style.lineColor, [0, 0, target.childWidth, target.childHeight], true, root.style.itemBackgroundColor);
					if (target.menuList[j].arrow) {
						target.menuList[j].arrow.x = target.childWidth - root.style.horizontalIndent * 2;
					}
				}
			}
			return;
		}
		if (!target.menuList) {
			if (target.click) {
				target.click({target : root});
				root.open = false;
				setTimeout(function () {
					root.back.visible = false;
				}, 100);
			}
			for (var j = 0; j < root.childList.length; j++) {
				if (root.childList[j].mainMenu) {
					continue;
				}
				root.childList[j].visible = false;
			}
		}
	};
	LMenubar.prototype.mousemove = function (e) {
		var target = e.clickTarget;
		var root = target.root;
		if (!root.open) {
			return;
		}
		if (root.select && root.select.objectIndex == target.objectIndex) {
			return;
		}
		if (root.select) {
			var rW = root.select.getWidth();
			var rH = root.select.getHeight();
			root.select.graphics.clear();
			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);
		}
		var sW = target.getWidth();
		var sH = target.getHeight();
		target.graphics.clear();
		target.graphics.drawRect(0, root.style.selectColor, [0, 0, sW, sH], true, root.style.selectColor);
		if (target.mainMenu) {
			for (var j = 0; j < root.childList.length; j++) {
				if (root.childList[j].mainMenu) {
					continue;
				}
				root.childList[j].visible = false;
			}
		} else if (root.select.depth == target.depth) {
			if (root.select.menuList && root.select.menuList.length) {
				for (var j = 0; j < root.select.menuList.length; j++) {
					root.select.menuList[j].visible = false;
				}
			}
		} else if (root.select.depth > target.depth) {
			if (root.select.upper.menuList && root.select.upper.menuList.length) {
				for (var j = 0; j < root.select.upper.menuList.length; j++){
					root.select.upper.menuList[j].visible = false;
				}
			}
		}
		if (target.menuList && target.menuList.length) {
			for (var j = 0; j < target.menuList.length; j++) {
				target.menuList[j].visible = true;
				target.menuList[j].graphics.clear();
				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);
				if (!target.mainMenu) {
					target.menuList[j].x = target.x + target.getWidth();
				}
				if (target.menuList[j].arrow) {
					target.menuList[j].arrow.x = target.childWidth - root.style.horizontalIndent * 2;
				}
			}
		}
		root.select = target;
	};
	LMenubar.prototype.mainMenuHide = function (value) {
		var self = this;
		for (var j = 0; j < self.childList.length; j++) {
			if (self.childList[j].mainMenu) {
				self.childList[j].visible = false;
			}
		}
	};
	LMenubar.prototype.setList = function (layer, list, depth, sx, sy) {
		var s = this, w = 0, h = 0, menuList = [];
		layer.childWidth = 0;
		layer.childHeight = 0;
		for (var i = 0; i < list.length; i++) {
			var child = list[i];
			var menu = new LSprite();
			menu.depth = depth;
			menuList.push(menu);
			var label = new LTextField();
			menu.root = s;
			menu.upper = layer;
			menu.click = child.click;
			label.size = s.style.textSize;
			label.color = s.style.textColor;
			label.text = child.label;
			label.x = s.style.horizontalIndent;
			label.y = s.style.verticalIndent;
			menu.addChild(label);
			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);
			menu.addEventListener(LMouseEvent.MOUSE_DOWN, s.mousedown);
			menu.addEventListener(LMouseEvent.MOUSE_MOVE, s.mousemove);
			if(LGlobal.mobile){
				menu.addEventListener(LMouseEvent.MOUSE_DOWN, s.mousemove);
			}
			if (s.objectIndex == layer.objectIndex) {
				menu.x = w + sx;
				menu.y = 0 + sy;
				menu.mainMenu = true;
				w += label.getWidth() + s.style.horizontalIndent * 2;
				h = label.getHeight() + s.style.verticalIndent * 2;
				if (layer.childWidth < label.getWidth() + s.style.horizontalIndent * 2) {
					layer.childWidth = label.getWidth() + s.style.horizontalIndent * 2;
				}
				if (layer.childHeight < label.getHeight() + s.style.verticalIndent * 2) {
					layer.childHeight = label.getHeight() + s.style.verticalIndent * 2;
				}
			} else {
				menu.x = 0 + sx;
				menu.y = h + sy;
				w = w > label.getWidth() + s.style.horizontalIndent * 4 ? w : label.getWidth() + s.style.horizontalIndent * 4;
				h += label.getHeight() + s.style.verticalIndent * 2;
				if (layer.childWidth < label.getWidth() + s.style.horizontalIndent * 4) {
					layer.childWidth = label.getWidth() + s.style.horizontalIndent * 4;
				}
				if (layer.childHeight < label.getHeight() + s.style.verticalIndent * 2) {
					layer.childHeight = label.getHeight() + s.style.verticalIndent * 2;
				}
			}
			s.addChild(menu);
			if (child.list && child.list.length > 0) {
				if (s.objectIndex == layer.objectIndex) {
					s.setList(menu, child.list, depth + 1, menu.x, menu.y + menu.getHeight());
				} else {
					var arrow = new LSprite();
					menu.arrow = arrow;
					menu.addChild(arrow);
					arrow.x = label.getWidth() + s.style.horizontalIndent * 2;
					arrow.y = label.y;
					arrow.graphics.drawVertices(0, s.style.textColor, [[0, 0], [0, label.getHeight()], [s.style.horizontalIndent, label.getHeight() * 0.5]], true, s.style.textColor);
					s.setList(menu, child.list, depth + 1, menu.x + menu.getWidth() + s.style.horizontalIndent * 2, menu.y);
				}
			}
			if (s.objectIndex != layer.objectIndex) {
				menu.visible = false;
			}
		}
		layer.menuList = menuList;
	};
	return LMenubar;
})();