前言
扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。下载该插件翻译源码
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：qq 1364386878 对话框窗口
*/
(function ($) {
//包裹对话框窗口
function wrapDialog(target) {
var cp = document.createElement("div");
while (target.firstChild) {
cp.appendChild(target.firstChild);
}
target.appendChild(cp);
var contentPanel = $(cp);
contentPanel.attr("style", $(target).attr("style"));
$(target).removeAttr("style").css("overflow", "hidden");
contentPanel.panel({
border: false,
doSize: false,
bodyCls: "dialog-content"
});
return contentPanel;
};
//初始化
function init(jq) {
var options = $.data(jq, "dialog").options;
var contentPanel = $.data(jq, "dialog").contentPanel;
if (options.toolbar) {
if (typeof options.toolbar == "string") {
$(options.toolbar).addClass("dialog-toolbar").prependTo(jq);
$(options.toolbar).show();
} else {
$(jq).find("div.dialog-toolbar").remove();
var toolbar = $("<div class=\"dialog-toolbar\"><table cellspacing=\"0\" cellpadding=\"0\"><tr></tr></table></div>").prependTo(jq);
var tr = toolbar.find("tr");
for (var i = 0; i < options.toolbar.length; i++) {
var buttons = options.toolbar[i];
if (buttons == "-") {
$("<td><div class=\"dialog-tool-separator\"></div></td>").appendTo(tr);
} else {
var td = $("<td></td>").appendTo(tr);
var tool = $("<a href=\"javascript:void(0)\"></a>").appendTo(td);
tool[0].onclick = eval(buttons.handler || function () {
});
tool.linkbutton($.extend({}, buttons, { plain: true }));
}
}
}
} else {
$(jq).find("div.dialog-toolbar").remove();
}
if (options.buttons) {
if (typeof options.buttons == "string") {
$(options.buttons).addClass("dialog-button").appendTo(jq);
$(options.buttons).show();
} else {
$(jq).find("div.dialog-button").remove();
var _b = $("<div class=\"dialog-button\"></div>").appendTo(jq);
for (var i = 0; i < options.buttons.length; i++) {
var buttons = options.buttons[i];
var button = $("<a href=\"javascript:void(0)\"></a>").appendTo(_b);
if (buttons.handler) {
button[0].onclick = buttons.handler;
}
button.linkbutton(buttons);
}
}
} else {
$(jq).find("div.dialog-button").remove();
}
var href = options.href;
var content = options.content;
options.href = null;
options.content = null;
//渲染面板
contentPanel.panel({
closed: options.closed,
cache: options.cache,
href: href,
content: content,
onLoad: function () {
if (options.height == "auto") {
$(jq).window("resize");
}
options.onLoad.apply(jq, arguments);
}
});
$(jq).window($.extend({}, options, {
onOpen: function () {
if (contentPanel.panel("options").closed) {
contentPanel.panel("open");
}
if (options.onOpen) {
options.onOpen.call(jq);
}
},
onResize: function (width, height) {
var win = $(jq);
contentPanel.panel("panel").show();
contentPanel.panel("resize", {
width: win.width(),
height: (height == "auto") ? "auto" : win.height() - win.children("div.dialog-toolbar")._outerHeight() - win.children("div.dialog-button")._outerHeight()
});
if (options.onResize) {
options.onResize.call(jq, width, height);
}
}
}));
options.href = href;
options.content = content;
};
//刷新
function _refresh(jq, content) {
var contentPanel = $.data(jq, "dialog").contentPanel;
contentPanel.panel("refresh", content);
}; //实例化对话框
$.fn.dialog = function (target, parm) {
if (typeof target == "string") {
var method = $.fn.dialog.methods[target];
if (method) {
return method(this, parm);
} else {
return this.window(target, parm);
}
}
target = target || {};
return this.each(function () {
var dialog = $.data(this, "dialog");
if (dialog) {
$.extend(dialog.options, target);
} else {
$.data(this, "dialog", {
options: $.extend({},
$.fn.dialog.defaults,
$.fn.dialog.parseOptions(this), target),
contentPanel: wrapDialog(this)
});
}
init(this);
});
};
//默认方法
$.fn.dialog.methods = {
//返回属性对象
options: function (jq) {
var options = $.data(jq[0], "dialog").options;
var panelopts = jq.panel("options");
$.extend(options, {
closed: panelopts.closed,
collapsed: panelopts.collapsed,
minimized: panelopts.minimized,
maximized: panelopts.maximized
});
var contentPanel = $.data(jq[0], "dialog").contentPanel;
return options;
},
//返回外部对话框窗口对象
dialog: function (jq) {
return jq.window("window");
},
//刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性
refresh: function (jq, href) {
return jq.each(function () {
_refresh(this, href);
});
}
};
//解析器
$.fn.dialog.parseOptions = function (target) {
return $.extend({}, $.fn.window.parseOptions(target),
$.parser.parseOptions(target, ["toolbar", "buttons"]));
};
//默认属性 同时继承window的
$.fn.dialog.defaults = $.extend({},
$.fn.window.defaults,
{
title: "New Dialog",//对话框窗口标题文本
collapsible: false,//对话框窗口标题文本
minimizable: false,//对话框窗口标题文本
maximizable: false,//对话框窗口标题文本
resizable: false,//定义是否可以改变对话框窗口大小
//设置对话框窗口顶部工具栏，可用值有：
//1) 一个数组，每一个工具栏中的工具属性都和linkbutton相同。
//2) 一个选择器指定工具栏。
toolbar: null,
//对话框窗口底部按钮，可用值有：
//1) 一个数组，每一个按钮的属性都和linkbutton相同。
//2) 一个选择器指定按钮栏。
buttons: null
});
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Dialog - 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.linkbutton.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="../../plugins2/jquery.dialog.js"></script>
</head>
<body>
<h2>Basic Dialog</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click below button to open or close dialog.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div>
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
The dialog content.
</div>
</body>
</html>
插件效果
