插件代码:
$.fn.hWindow = function(options){
var defaults = {
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,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);
}
}
var defaults = {
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,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});
});
$('#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>
<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>