企业级成熟web框架jQuery Easy UI的使用

一、初步认识

1、什么是jQuery Easy UI 

jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。

官方网站http://www.jeasyui.com

2、jQuery EasyUI有哪些特点

(1)、基于 jquery 用户界面插件的集合;

(2)、源代码加密、商业版付费

(3)、使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTML 标记来定义用户界面即可;

(4)、支持 HTML5

(5)、简单,但很强大,开发产品时可节省时间和资源;

(6)、支持拓展,可根据自己的需求拓展控件

3、是否兼容低版本IE ,本人使用的是1.3.6版本,不支持IE8及以下版本。

二、引入必要的文件:

引入 jQuery 核心库,这里采用的是 2.0

<script type="text/javascript" src="easyui/jquery.min.js"></script>

引入 jQuery EasyUI 核心库,这里采用的是 1.3.6

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

引入 EasyUI 中文提示信息

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

引入自己开发的 JS 文件

<script type="text/javascript" src="js/index.js"></script>

引入 EasyUI 核心 UI 文件 CSS

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

引入 EasyUI 图标文件

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

三、加载UI组件的方式:

1、使用class方式加载

使用 class 加载,格式为:easyui-组件名

<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">

内容部分

</div>

示例:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>jQuery Easy UI</title>  
  5. <meta charset="UTF-8" />  
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>  
  7. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>  
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  
  9. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />  
  10. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />  
  11. </head>  
  12. <body>  
  13. <div id="box">  
  14.     <div class="easyui-dialog" title="标题" style="width:400px;height:200px">  
  15.         内容部分      
  16.     </div>  
  17. </div>  
  18. </body>  
  19. </html>  

PS:使用了规定的格式就可以生成一个 UI 组件,这是由于 jQuery EasyUI 的一个解析器(Parser)的起到了作用。解析之后,从 Firebug 里面可以看到 

UI 组件变化后的HTML。

2、使用JS调用加载

$('#box').dialog();

示例:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>jQuery Easy UI</title>  
  5. <meta charset="UTF-8" />  
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>  
  7. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>  
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  
  9. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />  
  10. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />  
  11. <script>  
  12.     // 使用js调用加载的方式  
  13.     $(function(){  
  14.         $("#box").dialog();  
  15.     })  
  16. </script>  
  17. </head>  
  18. <body>  
  19.     <div  id="box"  title="标题" style="width:400px;height:200px">  
  20.         内容部分  
  21.     </div>  
  22. </body>  
  23. </html>  

PS:一般推荐使用第二种 JS 调用加载,因为一个 UI 组件有很多属性和方法,如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则,

第二种提高了代码的可读性。

3、使用easyload.js智能加载

//删除 jQuery EasyUI 的 JS 核心文件及 CSS,引入 easyloader.js 文件

<script type="text/javascript" src="easyui/easyloader.js"></script>

//JS 代码

easyloader.load('dialog', function () {

$('#box').dialog();

});

示例:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>jQuery Easy UI</title>  
  5. <meta charset="UTF-8" />  
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>  
  7. <script type="text/javascript" src="easyui/easyloader.js"></script>  
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  
  9. <script>  
  10.     //使用easyload.js智能加载(按需加载)  
  11.     $(function(){  
  12.         easyloader.load('dialog',function(){  
  13.             $("#box").dialog();  
  14.         })  
  15.     })  
  16. </script>  
  17. </head>  
  18. <body>  
  19.     <div  id="box"  title="标题" style="width:400px;height:200px">  
  20.         内容部分  
  21.     </div>  
  22. </body>  
  23. </html>  
四、Parser解析器使用场景及注意事项

parser,故名意思,就是解析器的意思,别看他只有那么几行代码,jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下,我们并用不到解

析器,本文主要讨论一下,什么情况下会用到它,如何使用。

1、自动调用parser:

我们之所以在页面中,只要书写相应的class,Easyui就能成功渲染页面,这是因为解析器在默认情况下,会在文档装载完成的时候($(document).ready)被调用

一次,而且是渲染整个页面。

2、手动调用parper:

当页面DOM已经装载完毕,我们通过JavaScript代码再去创建class属性为easyui相应值的节点的时候,那么该节点不会被渲染,因为parser只是在页面装载完的

时候渲染一下整个页面,而不会一直监视着整个页面。所以需要我们手动调用parser去渲染。

parser示例:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>parserDemo</title>  
  5. <meta charset="UTF-8" />  
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>  
  7. <script type="text/javascript" src="easyui/easyloader.js"></script>  
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  
  9. <script>  
  10.     $(function(){  
  11.         //为什么我们只用class属性的时候就能加载UI组件,因为页面在DOM装载完成后会自动执行一次$.parser.parse();  
  12.         $.parser.onComplete=function (){  
  13.             alert('DOM装载完毕,自动解析,完成');  
  14.         }  
  15.     })  
  16.   
  17.     function f (){  
  18.         /**  
  19.         在DOM加载之后手动指定class属性是不能够完成渲染的,因为parser只是在DOM装载完成  
  20.         后解析一次,不会一直监视着DOM页面的变化的,所以下面还要显式调用$.parser.parse();  
  21.         */  
  22.         $("#box").attr("class","easyui-dialog");  
  23.   
  24.         //$.parser.parse("#box"); 注意:这个是不好使的,因为parse()带参数的时候渲染的是JQ选择器指定元素的父类  
  25.         $.parser.parse(("#p_box"));  
  26.   
  27.         //它还有个回调函数  
  28.         $.parser.onComplete=function (){  
  29.             alert('手动渲染解析完成');  
  30.         }  
  31.     }  
  32. </script>  
  33. </head>  
  34. <body>  
  35.     <div id="p_box">  
  36.         <div id="box"  title="标题" style="width:400px;height:200px">  
  37.             内容部分  
  38.         </div>  
  39.     </div>  
  40.   
  41.     <input type="button" value="手动渲染" onclick="f()">  
  42. </body>  
  43. </html>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值