EasyUi的使用与代码编写(一)

EasyUi的使用与代码编写(一)

EasyUI下载

　　EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jQuery EasyUI 1.4.1

　　

　　下载完成之后，得到压缩包，解压后，得到一个【jquery-easyui-1.4.1】文件夹，里面有如下图所示的文件：

　　

 

EasyUI入门

引入必要的js和css样式文件

　　要想在页面中使用EasyUI，那么首先要做的就是在页面中引入必要js和css样式文件，以在jsp文件中使用EasyUI为例，文件引入的顺序如下所示

在jsp文件中引用了这些文件之后，就可以使用EasyUI了。

 

EasyUI使用范例

　　新建一个JavaWeb工程，然后将jquery-easyui-1.4.1加入到工程中，将jquery-easyui-1.4.1文件夹中一些不必要的文件删掉，只保留必要的就可以了，如下图所示：

　　

　　新创建一个01.jsp页面，在01.jsp页面中使用EasyUI，代码如下：

 
 
   
     EasyUI入门——创建EasyUI的Dialog
   
   
   
   
   
   
   
   
   
   
   
   
       $(function(){
           //console.info($('#dd2'));
           /*使用JavaScript动态创建EasyUI的Dialog的步骤：
           1、定义一个div，并给div指定一个id
          2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
           */
           $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
           //使用自定义参数创建EasyUI的Dialog
           $('#dd3').dialog({
               title: '使用JavaScript创建的Dialog',
               width: 400,
               height: 200,
               closed: false,
               cache: false,
               modal: true
           });
       });
   
   
   
   
   
       
     

         Hello World!
     
     
Dialog Content
     
Dialog Content
   
 

　01.jsp运行结果如下：

　　

　　以上就是关于EasyUI的简单入门

 

easyLoader的分析与使用

　使用脚本库总要加载一大堆的样式表和脚本文件，在easyui 中，除了可以使用通常的方式加载之外，还提供了使用 easyloader 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢？

1. 你觉得一次性导入 easyui 的核心 min js 和 css 太大
2. 你只用到 easyui 的其中几个组件
3. 你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。

　　如果你有以上三中情况，那么推荐你使用easyLoader。它可以帮你解决这些问题。

　　easyloader 用来帮助我们自动加载所需的脚本文件和样式文件，这样，我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本，easyloader 就可以帮助我们分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成 easyui的控件。

　　下面我们，以使用messager和dialog模块为例，使用easyloader加载所需的模块。

　　我们的页面可以简单的仅仅写入下面的内容。注意，并不需要通常的样式表和一大堆的脚本引用。

 
 
 
   
     EasyUI入门——EasyUI的easyloader的使用
   
   
   
   
   
   
       $(function(){
           //使用easyloader加载dialog模块使用到的相关js和css样式
           easyloader.load('dialog',function(){
               /*使用JavaScript动态创建EasyUI的Dialog的步骤：
                 1、定义一个div，并给div指定一个id
                 2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
                 */
                 //使用自定义参数创建EasyUI的Dialog
                 $('#dd2').dialog({
                     title: '使用JavaScript创建的Dialog',
                     width: 400,
                     height: 200,
                     closed: false,
                     cache: false,
                     modal: true
                 });
           });
           
           easyloader.locale = "zh_CN";
           //easyloader.load 还有一个别名 using 定义在 window 对象上
           //使用easyloader加载messager模块使用到的相关js和css样式         using("messager", function () {
             alert("加载成功！");
             $("#btnAlert").click(function () {
                 $.messager.alert('Warning', 'The warning message');
             });
         });
       });
   
   
   
   
   
       
     

         Hello World!
     
     
Dialog Content
     弹出提示框
   
 

　注意看！只有 jquery 的脚本和 easyloader 的脚本，完全没有一大堆的样式和其他脚本文件。

　　页面运行效果如下：

　　

　　load 用来使用代码来说明需要加载的模块，这是在 easyloader 中定义的一个函数，函数的第一个参数为准备加载的模块名称，第二个参数为加载成功之后的回调函数。这里用来提示已经加载成功。

　　load 加载的模块有两种格式，即可以是一个字符串表示的单个模块，也可以是一个字符串的数组，同时加载多个模块。

 //name有两种，一种是string ,一种是string array,这样一次可以加载多个plugin,都是调用add方法进行添加  
 if (typeof name == 'string') {
     add(name);
 } else {
     for (var i = 0; i < name.length; i++) {
         add(name[i]);
     }
 }

　easyloader.load 还有一个别名 using 定义在 window对象上，如下所示：

window.using = easyloader.load; 

　所以，加载的代码也可以这样写。

 using("messager", function () {
     alert("加载成功！");
 });

　　加载成功之后，我们就可以在代码中使用已经加载的模块了。

　　页面中还使用 class 说明了一个按钮，这里使用了 class="easyui-linkbutton"，easyloader 还可以帮助我们解析元素中的特殊类名，直接就在页面中使用过的模块。

　　easyloader 会在它所在文件夹中，寻找 plugins 子文件夹中的脚本，和 themes 文件夹中的样式表。所以需要保证文件保存在正确的位置。不过，easyloader 还提供了一个 base 属性，用来指定寻找插件和脚本的起点。

 // jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变  
 base:'.', 

　除了 base , 还有几个重要的属性

 base:'.',//该属性是为了加载js,记录文件夹路径的  
 theme:'default', //默认主题  
 css:true,    
 locale:null, 

　　比如，希望使用中文语言包，则可以如下使用。你会看到提示框的按钮中的文字已经从 Ok 转换为了 "确定"。

 easyloader.locale = "zh_CN";
 using("messager", function () {
     alert("加载成功！");
 });

　　以上就是关于easyloader分析与使用。

 

easyLoader源码分析

　　声明：这一篇文章是转载过来的，转载地址忘记了，原作者如果看到了，希望能够告知一声，我好加上去！

　　easyloader模块是用来加载jquery easyui的js和css文件的，而且它可以分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成easyui的控件。

先看Demo1例子，再分析源代码。

 
 
   
     easyloader范例
     
   
   
   
   
   
   
   
       

         easyloader会自动解析这个div，因为class属性中带有easyui开头的类！
     
   
 

　运行结果如下所示：

　　

easyloader源码分析

  1 /**
  2  * easyloader - jQuery EasyUI
  3  * 
  4  * Licensed under the GPL:
  5  *   http://www.gnu.org/licenses/gpl.txt
  6  *
  7  * Copyright 2010 stworthy [ stworthy@gmail.com ] 
  8  * 
  9  */
 10 (function(){
 11     // 模块文件定义
 12     var modules = {
 13         draggable:{
 14             js:'jquery.draggable.js'
 15         },
 16         droppable:{
 17             js:'jquery.droppable.js'
 18         },
 19         resizable:{
 20             js:'jquery.resizable.js'
 21         },
 22         linkbutton:{
 23             js:'jquery.linkbutton.js',
 24             css:'linkbutton.css'
 25         },
 26         pagination:{
 27             js:'jquery.pagination.js',
 28             css:'pagination.css',
 29             dependencies:['linkbutton']
 30         },
 31         datagrid:{
 32             js:'jquery.datagrid.js',
 33             css:'datagrid.css',
 34             dependencies:['panel','resizable','linkbutton','pagination']
 35         },
 36         treegrid:{
 37             js:'jquery.treegrid.js',
 38             css:'tree.css',
 39             dependencies:['datagrid']
 40         },
 41         panel: {
 42             js:'jquery.panel.js',
 43             css:'panel.css'
 44         },
 45         window:{
 46             js:'jquery.window.js',
 47             css:'window.css',
 48             dependencies:['resizable','draggable','panel']
 49         },
 50         dialog:{
 51             js:'jquery.dialog.js',
 52             css:'dialog.css',
 53             dependencies:['linkbutton','window']
 54         },
 55         messager:{
 56             js:'jquery.messager.js',
 57             css:'messager.css',
 58             dependencies:['linkbutton','window']
 59         },
 60         layout:{
 61             js:'jquery.layout.js',
 62             css:'layout.css',
 63             dependencies:['resizable','panel']
 64         },
 65         form:{
 66             js:'jquery.form.js'
 67         },
 68         menu:{
 69             js:'jquery.menu.js',
 70             css:'menu.css'
 71         },
 72         tabs:{
 73             js:'jquery.tabs.js',
 74             css:'tabs.css',
 75             dependencies:['panel','linkbutton']
 76         },
 77         splitbutton:{
 78             js:'jquery.splitbutton.js',
 79             css:'splitbutton.css',
 80             dependencies:['linkbutton','menu']
 81         },
 82         menubutton:{
 83             js:'jquery.menubutton.js',
 84             css:'menubutton.css',
 85             dependencies:['linkbutton','menu']
 86         },
 87         accordion:{
 88             js:'jquery.accordion.js',
 89             css:'accordion.css',
 90             dependencies:['panel']
 91         },
 92         calendar:{
 93             js:'jquery.calendar.js',
 94             css:'calendar.css'
 95         },
 96         combo:{
 97             js:'jquery.combo.js',
 98             css:'combo.css',
 99             dependencies:['panel','validatebox']
100         },
101         combobox:{
102             js:'jquery.combobox.js',
103             css:'combobox.css',
104             dependencies:['combo']
105         },
106         combotree:{
107             js:'jquery.combotree.js',
108             dependencies:['combo','tree']
109         },
110         combogrid:{
111             js:'jquery.combogrid.js',
112             dependencies:['combo','datagrid']
113         },
114         validatebox:{
115             js:'jquery.validatebox.js',
116             css:'validatebox.css'
117         },
118         numberbox:{
119             js:'jquery.numberbox.js',
120             dependencies:['validatebox']
121         },
122         spinner:{
123             js:'jquery.spinner.js',
124             css:'spinner.css',
125             dependencies:['validatebox']
126         },
127         numberspinner:{
128             js:'jquery.numberspinner.js',
129             dependencies:['spinner','numberbox']
130         },
131         timespinner:{
132             js:'jquery.timespinner.js',
133             dependencies:['spinner']
134         },
135         tree:{
136             js:'jquery.tree.js',
137             css:'tree.css',
138             dependencies:['draggable','droppable']
139         },
140         datebox:{
141             js:'jquery.datebox.js',
142             css:'datebox.css',
143             dependencies:['calendar','validatebox']
144         },
145         parser:{
146             js:'jquery.parser.js'
147         }
148     };
149     
150     // 国际化资源文件
151     var locales = {
152         'af':'easyui-lang-af.js',
153         'bg':'easyui-lang-bg.js',
154         'ca':'easyui-lang-ca.js',
155         'cs':'easyui-lang-cs.js',
156         'da':'easyui-lang-da.js',
157         'de':'easyui-lang-de.js',
158         'en':'easyui-lang-en.js',
159         'fr':'easyui-lang-fr.js',
160         'nl':'easyui-lang-nl.js',
161         'zh_CN':'easyui-lang-zh_CN.js',
162         'zh_TW':'easyui-lang-zh_TW.js'
163     };
164     
165     // 加载队列
166     var queues = {};
167     
168     /**
169      * 加载js文件函数，过程就是动态创建一个script标签，然后添加到head标签中去。
170      * 有一个问题是监听了script标签的两个事件函数，一个是onload，另一个是onreadystatechange，这个数要是针对IE和非IE浏览器准备的
171      * 万恶的IE浏览器！！！
172      */
173     function loadJs(url, callback){
174         var done = false;
175         var script = document.createElement('script');
176         script.type = 'text/javascript';
177         script.language = 'javascript';
178         script.src = url;
179         script.onload = script.onreadystatechange = function(){
180             if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')){
181                 done = true;
182                 script.onload = script.onreadystatechange = null;
183                 if (callback){
184                     callback.call(script);
185                 }
186             }
187         }
188         document.getElementsByTagName("head")[0].appendChild(script);
189     }
190     
191     /**
192      * 执行js文件。就是把js文件加载进来，再remove掉
193      * @param url js的url
194      * @callback 回调函数，执行完js时会调用这个函数
195      */
196     function runJs(url, callback){
197         loadJs(url, function(){
198             document.getElementsByTagName("head")[0].removeChild(this);
199             if (callback){
200                 callback();
201             }
202         });
203     }
204     
205     /**
206      * 加载css文件。和加载js文件一样，动态创建一个link标签，然后追加到head标签中去
207      * @param url css的url
208      * @param callback 回调函数，加载完成后调用此函数
209      */
210     function loadCss(url, callback){
211         var link = document.createElement('link');
212         link.rel = 'stylesheet';
213         link.type = 'text/css';
214         link.media = 'screen';
215         link.href = url;
216         document.getElementsByTagName('head')[0].appendChild(link);
217         if (callback){
218             callback.call(link);
219         }
220     }
221     
222     /**
223      * 加载单独的一个模块
224      */
225     function loadSingle(name, callback){
226         
227         // 加载队列存入该模块名，并表示状态为loading。
228         queues[name] = 'loading';
229         
230         // 根据模块名，取出该模块定义
231         var module = modules[name];
232         
233         // js加载状态
234         var jsStatus = 'loading';
235         
236         // css加载状态，从这里你就可以看出easyloader.css就是一个开关变量，控制是否加载模块相应的css文件
237         var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
238         
239         // 是css文件，就使用loadCss来加载之
240         if (easyloader.css && module['css']){
241             if (/^http/i.test(module['css'])){
242                 var url = module['css'];
243             } else {
244                 var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];
245             }
246             loadCss(url, function(){
247                 cssStatus = 'loaded';
248                 if (jsStatus == 'loaded' && cssStatus == 'loaded'){
249                     finish();
250                 }
251             });
252         }
253         
254         // 是js文件，就是用LoadJs来加载之
255         if (/^http/i.test(module['js'])){
256             var url = module['js'];
257         } else {
258             var url = easyloader.base + 'plugins/' + module['js'];
259         }
260         loadJs(url, function(){
261             jsStatus = 'loaded';
262             if (jsStatus == 'loaded' && cssStatus == 'loaded'){
263                 finish();
264             }
265         });
266         
267         // 最终调用finish函数，来结束加载。并触发onProgress函数，每加载成功一个模块，就调用一次onProgress
268         function finish(){
269             queues[name] = 'loaded';
270             easyloader.onProgress(name);
271             if (callback){
272                 callback();
273             }
274         }
275     }
276     
277     /**
278      * easyui模块加载函数
279      * @param name 模块名，可以是string，也可以是数组
280      * @param callback 回调函数，当加载结束后会调用此函数
281      */
282     function loadModule(name, callback){
283         
284         // 模块名，根据依赖关系，从前到后，依次排开
285         var mm = [];
286         
287         // 加载标识，当其值为true时，表示需要加载的模块已经加载好了
288         var doLoad = false;
289         
290         // 模块名支持两中，一种是string，一种是数组。这样就可以一次加载多个模块了
291         if (typeof name == 'string'){
292             // 是string的时候，调用add方法把模块名push到mm数组中去
293             add(name);
294         } else {
295             for(var i=0; i