找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2680|回复: 1

[教程] 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     <!--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>










发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

 楼主| 发表于 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     <!--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>

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-3-29 18:46 , Processed in 0.048389 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表