UIButton.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. (function(){
  2. FZ.UIButton = FZ.newClass({
  3. SWITCH_ON: 0,
  4. SWITCH_OFF: 1,
  5. m_w: 0,
  6. m_h: 0,
  7. m_col: 1,
  8. m_div: null,
  9. m_img_list: null,
  10. m_call_mOver: null,
  11. m_call_mOut: null,
  12. m_call_mMove: null,
  13. m_call_mClick: null,
  14. m_call_tStart: null,
  15. m_call_tMove: null,
  16. m_call_tEnd: null,
  17. m_is_switch: false,
  18. m_btn_state: 0,
  19. m_observer: null,
  20. m_enable: true,
  21. m_clickFlag: false,
  22. COLOR_BROWN:"#B97F00",
  23. COLOR_ORANGE:"#FFC72A",
  24. init: function(w, h, col, url, urlDown){
  25. this.m_col = col;
  26. this.m_w = w;
  27. this.m_h = h;
  28. this.m_div = document.createElement("div");
  29. this.m_div.style.position = "absolute";
  30. this.m_div.style.width = this.m_w + "px";
  31. this.m_div.style.height = this.m_h + "px";
  32. this.m_img_list = [];
  33. this.m_img_list.push(url);
  34. this.m_img_list.push(urlDown);
  35. this.m_div.style.backgroundRepeat = "no-repeat";
  36. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[0] + ")";
  37. this.m_div.style.backgroundPosition = "0px 0px";
  38. this.m_enable = true;
  39. this.m_is_switch = false;
  40. this.setEnable(this.m_enable);
  41. this.m_clickFlag = false;
  42. },
  43. setSwitchButton: function(url, urlDown){
  44. this.m_is_switch = true;
  45. this.m_btn_state = this.SWITCH_ON;
  46. this.m_img_list.push(url);
  47. this.m_img_list.push(urlDown);
  48. },
  49. setSwitchState: function(state){
  50. var index = 0;
  51. this.m_btn_state = state;
  52. if (this.SWITCH_OFF === this.m_btn_state) {
  53. index = 2;
  54. }
  55. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 0] + ")";
  56. },
  57. setEnable: function(value){
  58. this.m_enable = value;
  59. if (this.m_enable) {
  60. this.addEvent();
  61. }
  62. else {
  63. this.removeEvent();
  64. }
  65. },
  66. setPos: function(x, y){
  67. this.m_div.style.left = x + "px";
  68. this.m_div.style.top = y + "px";
  69. },
  70. addEvent: function(){
  71. this.removeEvent();
  72. if (FZ.TARGET_DEF.MOBILE === FZ.TargetPort) {
  73. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.T_START, this.mouseHandler);
  74. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.T_MOVE, this.mouseHandler);
  75. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.T_END, this.mouseHandler);
  76. }
  77. else {
  78. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.M_OVER, this.mouseHandler);
  79. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.M_MOVE, this.mouseHandler);
  80. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.M_OUT, this.mouseHandler);
  81. FZ.EventHandler(this, this.m_div, FZ.EVENT_DEF.M_CLICK, this.mouseHandler);
  82. }
  83. },
  84. removeEvent: function(){
  85. if (FZ.TARGET_DEF.MOBILE === FZ.TargetPort) {
  86. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.T_START, this.m_call_tStart);
  87. this.m_call_tStart = null;
  88. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.T_MOVE, this.m_call_tMove);
  89. this.m_call_tMove = null;
  90. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.T_END, this.m_call_tEnd);
  91. this.m_call_tEnd = null;
  92. }
  93. else {
  94. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.M_OVER, this.m_call_mOver);
  95. this.m_call_mOver = null;
  96. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.M_OUT, this.m_call_mOut);
  97. this.m_call_mOut = null;
  98. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.M_MOVE, this.m_call_mMove);
  99. this.m_call_mMove = null;
  100. FZ.EventRemove(this, this.m_div, FZ.EVENT_DEF.M_CLICK, this.m_call_mClick);
  101. this.m_call_mClick = null;
  102. }
  103. },
  104. addMonitor: function(obj){
  105. this.m_observer = obj;
  106. },
  107. removeMonitor: function(){
  108. this.m_observer = null;
  109. },
  110. mouseHandler: function(evt){
  111. var type = "";
  112. var index = 0;
  113. evt.stopPropagation();
  114. //evt.preventDefault();
  115. if ((this.m_is_switch) && (this.SWITCH_OFF === this.m_btn_state)) {
  116. index = 2;
  117. }
  118. if (FZ.TARGET_DEF.MOBILE === FZ.TargetPort) {
  119. if (FZ.EVENT_DEF.T_START === evt.type) {
  120. type = FZ.EVENT_DEF.M_OVER;
  121. // this.m_clickFlag = true;
  122. }
  123. if (FZ.EVENT_DEF.T_END === evt.type) {
  124. type = FZ.EVENT_DEF.M_CLICK;
  125. // this.m_clickFlag = true;
  126. }
  127. }
  128. else {
  129. type = evt.type;
  130. }
  131. if (FZ.EVENT_DEF.M_OVER === type) {
  132. if (FZ.Game.GameState.m_gamePause === true) {
  133. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_HOME_INDEX]) {
  134. this.m_div.style.backgroundImage = "url(imgs/BTN_MAIN_MENU_ICON_TOUCH.png)";
  135. }
  136. else
  137. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_HINT_INDEX]) {
  138. this.m_div.style.backgroundImage = "url(imgs/BTN_HINT_GREY.png)";
  139. }
  140. else
  141. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_PAUSE_INDEX]) {
  142. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 1] + ")";
  143. this.m_div.style.color = this.COLOR_BROWN;
  144. }
  145. }
  146. else {
  147. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 1] + ")";
  148. this.m_div.style.color = this.COLOR_BROWN;
  149. }
  150. }
  151. else
  152. if (FZ.EVENT_DEF.M_OUT === type) {
  153. // this.m_clickFlag = true;
  154. if (FZ.Game.GameState.m_gamePause === true) {
  155. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_HOME_INDEX]) {
  156. this.m_div.style.backgroundImage = "url(imgs/BTN_MAIN_MENU_ICON.png)";
  157. }
  158. else
  159. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_HINT_INDEX]) {
  160. this.m_div.style.backgroundImage = "url(imgs/BTN_HINT_GREY.png)";
  161. }
  162. else
  163. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_PAUSE_INDEX]) {
  164. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 0] + ")";
  165. this.m_div.style.color = this.COLOR_ORANGE;
  166. }
  167. }
  168. else {
  169. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 0] + ")";
  170. this.m_div.style.color = this.COLOR_ORANGE;
  171. }
  172. }
  173. else
  174. if (FZ.EVENT_DEF.M_CLICK === type) {
  175. this.m_clickFlag = true;
  176. if (FZ.Game.GameState.m_gamePause === true) {
  177. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_HOME_INDEX]) {
  178. this.m_div.style.backgroundImage = "url(imgs/BTN_MAIN_MENU_ICON.png)";
  179. }
  180. else
  181. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_HINT_INDEX]) {
  182. this.m_div.style.backgroundImage = "url(imgs/BTN_HINT_GREY.png)";
  183. }
  184. else
  185. if (this === FZ.Game.GameState.m_btn_list[FZ.Game.GameState.BTN_PAUSE_INDEX]) {
  186. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 0] + ")";
  187. this.m_div.style.color = this.COLOR_ORANGE;
  188. }
  189. }
  190. else {
  191. this.m_div.style.backgroundImage = "url(imgs/" + this.m_img_list[index + 0] + ")";
  192. this.m_div.style.color = this.COLOR_ORANGE;
  193. }
  194. }
  195. if ((null !== this.m_observer) && (this.m_observer.buttonClick)) {
  196. if((type === FZ.EVENT_DEF.M_CLICK ||type === FZ.EVENT_DEF.T_END) && this.m_clickFlag){
  197. this.m_observer.buttonClick(this);
  198. this.m_clickFlag = false;
  199. }
  200. }
  201. return false;
  202. }
  203. });
  204. })();