ligerMessageBox.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. /**
  2. * jQuery ligerUI 1.1.9
  3. *
  4. * http://ligerui.com
  5. *
  6. * Author daomi 2012 [ gd_star@163.com ]
  7. *
  8. */
  9. (function ($)
  10. {
  11. $.ligerMessageBox = function (options)
  12. {
  13. return $.ligerui.run.call(null, "ligerMessageBox", arguments, { isStatic: true });
  14. };
  15. $.ligerDefaults.MessageBox = {
  16. isDrag: true
  17. };
  18. $.ligerMethos.MessageBox = {};
  19. $.ligerui.controls.MessageBox = function (options)
  20. {
  21. $.ligerui.controls.MessageBox.base.constructor.call(this, null, options);
  22. };
  23. $.ligerui.controls.MessageBox.ligerExtend($.ligerui.core.UIComponent, {
  24. __getType: function ()
  25. {
  26. return 'MessageBox';
  27. },
  28. __idPrev: function ()
  29. {
  30. return 'MessageBox';
  31. },
  32. _extendMethods: function ()
  33. {
  34. return $.ligerMethos.MessageBox;
  35. },
  36. _render: function ()
  37. {
  38. var g = this, p = this.options;
  39. var messageBoxHTML = "";
  40. messageBoxHTML += '<div class="l-messagebox">';
  41. messageBoxHTML += ' <div class="l-messagebox-lt"></div><div class="l-messagebox-rt"></div>';
  42. messageBoxHTML += ' <div class="l-messagebox-l"></div><div class="l-messagebox-r"></div> ';
  43. messageBoxHTML += ' <div class="l-messagebox-image"></div>';
  44. messageBoxHTML += ' <div class="l-messagebox-title">';
  45. messageBoxHTML += ' <div class="l-messagebox-title-inner"></div>';
  46. messageBoxHTML += ' <div class="l-messagebox-close"></div>';
  47. messageBoxHTML += ' </div>';
  48. messageBoxHTML += ' <div class="l-messagebox-content">';
  49. messageBoxHTML += ' </div>';
  50. messageBoxHTML += ' <div class="l-messagebox-buttons"><div class="l-messagebox-buttons-inner">';
  51. messageBoxHTML += ' </div></div>';
  52. messageBoxHTML += ' </div>';
  53. g.messageBox = $(messageBoxHTML);
  54. $('body').append(g.messageBox);
  55. g.messageBox.close = function ()
  56. {
  57. g._removeWindowMask();
  58. g.messageBox.remove();
  59. };
  60. //设置参数属性
  61. p.width && g.messageBox.width(p.width);
  62. p.title && $(".l-messagebox-title-inner", g.messageBox).html(p.title);
  63. p.content && $(".l-messagebox-content", g.messageBox).html(p.content);
  64. if (p.buttons)
  65. {
  66. $(p.buttons).each(function (i, item)
  67. {
  68. var btn = $('<div class="l-messagebox-btn"><div class="l-messagebox-btn-l"></div><div class="l-messagebox-btn-r"></div><div class="l-messagebox-btn-inner"></div></div>');
  69. $(".l-messagebox-btn-inner", btn).html(item.text);
  70. $(".l-messagebox-buttons-inner", g.messageBox).append(btn);
  71. item.width && btn.width(item.width);
  72. item.onclick && btn.click(function () { item.onclick(item, i, g.messageBox) });
  73. });
  74. $(".l-messagebox-buttons-inner", g.messageBox).append("<div class='l-clear'></div>");
  75. }
  76. var boxWidth = g.messageBox.width();
  77. var sumBtnWidth = 0;
  78. $(".l-messagebox-buttons-inner .l-messagebox-btn", g.messageBox).each(function ()
  79. {
  80. sumBtnWidth += $(this).width();
  81. });
  82. $(".l-messagebox-buttons-inner", g.messageBox).css({ marginLeft: parseInt((boxWidth - sumBtnWidth) * 0.5) });
  83. //设置背景、拖动支持 和设置图片
  84. g._applyWindowMask();
  85. g._applyDrag();
  86. g._setImage();
  87. //位置初始化
  88. var left = 0;
  89. var top = 0;
  90. var width = p.width || g.messageBox.width();
  91. if (p.left != null) left = p.left;
  92. else p.left = left = 0.5 * ($(window).width() - width);
  93. if (p.top != null) top = p.top;
  94. else p.top = top = 0.5 * ($(window).height() - g.messageBox.height()) + $(window).scrollTop() - 10;
  95. if (left < 0) p.left = left = 0;
  96. if (top < 0) p.top = top = 0;
  97. g.messageBox.css({ left: left, top: top });
  98. //设置事件
  99. $(".l-messagebox-btn", g.messageBox).hover(function ()
  100. {
  101. $(this).addClass("l-messagebox-btn-over");
  102. }, function ()
  103. {
  104. $(this).removeClass("l-messagebox-btn-over");
  105. });
  106. $(".l-messagebox-close", g.messageBox).hover(function ()
  107. {
  108. $(this).addClass("l-messagebox-close-over");
  109. }, function ()
  110. {
  111. $(this).removeClass("l-messagebox-close-over");
  112. }).click(function ()
  113. {
  114. g.messageBox.close();
  115. });
  116. g.set(p);
  117. },
  118. close: function ()
  119. {
  120. var g = this, p = this.options;
  121. this.g._removeWindowMask();
  122. this.messageBox.remove();
  123. g._hideIframe();
  124. },
  125. _applyWindowMask: function ()
  126. {
  127. var g = this, p = this.options;
  128. $(".l-window-mask").remove();
  129. g._createIframe();
  130. g._showIframe();
  131. $("<div class='l-window-mask' style='display: block;'></div>").appendTo($("body"));
  132. },
  133. /**
  134. * 创建iframe
  135. */
  136. _createIframe:function(){
  137. var width= $(window).width();
  138. var height= $(window).height();
  139. var left= $(window).scrollLeft ();
  140. var top= $(window).scrollTop();
  141. var iframeObj=$('<iframe frameborder="0" class="l_messagebox_frame" style="position:absolute;z-index:1;display:none;"></iframe>');
  142. iframeObj.css({left:left,top:top,width:width,height:height});
  143. iframeObj.attr("iframeId","messageBoxId");
  144. iframeObj.appendTo('body');
  145. },
  146. /**
  147. * 隐藏iframe
  148. */
  149. _hideIframe:function(){
  150. $("iframe.l_messagebox_frame[iframeId='messageBoxId']").hide();
  151. },
  152. /**
  153. * 显示Ifame
  154. */
  155. _showIframe:function(){
  156. $("iframe.l_messagebox_frame[iframeId='messageBoxId']").show();
  157. },
  158. _removeWindowMask: function ()
  159. {
  160. var g = this, p = this.options;
  161. $(".l-window-mask").remove();
  162. g._hideIframe(g);
  163. },
  164. _applyDrag: function ()
  165. {
  166. var g = this, p = this.options;
  167. if (p.isDrag && $.fn.ligerDrag)
  168. g.messageBox.ligerDrag({ handler: '.l-messagebox-title-inner', animate: false });
  169. },
  170. _setImage: function ()
  171. {
  172. var g = this, p = this.options;
  173. if (p.type)
  174. {
  175. if (p.type == 'success' || p.type == 'donne')
  176. {
  177. $(".l-messagebox-image", g.messageBox).addClass("l-messagebox-image-donne").show();
  178. $(".l-messagebox-content", g.messageBox).css({ paddingLeft: 64, paddingBottom: 30 });
  179. }
  180. else if (p.type == 'error')
  181. {
  182. $(".l-messagebox-image", g.messageBox).addClass("l-messagebox-image-error").show();
  183. $(".l-messagebox-content", g.messageBox).css({ paddingLeft: 64, paddingBottom: 30 });
  184. }
  185. else if (p.type == 'warn')
  186. {
  187. $(".l-messagebox-image", g.messageBox).addClass("l-messagebox-image-warn").show();
  188. $(".l-messagebox-content", g.messageBox).css({ paddingLeft: 64, paddingBottom: 30 });
  189. }
  190. else if (p.type == 'question')
  191. {
  192. $(".l-messagebox-image", g.messageBox).addClass("l-messagebox-image-question").show();
  193. $(".l-messagebox-content", g.messageBox).css({ paddingLeft: 64, paddingBottom: 40 });
  194. }
  195. }
  196. }
  197. });
  198. $.ligerMessageBox.show = function (p)
  199. {
  200. return $.ligerMessageBox(p);
  201. };
  202. $.ligerMessageBox.alert = function (title, content, type, onBtnClick)
  203. {
  204. title = title || "";
  205. content = content || title;
  206. var onclick = function (item, index, messageBox)
  207. {
  208. messageBox.close();
  209. if (onBtnClick)
  210. onBtnClick(item, index, messageBox);
  211. };
  212. p = {
  213. title: title,
  214. content: content,
  215. buttons: [{ text: '确定', onclick: onclick}]
  216. };
  217. if (type) p.type = type;
  218. return $.ligerMessageBox(p);
  219. };
  220. $.ligerMessageBox.confirm = function (title, content, callback)
  221. {
  222. var onclick = function (item, index, messageBox)
  223. {
  224. messageBox.close();
  225. if (callback)
  226. {
  227. callback(index == 0);
  228. }
  229. };
  230. p = {
  231. type: 'question',
  232. title: title,
  233. content: content,
  234. buttons: [{ text: '是', onclick: onclick }, { text: '否', onclick: onclick}]
  235. };
  236. return $.ligerMessageBox(p);
  237. };
  238. $.ligerMessageBox.success = function (title, content, onBtnClick)
  239. {
  240. return $.ligerMessageBox.alert(title, content, 'success', onBtnClick);
  241. };
  242. $.ligerMessageBox.error = function (title, content, onBtnClick)
  243. {
  244. return $.ligerMessageBox.alert(title, content, 'error', onBtnClick);
  245. };
  246. $.ligerMessageBox.warn = function (title, content, onBtnClick)
  247. {
  248. return $.ligerMessageBox.alert(title, content, 'warn', onBtnClick);
  249. };
  250. $.ligerMessageBox.question = function (title, content)
  251. {
  252. return $.ligerMessageBox.alert(title, content, 'question');
  253. };
  254. })(jQuery);