JQueryEasyUI学习笔记(二)

欢迎大家转载,转载请注明出处!

希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢!

今天说说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                 width: 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="width: 400px; height: 200px;"
36              data-options="iconCls:'icon-save',resizable:true,modal:true">
37             我的第一个Dialog。
38         </div>
39     </body>
40 </html>

 

 

 JQueryEasyUI学习笔记(二)_第1张图片

 

JQueryEasyUI学习笔记(二)_第2张图片

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


你可能感兴趣的:(JQueryEasyUI学习笔记(二))