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>
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>
