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=" 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="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="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="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="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