插件代码:
$.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);
$( ' <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 = {
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});
});
$( ' #btnOpen1 ' ).click( function (){
var html = ' <input type="text" id="text1" name=""><input id="btn1" type="button" value="提交" οnclick=""> ' ;
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="提交" οnclick=""> ' ;
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 >