<!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的方式添加的属性样式 100, height:400 } ); } ); //关闭窗口 $("#bt6").click( function() { $("#win1").window("close"); } ); //js形式的窗口 $("#bt7").click( function() { //新建窗口 $("#win2").window( { 400, height:300, title:"窗口标题", iconCls:"icon-save", content:"显示的内容..................你好啊" } ); } ); //调整窗口大小 $("#bt8").click( function() { $("#win1").window("resize",{ 500, height:400 } ); } ); //构造按钮 $("#lb2").linkbutton( { text:"添加", 80, iconCls:"icon-add" } ); $("#lb1").click( function() { alert("按钮被点击"); } ); //dialog对话窗口 $("#bt9").click( function() { $("#dl2").dialog({ title:"窗口", "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; 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="80px" >搜索</a> <a id="lb2" href="#"></a> <div id="dl1" class="easyui-dialog" title="窗口" style="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="400px;height:200px" data-options="collapsible:true,href:'test.html'">这是一个面板</div> </body> </html>