JQueryEasyUI学习笔记（二）

猫性男孩 · 发表于 2013-3-27 17:19:34

欢迎大家转载，转载请注明出处！希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！今天说说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  5 <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" /> 6  7 <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script> 8  9 <script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>10 11 <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>12 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 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>

猫性男孩 · 发表于 2013-3-27 17:29:48

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    
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学习笔记（二）

站长推荐 /1