dwz.dialog.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. /**
  2. * @author Roger Wu
  3. * reference:dwz.drag.js, dwz.dialogDrag.js, dwz.resize.js, dwz.taskBar.js
  4. */
  5. (function($){
  6. $.pdialog = {
  7. _op:{height:300, width:580, minH:40, minW:50, total:20, max:false, mask:false, resizable:true, drawable:true, maxable:true,minable:true,fresh:true},
  8. _current:null,
  9. _zIndex:42,
  10. getCurrent:function(){
  11. return this._current;
  12. },
  13. reload:function(url, options){
  14. var op = $.extend({data:{}, dialogId:"", callback:null}, options);
  15. var dialog = (op.dialogId && $("body").data(op.dialogId)) || this._current;
  16. if (dialog){
  17. var jDContent = dialog.find(".dialogContent");
  18. jDContent.ajaxUrl({
  19. type:"GET", url:url, data:op.data, callback:function(response){
  20. jDContent.find("[layoutH]").layoutH(jDContent);
  21. $(".pageContent", dialog).width($(dialog).width()-14);
  22. $(":button.close", dialog).click(function(){
  23. $.pdialog.close(dialog);
  24. return false;
  25. });
  26. if ($.isFunction(op.callback)) op.callback(response);
  27. }
  28. });
  29. }
  30. },
  31. //打开一个层
  32. open:function(url, dlgid, title, options) {
  33. var op = $.extend({},$.pdialog._op, options);
  34. var dialog = $("body").data(dlgid);
  35. //重复打开一个层
  36. if(dialog) {
  37. if(dialog.is(":hidden")) {
  38. dialog.show();
  39. }
  40. if(op.fresh || url != $(dialog).data("url")){
  41. dialog.data("url",url);
  42. dialog.find(".dialogHeader").find("h1").html(title);
  43. this.switchDialog(dialog);
  44. var jDContent = dialog.find(".dialogContent");
  45. jDContent.loadUrl(url, {}, function(){
  46. jDContent.find("[layoutH]").layoutH(jDContent);
  47. $(".pageContent", dialog).width($(dialog).width()-14);
  48. $("button.close").click(function(){
  49. $.pdialog.close(dialog);
  50. return false;
  51. });
  52. });
  53. }
  54. } else { //打开一个全新的层
  55. $("body").append(DWZ.frag["dialogFrag"]);
  56. dialog = $(">.dialog:last-child", "body");
  57. dialog.data("id",dlgid);
  58. dialog.data("url",url);
  59. if(options.close) dialog.data("close",options.close);
  60. if(options.param) dialog.data("param",options.param);
  61. ($.fn.bgiframe && dialog.bgiframe());
  62. dialog.find(".dialogHeader").find("h1").html(title);
  63. $(dialog).css("zIndex", ($.pdialog._zIndex+=2));
  64. $("div.shadow").css("zIndex", $.pdialog._zIndex - 3).show();
  65. $.pdialog._init(dialog, options);
  66. $(dialog).click(function(){
  67. $.pdialog.switchDialog(dialog);
  68. });
  69. if(op.resizable)
  70. dialog.jresize();
  71. if(op.drawable)
  72. dialog.dialogDrag();
  73. $("a.close", dialog).click(function(event){
  74. $.pdialog.close(dialog);
  75. return false;
  76. });
  77. if (op.maxable) {
  78. $("a.maximize", dialog).show().click(function(event){
  79. $.pdialog.switchDialog(dialog);
  80. $.pdialog.maxsize(dialog);
  81. dialog.jresize("destroy").dialogDrag("destroy");
  82. return false;
  83. });
  84. } else {
  85. $("a.maximize", dialog).hide();
  86. }
  87. $("a.restore", dialog).click(function(event){
  88. $.pdialog.restore(dialog);
  89. dialog.jresize().dialogDrag();
  90. return false;
  91. });
  92. if (op.minable) {
  93. $("a.minimize", dialog).show().click(function(event){
  94. $.pdialog.minimize(dialog);
  95. return false;
  96. });
  97. } else {
  98. $("a.minimize", dialog).hide();
  99. }
  100. $("div.dialogHeader a", dialog).mousedown(function(){
  101. return false;
  102. });
  103. $("div.dialogHeader", dialog).dblclick(function(){
  104. if($("a.restore",dialog).is(":hidden"))
  105. $("a.maximize",dialog).trigger("click");
  106. else
  107. $("a.restore",dialog).trigger("click");
  108. });
  109. if(op.max) {
  110. // $.pdialog.switchDialog(dialog);
  111. $.pdialog.maxsize(dialog);
  112. dialog.jresize("destroy").dialogDrag("destroy");
  113. }
  114. $("body").data(dlgid, dialog);
  115. $.pdialog._current = dialog;
  116. $.pdialog.attachShadow(dialog);
  117. //load data
  118. var jDContent = $(".dialogContent",dialog);
  119. jDContent.loadUrl(url, {}, function(){
  120. jDContent.find("[layoutH]").layoutH(jDContent);
  121. $(".pageContent", dialog).width($(dialog).width()-14);
  122. $("button.close").click(function(){
  123. $.pdialog.close(dialog);
  124. return false;
  125. });
  126. });
  127. }
  128. if (op.mask) {
  129. $(dialog).css("zIndex", 1000);
  130. $("a.minimize",dialog).hide();
  131. $(dialog).data("mask", true);
  132. $("#dialogBackground").show();
  133. }else {
  134. //add a task to task bar
  135. if(op.minable) $.taskBar.addDialog(dlgid,title);
  136. }
  137. },
  138. /**
  139. * 切换当前层
  140. * @param {Object} dialog
  141. */
  142. switchDialog:function(dialog) {
  143. var index = $(dialog).css("zIndex");
  144. $.pdialog.attachShadow(dialog);
  145. if($.pdialog._current) {
  146. var cindex = $($.pdialog._current).css("zIndex");
  147. $($.pdialog._current).css("zIndex", index);
  148. $(dialog).css("zIndex", cindex);
  149. $("div.shadow").css("zIndex", cindex - 1);
  150. $.pdialog._current = dialog;
  151. }
  152. $.taskBar.switchTask(dialog.data("id"));
  153. },
  154. /**
  155. * 给当前层附上阴隐层
  156. * @param {Object} dialog
  157. */
  158. attachShadow:function(dialog) {
  159. var shadow = $("div.shadow");
  160. if(shadow.is(":hidden")) shadow.show();
  161. shadow.css({
  162. top: parseInt($(dialog)[0].style.top) - 2,
  163. left: parseInt($(dialog)[0].style.left) - 4,
  164. height: parseInt($(dialog).height()) + 8,
  165. width: parseInt($(dialog).width()) + 8,
  166. zIndex:parseInt($(dialog).css("zIndex")) - 1
  167. });
  168. $(".shadow_c", shadow).children().andSelf().each(function(){
  169. $(this).css("height", $(dialog).outerHeight() - 4);
  170. });
  171. },
  172. _init:function(dialog, options) {
  173. var op = $.extend({}, this._op, options);
  174. var height = op.height>op.minH?op.height:op.minH;
  175. var width = op.width>op.minW?op.width:op.minW;
  176. if(isNaN(dialog.height()) || dialog.height() < height){
  177. $(dialog).height(height+"px");
  178. $(".dialogContent",dialog).height(height - $(".dialogHeader", dialog).outerHeight() - $(".dialogFooter", dialog).outerHeight() - 6);
  179. }
  180. if(isNaN(dialog.css("width")) || dialog.width() < width) {
  181. $(dialog).width(width+"px");
  182. }
  183. var iTop = ($(window).height()-dialog.height())/2;
  184. dialog.css({
  185. left: ($(window).width()-dialog.width())/2,
  186. top: iTop > 0 ? iTop : 0
  187. });
  188. },
  189. /**
  190. * 初始化半透明层
  191. * @param {Object} resizable
  192. * @param {Object} dialog
  193. * @param {Object} target
  194. */
  195. initResize:function(resizable, dialog,target) {
  196. $("body").css("cursor", target + "-resize");
  197. resizable.css({
  198. top: $(dialog).css("top"),
  199. left: $(dialog).css("left"),
  200. height:$(dialog).css("height"),
  201. width:$(dialog).css("width")
  202. });
  203. resizable.show();
  204. },
  205. /**
  206. * 改变阴隐层
  207. * @param {Object} target
  208. * @param {Object} options
  209. */
  210. repaint:function(target,options){
  211. var shadow = $("div.shadow");
  212. if(target != "w" && target != "e") {
  213. shadow.css("height", shadow.outerHeight() + options.tmove);
  214. $(".shadow_c", shadow).children().andSelf().each(function(){
  215. $(this).css("height", $(this).outerHeight() + options.tmove);
  216. });
  217. }
  218. if(target == "n" || target =="nw" || target == "ne") {
  219. shadow.css("top", options.otop - 2);
  220. }
  221. if(options.owidth && (target != "n" || target != "s")) {
  222. shadow.css("width", options.owidth + 8);
  223. }
  224. if(target.indexOf("w") >= 0) {
  225. shadow.css("left", options.oleft - 4);
  226. }
  227. },
  228. /**
  229. * 改变左右拖动层的高度
  230. * @param {Object} target
  231. * @param {Object} tmove
  232. * @param {Object} dialog
  233. */
  234. resizeTool:function(target, tmove, dialog) {
  235. $("div[class^='resizable']", dialog).filter(function(){
  236. return $(this).attr("tar") == 'w' || $(this).attr("tar") == 'e';
  237. }).each(function(){
  238. $(this).css("height", $(this).outerHeight() + tmove);
  239. });
  240. },
  241. /**
  242. * 改变原始层的大小
  243. * @param {Object} obj
  244. * @param {Object} dialog
  245. * @param {Object} target
  246. */
  247. resizeDialog:function(obj, dialog, target) {
  248. var oleft = parseInt(obj.style.left);
  249. var otop = parseInt(obj.style.top);
  250. var height = parseInt(obj.style.height);
  251. var width = parseInt(obj.style.width);
  252. if(target == "n" || target == "nw") {
  253. tmove = parseInt($(dialog).css("top")) - otop;
  254. } else {
  255. tmove = height - parseInt($(dialog).css("height"));
  256. }
  257. $(dialog).css({left:oleft,width:width,top:otop,height:height});
  258. $(".dialogContent", dialog).css("width", (width-12) + "px");
  259. $(".pageContent", dialog).css("width", (width-14) + "px");
  260. if (target != "w" && target != "e") {
  261. var content = $(".dialogContent", dialog);
  262. content.css({height:height - $(".dialogHeader", dialog).outerHeight() - $(".dialogFooter", dialog).outerHeight() - 6});
  263. content.find("[layoutH]").layoutH(content);
  264. $.pdialog.resizeTool(target, tmove, dialog);
  265. }
  266. $.pdialog.repaint(target, {oleft:oleft,otop: otop,tmove: tmove,owidth:width});
  267. $(window).trigger(DWZ.eventType.resizeGrid);
  268. },
  269. close:function(dialog) {
  270. if(typeof dialog == 'string') dialog = $("body").data(dialog);
  271. var close = dialog.data("close");
  272. var go = true;
  273. if(close && $.isFunction(close)) {
  274. var param = dialog.data("param");
  275. if(param && param != ""){
  276. param = DWZ.jsonEval(param);
  277. go = close(param);
  278. } else {
  279. go = close();
  280. }
  281. if(!go) return;
  282. }
  283. $(dialog).hide();
  284. $("div.shadow").hide();
  285. if($(dialog).data("mask")){
  286. $("#dialogBackground").hide();
  287. } else{
  288. if ($(dialog).data("id")) $.taskBar.closeDialog($(dialog).data("id"));
  289. }
  290. $("body").removeData($(dialog).data("id"));
  291. $(dialog).trigger(DWZ.eventType.pageClear).remove();
  292. },
  293. closeCurrent:function(){
  294. this.close($.pdialog._current);
  295. },
  296. checkTimeout:function(){
  297. var $conetnt = $(".dialogContent", $.pdialog._current);
  298. var json = DWZ.jsonEval($conetnt.html());
  299. if (json && json[DWZ.keys.statusCode] == DWZ.statusCode.timeout) this.closeCurrent();
  300. },
  301. maxsize:function(dialog) {
  302. $(dialog).data("original",{
  303. top:$(dialog).css("top"),
  304. left:$(dialog).css("left"),
  305. width:$(dialog).css("width"),
  306. height:$(dialog).css("height")
  307. });
  308. $("a.maximize",dialog).hide();
  309. $("a.restore",dialog).show();
  310. var iContentW = $(window).width();
  311. var iContentH = $(window).height() - 34;
  312. $(dialog).css({top:"0px",left:"0px",width:iContentW+"px",height:iContentH+"px"});
  313. $.pdialog._resizeContent(dialog,iContentW,iContentH);
  314. },
  315. restore:function(dialog) {
  316. var original = $(dialog).data("original");
  317. var dwidth = parseInt(original.width);
  318. var dheight = parseInt(original.height);
  319. $(dialog).css({
  320. top:original.top,
  321. left:original.left,
  322. width:dwidth,
  323. height:dheight
  324. });
  325. $.pdialog._resizeContent(dialog,dwidth,dheight);
  326. $("a.maximize",dialog).show();
  327. $("a.restore",dialog).hide();
  328. $.pdialog.attachShadow(dialog);
  329. },
  330. minimize:function(dialog){
  331. $(dialog).hide();
  332. $("div.shadow").hide();
  333. var task = $.taskBar.getTask($(dialog).data("id"));
  334. $(".resizable").css({
  335. top: $(dialog).css("top"),
  336. left: $(dialog).css("left"),
  337. height:$(dialog).css("height"),
  338. width:$(dialog).css("width")
  339. }).show().animate({top:$(window).height()-60,left:task.position().left,width:task.outerWidth(),height:task.outerHeight()},250,function(){
  340. $(this).hide();
  341. $.taskBar.inactive($(dialog).data("id"));
  342. });
  343. },
  344. _resizeContent:function(dialog,width,height) {
  345. var content = $(".dialogContent", dialog);
  346. content.css({width:(width-12) + "px",height:height - $(".dialogHeader", dialog).outerHeight() - $(".dialogFooter", dialog).outerHeight() - 6});
  347. content.find("[layoutH]").layoutH(content);
  348. $(".pageContent", dialog).css("width", (width-14) + "px");
  349. $(window).trigger(DWZ.eventType.resizeGrid);
  350. }
  351. };
  352. })(jQuery);