JQueryEasyUI
1.dialog组件
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>test.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 7 <script src="js/jquery-1.9.1.js"></script> 8 <script src="js/jquery.easyui.min.js"></script> 9 <script src="locale/easyui-lang-zh_CN.js" charset=UTF-8"></script> 10 <link rel="stylesheet" href="themes/icon.css" /> 11 <link rel="stylesheet" href="themes/default/easyui.css" /> 12 </head> 13 14 <body> 15 <div id="dialog" title="My Dialog" style="width: 400px; height: 200px;"> 16 Dialog Content 17 </div> 18 </body> 19 20 <script type="text/javascript" charset="UTF-8"> 21 ...... 22 </script> 23 </html>
实现JQueryEasyUI方式多种
a.纯CSS实现：
前提是引入了 easyui.css 或者 dialog.css
1 <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px"> 2 The dialog content. 3 </div>
b.js方式实现
<div id="dlg" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px"> The dialog content. </div>
1 $(function() 2 { 3 //console.info($("#dlg")); 4 $("#dlg").dialog(); 5 6 //实现模式弹窗 7 //$("#dialog").dialog( 8 //{ 9 // modal: true 10 //}); 11 });
另外，利用css实现模式弹窗的方式
1 <div id="dlg" modal="true" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;
padding:10px"> 2 The dialog content. 3 </div>
2.easyloader组件
页面中引入 easyloader.js，可以根据需要加载js 和 css 文件
1 <script src="js/jquery-1.9.1.js"></script> 2 <script src="js/easyloader.js"></script>
3.panel的使用
1 <div id="panel" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" 2 data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> 3 <p>panel content.</p> 4 <p>panel content.</p> 5 </div>
panel api的使用方法
例如：点击按钮出现:open,关闭:close，销毁:destory panel
<input type="button" value="panel" onclick="$('#panel').panel('open')"/>
