UIMenu.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. (function() {
  2. FZ.UIMenu = FZ.newClass( {
  3. MENU_SHOW : 0,
  4. MENU_HIDE : 1,
  5. m_div : null,
  6. m_back_div : null,
  7. m_btn_list : null,
  8. m_back_w : 0,
  9. m_back_h : 0,
  10. m_observer : null,
  11. m_state : 0,
  12. m_show_x : 0,
  13. m_show_y : 0,
  14. m_hide_x : 0,
  15. m_hide_y : 0,
  16. m_btn_enable : null,
  17. init : function() {
  18. this.m_div = document.createElement("div");
  19. this.m_div.style.position = "absolute";
  20. this.m_div.style.webkitTransition = "translate";
  21. this.m_btn_list = [];
  22. this.m_back_div = document.createElement("div");
  23. this.setState(this.MENU_SHOW, 0);
  24. },
  25. setBackImage : function(url, w, h) {
  26. var ctx = null;
  27. if (undefined !== w) {
  28. this.m_back_w = w;
  29. }
  30. if (undefined !== h) {
  31. this.m_back_h = h;
  32. }
  33. this.m_div.style.width = this.m_back_w + "px";
  34. this.m_div.style.height = this.m_back_h + "px";
  35. this.m_back_div.style.width = this.m_back_w + "px";
  36. this.m_back_div.style.height = this.m_back_h + "px";
  37. this.m_back_div.style.position = "absolute";
  38. this.m_back_div.style.backgroundRepeat="no-repeat";
  39. this.m_back_div.style.backgroundImage = "url(imgs/" + url + ")";
  40. this.m_back_div.style.backgroundPosition = "0px; 0px";
  41. this.m_div.appendChild(this.m_back_div);
  42. },
  43. setzIndex : function(index) {
  44. this.m_div.style.zIndex = index;
  45. },
  46. setPos : function(x, y) {
  47. this.m_div.style.webkitTransitionDuration = "0.2s";
  48. this.m_div.style.webkitTransform = "translate(" + (x) + "px, " + (y) + "px)";
  49. },
  50. setShowPos : function(x, y) {
  51. this.m_show_x = x;
  52. this.m_show_y = y;
  53. },
  54. setHidePos : function(x, y) {
  55. this.m_hide_x = x;
  56. this.m_hide_y = y;
  57. },
  58. addMonitor : function(obj) {
  59. this.m_observer = obj;
  60. },
  61. removeMonitor : function() {
  62. this.m_observer = null;
  63. },
  64. setEnableBtn : function(btn) {
  65. this.m_btn_enable = btn;
  66. btn.m_div.style.zIndex = 1;
  67. },
  68. addButton : function(btn) {
  69. this.m_div.appendChild(btn.m_div);
  70. this.m_btn_list.push(btn);
  71. },
  72. addEnableBtn : function() {
  73. switch (this.m_state) {
  74. case this.MENU_SHOW: {
  75. if(this.m_btn_enable) {
  76. this.m_btn_enable.setSwitchState(this.m_btn_enable.SWITCH_OFF);
  77. }
  78. break;
  79. }
  80. case this.MENU_HIDE: {
  81. if(this.m_btn_enable) {
  82. this.m_btn_enable.setSwitchState(this.m_btn_enable.SWITCH_ON);
  83. }
  84. break;
  85. }
  86. default:{
  87. break;
  88. }
  89. }
  90. },
  91. setState : function(state, time) {
  92. // this.m_div.style.webkitTransitionDuration = time + "s";
  93. this.m_state = state;
  94. switch (this.m_state) {
  95. case this.MENU_SHOW: {
  96. // this.m_div.style.zIndex = 2;
  97. this.setPos(this.m_show_x, this.m_show_y);
  98. // this.addEvent();
  99. break;
  100. }
  101. case this.MENU_HIDE: {
  102. // this.m_div.style.zIndex = 0;
  103. this.setPos(this.m_hide_x, this.m_hide_y);
  104. // this.removeEvent(false);
  105. break;
  106. }
  107. default: {
  108. break;
  109. }
  110. }
  111. this.addEnableBtn();
  112. },
  113. removeButton : function(btn) {
  114. var del = -1;
  115. var index = 0;
  116. for (index = 0; index < this.m_btn_list.length; index++) {
  117. if (btn === this.m_btn_list[index]) {
  118. del = index;
  119. break;
  120. }
  121. }
  122. if (-1 !== del) {
  123. btn.removeEvent();
  124. btn.removeMonitor();
  125. this.m_btn_list.splice(del, 1);
  126. }
  127. },
  128. addEvent : function() {
  129. var index = 0;
  130. var btn = null;
  131. for (index = 0; index < this.m_btn_list.length; index++) {
  132. btn = this.m_btn_list[index];
  133. btn.addMonitor(this);
  134. btn.setEnable(true);
  135. }
  136. },
  137. removeEvent : function(all) {
  138. var index = 0;
  139. var btn = null;
  140. for (index = 0; index < this.m_btn_list.length; index++) {
  141. btn = this.m_btn_list[index];
  142. btn.removeMonitor();
  143. btn.setEnable(false);
  144. }
  145. },
  146. buttonClick : function(btn) {
  147. if ((null !== this.m_observer) && (this.m_observer.menuItemClick)) {
  148. this.m_observer.menuItemClick(btn);
  149. }
  150. }
  151. });
  152. })();