今天说说EasyUI的基本使用以及easyloader的使用：

EasyUI的基本使用

View Code

 1 <head>
 2     <title>EasyUI的基本使用</title>
 3     <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
 4     <!--easyui最全的样式包也可单独引用你想使用的样式包-->
 5     <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
 6     <!--easyui自带图片样式包，也可自行添加-->
 7     <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
 8     <!--我使用的是easyui 1.3.2，基于jquery-1.8.0-->
 9     <script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
10     <!--easyui的js包-->
11     <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
12     <!--easyui的中文语言包，默认是英文-->
13     <script type="text/javascript">
14         $(function () {
15             //第二种使用方法：
16             //使用js方式，使用JQuery选择器选择到要操作的div，然后添加各种样式等等
17             $("#dd").dialog({
18                  400,
19                 height: 200,
20                 modal: true,
21                 title: "我的第二个Dialog！",
22                 iconCls: 'icon-save'//easyui图片样式
23             });
24         });
25     </script>
26 </head>
27     <body>
28         <!--第二种使用方式：-->
29         <div id="dd">
30             我的第一个Dialog。
31         </div>
32         <!--第一种基本使用方式（以Dialog为例）： 直接观看在官网下载的包，里面的Demo，最新的EasyUI都是这种直接在Html标签中进行操作，想使用哪种样式的EasyUI就直接
33         class="easyui-dialog" easyui + ‘-’ + 框架名称，data-options中写你要选择的属性，属性在EasyUI的API中讲解的很详细，比如
34         model：true 是模式化，我就不一一说明了；-->
35         <div id="dd" class="easyui-dialog" title="My Dialog" style=" 400px; height: 200px;"
36              data-options="iconCls:'icon-save',resizable:true,modal:true">
37             我的第一个Dialog。
38         </div>
39     </body>
40 </html>

easyloader的使用

View Code

 1 <head>
 2     <title>EasyLoader使用方法</title>
 3     <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
 4     <script src="jquery-easyui-1.3.2/easyloader.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             // EasyLoader第二种使用方式： 还是加载延迟
 8             easyloader.load('dialog', function () {
 9                 $("#Div1").dialog({
10                      400,
11                     height: 200,
12                     modal: true,
13                     title: "我的第二个Dialog！",
14                     iconCls: 'icon-save'//easyui图片样式
15                 });
16             });
17 
18             // EasyLoader第三种使用方式： 还是加载延迟
19             using('dialog', function () {
20                 $("#Div1").dialog({
21                      400,
22                     height: 200,
23                     modal: true,
24                     title: "我的第二个Dialog！",
25                     iconCls: 'icon-save'//easyui图片样式
26                 });
27             });
28 
29             // EasyLoader第四种使用方式： 加载延迟更为严重了
30             // 定义多个框架，以数组形式添加
31             easyloader.load(['dialog', 'messager'], function () {
32                 $("#Div1").dialog({
33                      400,
34                     height: 200,
35                     modal: true,
36                     title: "我的第二个Dialog！",
37                     iconCls: 'icon-save'//easyui图片样式
38                 });
39                 $.messager.alert('Title', 'load ok');
40             });
41         });
42     </script>
43 </head>
44 <body>
45     <!--EasyLoader第一种使用方式： 
46     直接引入JQuery包和easyloader的js包；有人说这种方式很方便，流量少，但是我使用时发现有些许延迟；-->
47     <div id="dd" class="easyui-dialog" title="我的第三个Dialog" style=" 400px; height: 200px;"
48         data-options="iconCls:'icon-save',resizable:true,modal:true">
49         我的第一个Dialog。
50     </div>
51     <div id="Div1">
52         我的第一个Dialog。
53     </div>
54 </body>
55 </html>