<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- EasyUI框架包 -->
<!-- 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('警告','警告消息！EasyUI非阻塞式对话框','warning',
//function(){
//回调函数，当窗口点击确定关闭时触发
// alert("回调函数被触发");
// }
//);
//alert("后面普通对话框，阻塞代码运行");
$("#bt1").click(
function()
{
//弹出确认对话框
$.messager.confirm("确认","想好没亲",
function(r)
{
if(r)
{
//执行删除
alert("删除成功");
}
else
{
alert("取消删除");
}
}
);
}
);
//输入对话框
$("#bt2").click(
function()
{
//输入对话框
$.messager.prompt("输入框","请输入内容",
function(r)
{
if(r)
{
alert("你输入的内容是："+r);
}
}
);
}
);
//进度对话框
$("#bt3").click(
function()
{
//进度条
$.messager.progress(
{
title:"进度条",
msg:"请稍后",
text:"正在加载",
interval:"100",
}
);
}
);
//气泡对话框
$("#bt4").click(
function()
{
$.messager.show(
{
title:"这位同学：",
msg:"别上网了，你妈叫你回家吃饭了",
timeout:5000,
height:200
}
);
}
);
////打开窗口
$("#bt5").click(
function()
{
//调用窗口的方法
$("#win1").window("open",{//open位方法名，{}内的表示以options的方式添加的属性样式
width:100,
height:400
} );
}
);
//关闭窗口
$("#bt6").click(
function()
{
$("#win1").window("close");
}
);
//js形式的窗口
$("#bt7").click(
function()
{
//新建窗口
$("#win2").window(
{
width:400,
height:300,
title:"窗口标题",
iconCls:"icon-save",
content:"显示的内容..................你好啊"
}
);
}
);
//调整窗口大小
$("#bt8").click(
function()
{
$("#win1").window("resize",{
width:500,
height:400
}
);
}
);
//构造按钮
$("#lb2").linkbutton(
{
text:"添加",
width:80,
iconCls:"icon-add"
}
);
$("#lb1").click(
function()
{
alert("按钮被点击");
}
);
//dialog对话窗口
$("#bt9").click(
function()
{
$("#dl2").dialog({
title:"窗口",
width:"400",
height:"200",
content:"你大爷，是你二爷",
toolbar:[{
text:"添加",
iconCls:"icon-add",
handler:function(){
alert("添加数据");
}
},
{
text:"取消",
iconCls:"icon-clear"
},
],
buttons:[
{
text:"确定"
},
{ text:"取消"
}
]
});
}
);
}
);
</script>
</head>
<body>
<button id="bt1">删除</button>
<button id="bt2">输入</button>
<button id="bt3">进度条</button>
<button id="bt4">气泡</button>
<br><br>
<div id="win1" class="easyui-window" type="窗口1" style="height:200px; width:400px;"
data-options="{collapsible:false,closed:true}"><!-- {}可有可没有 -->
窗口的内容
</div>
<button id="bt5">打开窗口</button>
<button id="bt6">关闭窗口</button>
<button id="bt7">新建窗口</button>
<div id="win2"></div>
<button id="bt8">调整窗口大小</button>
<button id="bt9">dialog对话框口</button>
<br><br>
<!-- date-options里面添加属性的东西 -->
<a id="lb1" href="#" class="easyui-linkbutton"
data-options="inconCls:'icon-search'"
style="width:80px"
>搜索</a>
<a id="lb2" href="#"></a>
<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'},{text:'保存',iconCls:'icon-delete'}],
buttons:[{text:'确定'},{text:'取消',handler:function(){$('#dl1').dialog({closed:true})}
}]
}">
测试对话窗口</div>
<div id="dl2">21231</div>
<!-- panel -->
<div id="pan1" class="easyui-panel" title="面板" style="width:400px;height:200px"
data-options="collapsible:true,href:'test.html'">这是一个面板</div>
</body>
</html>
