EasyUI组件（窗口组件）
注意首先要在title后面导入配置文件，前后顺序不能乱
<!-- 1.jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3. 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4.easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
一。messager
在$(function(){}的大括号了写。
1.messager.alert
红框分别代表：标题，内容，图标，
function是回调函数
2.confirm确认消息框
标题
消息内容
回调函数
当点击按钮关闭窗口时触发
点确定返回true
点取消返回false
function（r）{if(r){点确定之后执行的代码}}
$("#bt1").click(
function(){
//弹出确认对话框
$.messager.confirm("确认","小付确实是王八蛋吗？",
function(r){
if(r)
{
alert("确定删除王八蛋");
}
else
{
alert("取消删除王八蛋");
}
}
);
}
);
3.prompt 输入对话框
//输入对话框
$("#bt2").click(
function(){
$.messager.prompt("输入框","请输入姓名",
function(val){
if(val)
{
alert("姓名是"+val);
}
}
);
}
);
4.progress 进度消息框
//进度对话框
$("#bt3").click(
function(){
$.messager.progress(
{
title:"进度条",
msg:"能量加载中。。。",
text:"请稍后。。。",
interval:1000
}
);
}
);
5.show 气泡消息框
//气泡式
$("#bt4").click(
function(){
$.messager.show(
{
title:"消息",
msg:"消息内容",
//showType:"fade",
showSpeed:600,
width:400,
height:200,
timeout:5000
}
);
}
);
二.window
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 顺序不可以乱 -->
<!-- 1.jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3. 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4.easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//弹出对话框
$(function(){
//alert("前面的对话框,阻塞代码运行");
/*$.messager.alert("警告小付","说话注意点！非阻塞式对话框","warning",
function(){
//回调函数，当窗口点击确定被关闭时触发
alert("回调函数被触发");
});*/
//alert("后面的对话框");
$("#bt1").click(
function(){
//弹出确认对话框
$.messager.confirm("确认","小付确实是王八蛋吗？",
function(r){
if(r)
{
alert("确定删除王八蛋");
}
else
{
alert("取消删除王八蛋");
}
}
);
}
);
//输入对话框
$("#bt2").click(
function(){
$.messager.prompt("输入框","请输入姓名",
function(val){
if(val)
{
alert("姓名是"+val);
}
}
);
}
);
//进度对话框
$("#bt3").click(
function(){
$.messager.progress(
{
title:"进度条",
msg:"能量加载中。。。",
text:"请稍后。。。",
interval:1000
}
);
}
);
//气泡式
$("#bt4").click(
function(){
$.messager.show(
{
title:"消息",
msg:"消息内容",
//showType:"fade",
showSpeed:600,
width:400,
height:200,
timeout:5000
}
);
}
);
//打开窗口
$("#bt5").click(
function(){
//调用窗口的方法
$("#win1").window("open");
}
);
//关闭敞口
$("#bt6").click(
function(){
$("#win1").window("close");
}
);
//新建窗口
$("#bt7").click(
function(){
//新建窗口
$("#win2").window(
{
width:400,
height:200,
title:"窗口标题",
iconCls:"icon-save",
content:"新建窗口的内容：窗前明月光，"
}
);
}
);
//调整窗口大小
$("#bt8").click(
function(){
$("#win1").window("resize",
{
width:600,
height:400
}
);
}
);
//构造添加按钮
$("#lb2").linkbutton(
{
text:"添加",
iconCls:"icon-add",
width:80
}
);
$("#lb1").click(
function(){
alert("按钮被点击");
}
);
//打开窗口2
}
)
</script>
</head>
<body>
<button id="bt1">删除</button>
<br>
<button id="bt2">输入</button>
<br>
<button id="bt3">进度条</button>
<br>
<button id="bt4">气泡式</button>
<br><br>
<div id="win1" class="easyui-window" title="窗口1" style="width:400px;height: 200px"
data-options="collapsible:true,
closed:true,
modal:false">
黑暗凝聚灵魂，堕落方能自由。
</div>
<button id="bt5">打开窗口</button>
<br>
<button id="bt6">关闭窗口</button>
<br>
<button id="bt7">新建窗口</button><br>
<br>
<button id="bt8">调整窗口大小</button><br>
<div id="win2"></div>
<br>
<a id="lb1" href="#" class="easyui-linkbutton" style="width:80px"
data-options="iconCls:'icon-search',disabled:true">搜索</a>
<a id="lb2" href="#"></a>
<br>
<div id="dl1" class="easyui-dialog" title="窗口"
style="width:400px;height: 200px"
data-options="
toolbar:[
{
text:'添加',
iconCls:'icon-add',
handler:function(){alert('点击了添加按钮')}
},{
text:'保存',iconCls:'icon-save'
}
],
buttons:[
{text:'确定'},{text:'取消',handler:function(){$('#dl1').dialog('close')}}
]">
显示对话窗口
</div>
<br>
<br>
</body>
</html>
浙公网安备 33010602011771号