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')"/>

 

posted @ 2014-02-27 22:05  未来动力  阅读(306)  评论(0编辑  收藏  举报