下面简单说明下jquery easyui中窗口(window和dialog)的使用,两者之间用很多相同之处。
在编写js代码前需要引入jquery.js、jquery.easyui.js、easyui.css、icon.css包,另外为了解决中文引起的乱码问题还需引入easyui-lang-zh_CN.js.
javascript代码:
$("#window").window({
title:"this is title!!!", //窗口标题
width:600,
height:300,
collapsiable:true, //定义窗口是否折叠
minimizable:true, //是否显示最小化按钮
maximizable:true, //是否显示最大化按钮
closable:true, //是否显示关闭按钮
draggable:true, //是否可以拖拽
resiable:true, //窗口是否可调大小
closed:true, //窗口是否是关闭
shadow:true, //是否有阴影
inline:false, //如何放置窗口,true表示放在父容器里,false放在所有元素顶部
modal:true, //是否以模态形式显示窗口
});
//dialog中的其他属性与window中相同,另外比window多出toolbar(dialog上面的工具栏),buttons(dialog下面)
$("#dialog").dialog({
title:"this is dialog!",
toolbar:[{
iconCls:"icon-add",
text:"新增",
handler:function(){
alert("add");
}
},{
iconCls:"icon-edit",
text:"编辑",
handler:function(){
alert("edit");
}
}],
buttons:[{
iconCls:"icon-ok",
text:"OK"
},{
iconCls:"icon-cancel",
text:"CANCEL",
handler:function(){
$("#dialog").dialog("close");
}
}]
});
html代码:
<!-- 注:下面注释掉的div同样能实现,展示一个window的功能 -->
<!-- <div id="win" title="This is title"iconCls="icon-save" class="easyui-window"></div> -->
<div id="window"></div>
<div id="dialog" ></div>
初学juery,不当之处不可避免,欢迎指正。共同学习。