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. })();