在次封装easyui 的window插件，便于简化操作
插件代码：
$.fn.hWindow = function(options){
var defaults = {
width: 500, //宽度
height: 400, //高度
iconCls: \’\’, //图标class
collapsible: false, //折叠
minimizable: false, //最小化
maximizable: false, //最大化
resizable: false, //改变窗口大小
title: \’窗口标题\’, //窗口标题
modal: true, //模态
submit: function () {
alert(\’写入执行的代码。\’);
},
html: \’\’
}
var options = $.extend(defaults,options);
var html = options.html;
$(\’#w\’).window({title:options.title,width:options.width,height:options.height,content:buildWindowContent(html,options.submit),
collapsible:options.collapsible,minimizable:options.minimizable,maximizable:options.maximizable,
modal:options.modal,iconCls:options.iconCls
}).window(\’open\’);
function buildWindowContent(contentHTML,fn)
{
var centerDIV = $(\’<div region=”center” border=”false” style=”padding:5px;”></div>\’).html(contentHTML);
.append(centerDIV)
.append(\’<div region=”south” border=”false” style=”padding-top:5px;height:40px; overflow:hidden; text-align:center;background:#fafafa;border-top:#eee 1px solid;”> <a iconCls=”icon-ok”>确定</a><a iconCls=”icon-cancel”>取消</a></div>\’)
.appendTo($(\’#w\’).empty())
.layout();
$(\’#w\’).window(\’close\’);
});
}
var defaults = {
width: 500, //宽度
height: 400, //高度
iconCls: \’\’, //图标class
collapsible: false, //折叠
minimizable: false, //最小化
maximizable: false, //最大化
resizable: false, //改变窗口大小
title: \’窗口标题\’, //窗口标题
modal: true, //模态
submit: function () {
alert(\’写入执行的代码。\’);
},
html: \’\’
}
var options = $.extend(defaults,options);
var html = options.html;
$(\’#w\’).window({title:options.title,width:options.width,height:options.height,content:buildWindowContent(html,options.submit),
collapsible:options.collapsible,minimizable:options.minimizable,maximizable:options.maximizable,
modal:options.modal,iconCls:options.iconCls
}).window(\’open\’);
function buildWindowContent(contentHTML,fn)
{
var centerDIV = $(\’<div region=”center” border=”false” style=”padding:5px;”></div>\’).html(contentHTML);
$(
\’<div class=”easyui-layout” fit=”true”></div>\’).append(centerDIV)
.append(\’<div region=”south” border=”false” style=”padding-top:5px;height:40px; overflow:hidden; text-align:center;background:#fafafa;border-top:#eee 1px solid;”> <a iconCls=”icon-ok”>确定</a><a iconCls=”icon-cancel”>取消</a></div>\’)
.appendTo($(\’#w\’).empty())
.layout();
$(
\’.easyui-layout a[iconCls]\’).linkbutton();$(
\’a[iconCls=”icon-cancel”]\’).click(function(){$(\’#w\’).window(\’close\’);
});
$(
\’a[iconCls=”icon-ok”]\’).unbind(\’click\’).click(fn);}
}
可以将上面的代码保存到一个JS文件中，便于以后使用时直接引入即可，我在例子将此代码保存为 jQuery-easyui-window-expand.js
需要引入css和js 文件：
<link rel=”stylesheet” type=”text/css” href=”../themes/default/easyui.css”>
<link rel=”stylesheet” type=”text/css” href=”../themes/icon.css”>
<script type=”text/javascript” src=”../jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”../jquery.easyui.min.js”></script>
<script type=”text/javascript” src=”jQuery-easyui-window-expand.js”></script>
<link rel=”stylesheet” type=”text/css” href=”../themes/icon.css”>
<script type=”text/javascript” src=”../jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”../jquery.easyui.min.js”></script>
<script type=”text/javascript” src=”jQuery-easyui-window-expand.js”></script>
HTML：
<input type=”button” value=”新窗口” id=”btnOpen” >
<input type=”button” value=”新窗口1″ id=”btnOpen1″ >
<input type=”button” value=”新窗口2″ id=”btnOpen2″ >
<!–用于弹出窗口的DIV–>
<div id=”w” ></div>
<input type=”button” value=”新窗口1″ id=”btnOpen1″ >
<input type=”button” value=”新窗口2″ id=”btnOpen2″ >
<!–用于弹出窗口的DIV–>
<div id=”w” ></div>
JS调用：
$(\’#w\’).hWindow();
完整代码：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> New Document </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=”疯狂秀才”>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<link rel=”stylesheet” type=”text/css” href=”../themes/default/easyui.css”>
<link rel=”stylesheet” type=”text/css” href=”../themes/icon.css”>
<script type=”text/javascript” src=”../jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”../jquery.easyui.min.js”></script>
<script type=”text/javascript” src=”jQuery-easyui-window-expand.js”></script>
<script type=”text/javascript”>
$(function(){
$(\’#btnOpen\’).click(function(){
var html = \’<input type=”text” id=”text1″ name=””>\’;
var fn = function(){
alert($(\’#text1\’).val());
}
$(\’#w\’).hWindow({html:html,submit:fn});
});
var html = \’<input type=”text” id=”text1″ name=””><input id=”btn1″ type=”button” value=”提交” onclick=””>\’;
var fn = function(){
alert(\’第二个窗口\’);
}
$(\’#w\’).hWindow({html:html,title:\’第二个窗口\’,submit:fn});
alert($(this).prev().val());
});
});
var html = \’<textarea name=”” rows=”” cols=””></textarea><input type=”checkbox” name=””>\’;
var fn = function(){
alert(\’第三个窗口\’);
}
$(\’#w\’).hWindow({iconCls:\’icon-save\’,html:html,title:\’第三个窗口\’,submit:fn});
});
})
</script>
</head>
<body>
<input type=”button” value=”新窗口” id=”btnOpen” >
<input type=”button” value=”新窗口1″ id=”btnOpen1″ >
<input type=”button” value=”新窗口2″ id=”btnOpen2″ >
<div id=”w” ></div>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=”疯狂秀才”>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<link rel=”stylesheet” type=”text/css” href=”../themes/default/easyui.css”>
<link rel=”stylesheet” type=”text/css” href=”../themes/icon.css”>
<script type=”text/javascript” src=”../jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”../jquery.easyui.min.js”></script>
<script type=”text/javascript” src=”jQuery-easyui-window-expand.js”></script>
<script type=”text/javascript”>
$(function(){
$(\’#btnOpen\’).click(function(){
var html = \’<input type=”text” id=”text1″ name=””>\’;
var fn = function(){
alert($(\’#text1\’).val());
}
$(\’#w\’).hWindow({html:html,submit:fn});
});
$(
\’#btnOpen1\’).click(function(){var html = \’<input type=”text” id=”text1″ name=””><input id=”btn1″ type=”button” value=”提交” onclick=””>\’;
var fn = function(){
alert(\’第二个窗口\’);
}
$(\’#w\’).hWindow({html:html,title:\’第二个窗口\’,submit:fn});
$(
\’#btn1\’).click(function(){alert($(this).prev().val());
});
});
$(
\’#btnOpen2\’).click(function(){var html = \’<textarea name=”” rows=”” cols=””></textarea><input type=”checkbox” name=””>\’;
var fn = function(){
alert(\’第三个窗口\’);
}
$(\’#w\’).hWindow({iconCls:\’icon-save\’,html:html,title:\’第三个窗口\’,submit:fn});
});
})
</script>
</head>
<body>
<input type=”button” value=”新窗口” id=”btnOpen” >
<input type=”button” value=”新窗口1″ id=”btnOpen1″ >
<input type=”button” value=”新窗口2″ id=”btnOpen2″ >
<div id=”w” ></div>
</body>
</html>
版权声明：本文为hxling原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。