/*** jQuery EasyUI 1.3.2* *翻译：qq 1364386878*/
(function ($) {//设置面板大小和布局function _resize(jq, _position) {var opts = $.data(jq, "window").options;if (_position) {if (_position.width) {opts.width = _position.width;}if (_position.height) {opts.height = _position.height;}if (_position.left != null) {opts.left = _position.left;}if (_position.top != null) {opts.top = _position.top;}}$(jq).panel("resize", opts);};//移动窗口到新位置function _move(jq, options) {var window = $.data(jq, "window");if (options) {if (options.left != null) {window.options.left = options.left;}if (options.top != null) {window.options.top = options.top;}}$(jq).panel("move", window.options);if (window.shadow) {window.shadow.css({left: window.options.left,top: window.options.top});}};//仅水平居中窗口function _hcenter(jq, IsMove) {var win = $.data(jq, "window");var opts = win.options;var width = opts.width;if (isNaN(width)) {width = win.window._outerWidth();}if (opts.inline) {var _f = win.window.parent();opts.left = (_f.width() - width) / 2 + _f.scrollLeft();} else {opts.left = ($(window)._outerWidth() - width) / 2 + $(document).scrollLeft();}if (IsMove) {_move(jq);}};//仅垂直居中窗口function _vcenter(jq, IsMove) {var win = $.data(jq, "window");var opts = win.options;var height = opts.height;if (isNaN(height)) {height = win.window._outerHeight();}if (opts.inline) {var parentwin = win.window.parent();opts.top = (parentwin.height() - height) / 2 + parentwin.scrollTop();} else {opts.top = ($(window)._outerHeight() - height) / 2 + $(document).scrollTop();}if (IsMove) {_move(jq);}};//初始化function init(jq) {var winD = $.data(jq, "window");//渲染panelvar win = $(jq).panel($.extend({}, winD.options, {border: false,//定义是否显示面板边框doSize: true,//如果设置为true，在面板被创建的时候将重置大小和重新布局closed: true,//定义是否可以关闭窗口cls: "window",//定义是否可以关闭窗口headerCls: "window-header",//添加一个CSS类ID到面板头部bodyCls: "window-body " + (winD.options.noheader ? "window-body-noheader" : ""),//在面板销毁之前触发，返回false可以取消销毁操作onBeforeDestroy: function () {if (winD.options.onBeforeDestroy.call(jq) == false) {return false;}if (winD.shadow) {winD.shadow.remove();}if (winD.mask) {winD.mask.remove();}},//在面板关闭之后触发onClose: function () {if (winD.shadow) {winD.shadow.hide();}if (winD.mask) {winD.mask.hide();}winD.options.onClose.call(jq);},//在打开面板之后触发onOpen: function () {if (winD.mask) {winD.mask.css({ display: "block", zIndex: $.fn.window.defaults.zIndex++ });}if (winD.shadow) {winD.shadow.css({display: "block",zIndex: $.fn.window.defaults.zIndex++,left: winD.options.left,top: winD.options.top,width: winD.window._outerWidth(),height: winD.window._outerHeight()});}winD.window.css("z-index", $.fn.window.defaults.zIndex++);winD.options.onOpen.call(jq);},//在面板改变大小之后触发onResize: function (width, height) {var opts = $(this).panel("options");$.extend(winD.options, {width: opts.width,height: opts.height,left: opts.left,top: opts.top});if (winD.shadow) {winD.shadow.css({left: winD.options.left,top: winD.options.top,width: winD.window._outerWidth(),height: winD.window._outerHeight()});}winD.options.onResize.call(jq, width, height);},//在窗口最小化之后触发onMinimize: function () {if (winD.shadow) {winD.shadow.hide();}if (winD.mask) {winD.mask.hide();}winD.options.onMinimize.call(jq);},//在面板折叠之前触发，返回false可以终止折叠操作onBeforeCollapse: function () {if (winD.options.onBeforeCollapse.call(jq) == false) {return false;}if (winD.shadow) {winD.shadow.hide();}},//在面板展开之后触发onExpand: function () {if (winD.shadow) {winD.shadow.show();}winD.options.onExpand.call(jq);}}));winD.window = win.panel("panel");if (winD.mask) {winD.mask.remove();}if (winD.options.modal == true) {winD.mask = $("<div class=\"window-mask\"></div>").insertAfter(winD.window);winD.mask.css({width: (winD.options.inline ? winD.mask.parent().width() : compatMode().width),height: (winD.options.inline ? winD.mask.parent().height() : compatMode().height),display: "none"});}if (winD.shadow) {winD.shadow.remove();}if (winD.options.shadow == true) {winD.shadow = $("<div class=\"window-shadow\"></div>").insertAfter(winD.window);winD.shadow.css({ display: "none" });}if (winD.options.left == null) {_hcenter(jq);}if (winD.options.top == null) {_vcenter(jq);}_move(jq);if (winD.options.closed == false) {win.window("open");}};//设置属性function setProperties(jq) {var win = $.data(jq, "window");//设置组件拖动
        win.window.draggable({handle: ">div.panel-header>div.panel-title",disabled: win.options.draggable == false,onStartDrag: function (e) {if (win.mask) {win.mask.css("z-index", $.fn.window.defaults.zIndex++);}if (win.shadow) {win.shadow.css("z-index", $.fn.window.defaults.zIndex++);}win.window.css("z-index", $.fn.window.defaults.zIndex++);if (!win.proxy) {win.proxy = $("<div class=\"window-proxy\"></div>").insertAfter(win.window);}win.proxy.css({display: "none",zIndex: $.fn.window.defaults.zIndex++,left: e.data.left,top: e.data.top});win.proxy._outerWidth(win.window._outerWidth());win.proxy._outerHeight(win.window._outerHeight());setTimeout(function () {if (win.proxy) {win.proxy.show();}}, 500);},onDrag: function (e) {win.proxy.css({display: "block",left: e.data.left,top: e.data.top});return false;},onStopDrag: function (e) {win.options.left = e.data.left;win.options.top = e.data.top;$(jq).window("move");win.proxy.remove();win.proxy = null;}});//设置组件拉伸
        win.window.resizable({disabled: win.options.resizable == false, onStartResize: function (e) {win.pmask = $("<div class=\"window-proxy-mask\"></div>").insertAfter(win.window);win.pmask.css({zIndex: $.fn.window.defaults.zIndex++,left: e.data.left,top: e.data.top,width: win.window._outerWidth(),height: win.window._outerHeight()});if (!win.proxy) {win.proxy = $("<div class=\"window-proxy\"></div>").insertAfter(win.window);}win.proxy.css({zIndex: $.fn.window.defaults.zIndex++,left: e.data.left,top: e.data.top});win.proxy._outerWidth(e.data.width);win.proxy._outerHeight(e.data.height);}, onResize: function (e) {win.proxy.css({ left: e.data.left, top: e.data.top });win.proxy._outerWidth(e.data.width);win.proxy._outerHeight(e.data.height);return false;}, onStopResize: function (e) {$.extend(win.options, {left: e.data.left,top: e.data.top,width: e.data.width,height: e.data.height});_resize(jq);win.pmask.remove();win.pmask = null;win.proxy.remove();win.proxy = null;}});};// 判断当前浏览器采用的渲染方式(兼容目前流行的全部浏览器)function compatMode() {//BackCompat：标准兼容模式关闭。//CSS1Compat：标准兼容模式开启。//当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；//当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。//浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。if (document.compatMode == "BackCompat") {return { width: Math.max(document.body.scrollWidth, document.body.clientWidth), height: Math.max(document.body.scrollHeight, document.body.clientHeight) };} else {return { width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth), height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) };}};$(window).resize(function () {$("body>div.window-mask").css({width: $(window)._outerWidth(),height: $(window)._outerHeight()});setTimeout(function () {$("body>div.window-mask").css({// 判断当前浏览器采用的渲染方式
                width: compatMode().width,height: compatMode().height});}, 50);});//实例化组件$.fn.window = function (target, parm) {if (typeof target == "string") {var method = $.fn.window.methods[target];if (method) {return method(this, parm);} else {return this.panel(target, parm);}}target = target || {};return this.each(function () {var pwindow = $.data(this, "window");if (pwindow) {$.extend(pwindow.options, target);} else {pwindow = $.data(this, "window", {options: $.extend({},$.fn.window.defaults,$.fn.window.parseOptions(this),target)});if (!pwindow.options.inline) {document.body.appendChild(this);}}init(this);setProperties(this);});};//默认方法$.fn.window.methods = {//返回属性对象options: function (jq) {var opts = jq.panel("options");var options = $.data(jq[0], "window").options;return $.extend(options, {closed: opts.closed,collapsed: opts.collapsed,minimized: opts.minimized,maximized: opts.maximized});},//返回外部窗口对象window: function (jq) {return $.data(jq[0], "window").window;},//返回属性对象resize: function (jq, parm) {return jq.each(function () {_resize(this, parm);});},//移动面板到一个新位置move: function (jq, _position) {return jq.each(function () {_move(this, _position);});},//仅水平居中窗口hcenter: function (jq) {return jq.each(function () {_hcenter(this, true);});},//仅垂直居中窗口vcenter: function (jq) {return jq.each(function () {_vcenter(this, true);});},//将窗口绝对居中center: function (jq) {return jq.each(function () {_hcenter(this);_vcenter(this);_move(this);});}};//解析器配置$.fn.window.parseOptions = function (target) {return $.extend({}, $.fn.panel.parseOptions(target),$.parser.parseOptions(target,[{draggable: "boolean",resizable: "boolean",shadow: "boolean",modal: "boolean",inline: "boolean"}]));};//默认属性和事件$.fn.window.defaults = $.extend({},$.fn.panel.defaults,{zIndex: 9000,//窗口Z轴坐标draggable: true,//定义是否能够拖拽窗口resizable: true,//定义是否能够改变窗口大小shadow: true,//如果设置为true，在窗体显示的时候显示阴影modal: false,//定义是否将窗体显示为模式化窗口inline: false,//定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面title: "New Window",//窗口的标题文本collapsible: true,//定义是否显示可折叠按钮minimizable: true,//定义是否显示最小化按钮maximizable: true,//定义是否显示最大化按钮closable: true,//定义是否显示关闭按钮closed: false//定义是否可以关闭窗口
        });
})(jQuery);

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic Window - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery-1.8.0.min.js"></script><script src="../../plugins2/jquery.parser.js"></script><script src="../../plugins2/jquery.draggable.js"></script><script src="../../plugins2/jquery.resizable.js"></script><script src="../../plugins2/jquery.panel.js"></script><script src="../../plugins2/jquery.window.js"></script><!--  <script src="../../plugins/jquery.window.js"></script>-->
</head>
<body><h2>Basic Window</h2><div class="demo-info"><div class="demo-tip icon-tip"></div><div>Window can be dragged freely on screen.</div></div><div style="margin:10px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a></div><div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">The window content.</div>
</body>
</html>