fwmessager.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. 
  2. (function($){
  3. function addHeader(target,title){
  4. var header = $('<div class="fwmessager-header"><div class="fwmessager-title">'+title+' (crtl+x)</div></div>').prependTo(target);
  5. var tool = $('<div class="fwmessager-tool"></div>').appendTo(header);
  6. $('<div class="fwmessager-tool-close" keycomb="ctrl+x"></div>').appendTo(tool).bind('click',
  7. function(){
  8. target.hide();
  9. target.mask.hide();
  10. target.mask.remove();
  11. target.remove();
  12. });
  13. tool.find('div').hover(
  14. function(){$(this).addClass('fwmessager-tool-over');},
  15. function(){$(this).removeClass('fwmessager-tool-over');}
  16. );
  17. }
  18. function setSize(target){
  19. target.css({
  20. display:'block',
  21. top:document.body.scrollTop + document.body.clientHeight/2-100,
  22. left:document.body.clientWidth/2 - 100,
  23. width:'300',
  24. height:'100'
  25. });
  26. }
  27. function setProperties(win){
  28. var opts = $.extend({},{zIndex:90000,width:300,height:100,left:0,top:0,draggable:false});
  29. var state = $.data(win,'fwmessager', {options:opts});
  30. var body = win.find('.fwmessager-body');
  31. var header = win.find('.fwmessager-header');
  32. var button = win.find('.fwmessager-button');
  33. //处理由于一行字符串过长的问题
  34. if(body.outerWidth()>header.outerWidth()+20){
  35. header.width(body.outerWidth());
  36. button.width(body.outerWidth());
  37. }
  38. win.draggable({
  39. handle: '>div.fwmessager-header>div.fwmessager-title',
  40. disabled: false,
  41. onStartDrag: function(e){
  42. win.css('z-index', state.options.zIndex++);
  43. if (state.mask) state.mask.css('z-index', state.options.zIndex++);
  44. if (!state.proxy){
  45. state.proxy = $('<div class="fwmessager-proxy"></div>').insertAfter(win);
  46. }
  47. state.proxy.css({
  48. display:'none',
  49. zIndex: state.options.zIndex++,
  50. left: e.data.left,
  51. top: e.data.top,
  52. width: ($.boxModel==true ? (win.outerWidth()-(win.outerWidth()-win.width())) : win.outerWidth()),
  53. height: ($.boxModel==true ? (win.outerHeight()-(win.outerHeight()-win.height())) : win.outerHeight())
  54. });
  55. setTimeout(function(){
  56. if (state.proxy) state.proxy.show();
  57. }, 500);
  58. },
  59. onDrag: function(e){
  60. state.proxy.css({
  61. display:'block',
  62. left: e.data.left,
  63. top: e.data.top
  64. });
  65. return false;
  66. },
  67. onStopDrag: function(e){
  68. state.options.left = e.data.left;
  69. state.options.top = e.data.top;
  70. win.css({left:e.data.left,top:e.data.top});
  71. state.proxy.remove();
  72. state.proxy = null;
  73. }
  74. });
  75. }
  76. /**
  77. * create a dialog, when dialog is closed destroy it
  78. */
  79. function createDialog(title, content){
  80. var win = $('<div class="fwmessager"></div>').appendTo('body');
  81. var body = $('<div class="fwmessager-body"></div>').appendTo(win);
  82. var cont = $('<div class="fwmessager-content"></div>').appendTo(body);
  83. var pdiv = $('<div class="pdiv"></div>');
  84. var reg = /\n/g;
  85. content = content.replace(reg,'<br>')
  86. pdiv.html(content);
  87. addHeader(win,title);
  88. cont.append(pdiv);
  89. $('<div class="fwmessager-button" ></div>').appendTo(win);
  90. return win;
  91. }
  92. function setButtonClose(win){
  93. var button = win.find("div.fwmessager-button");
  94. $('<a herf="javascript:void(0)" class="buttonlink">关闭</a>').appendTo(button).bind('click',
  95. function(){
  96. win.hide();
  97. win.mask.hide();
  98. win.mask.remove();
  99. win.remove();
  100. });
  101. return false;
  102. }
  103. function setButtonOK(win,fn){
  104. var button = win.find("div.fwmessager-button");
  105. $('<a herf="javascript:void(0)" class="buttonlink">确定</a>').appendTo(button).bind('click',
  106. function(){
  107. win.hide();
  108. win.mask.hide();
  109. win.mask.remove();
  110. fn = window[fn];
  111. if (fn){
  112. fn(true);
  113. }
  114. });
  115. return false;
  116. }
  117. function setButtonCL(win,fn){
  118. var button = win.find("div.fwmessager-button");
  119. $('<a herf="javascript:void(0)" class="buttonlink">取消</a>').appendTo(button).bind('click',
  120. function(){
  121. win.hide();
  122. win.mask.hide();
  123. win.mask.remove();
  124. win.remove();
  125. fn = window[fn];
  126. if(fn){
  127. fn(false);
  128. }
  129. });
  130. return false;
  131. }
  132. function setModal(win){
  133. if (win.mask) win.mask.remove();
  134. win.mask = $('<div class="fwmessager-mask"></div>').appendTo('body');
  135. win.mask.css({
  136. width: getPageArea().width,
  137. height: getPageArea().height
  138. });
  139. return true;
  140. }
  141. function getPageArea() {
  142. if (document.compatMode == 'BackCompat') {
  143. return {
  144. width: Math.max(document.body.scrollWidth, document.body.clientWidth),
  145. height: Math.max(document.body.scrollHeight, document.body.clientHeight)
  146. }
  147. } else {
  148. return {
  149. width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
  150. height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
  151. }
  152. }
  153. }
  154. jQuery.fwmessager = {
  155. show: function(msg) {
  156. var win = createDialog('提示信息',msg+'');
  157. setSize(win);
  158. setButtonClose(win);
  159. setModal(win);
  160. setProperties(win);
  161. jQuery('.buttonlink',win).each(function(){
  162. $(this).linkbutton({plain:false});
  163. });
  164. },
  165. confirm: function(msg,fn) {
  166. var win = createDialog('提示信息',msg+'');
  167. setSize(win);
  168. setButtonOK(win,fn);
  169. setButtonCL(win,fn);
  170. setModal(win);
  171. setProperties(win);
  172. jQuery('.buttonlink',win).each(function(){
  173. $(this).linkbutton({plain:false});
  174. });
  175. }
  176. };
  177. })(jQuery);