JQuery EasyUI(2)

最新推荐文章于 2024-06-19 21:34:23 发布

Roger_CoderLife

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量140

点赞数

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

第二章：使用EasyUI

学习要点：

引入必要的文件
加载UI组件的方式
使用easyload.js智能加载
Parser解析器

一、引入必要的文件

//引入JQuery的核心库，这里采用的是2.0
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入JQuery EasyUI的核心库，这里采用的是1.8.3
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入JQuery 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"/>

ps:引入完毕后，我们就可以编写JQuery EasyUI代码了

二、加载UI组件的方式

加载UI组件有两种方式：1.使用class方式加载，2.使用JS调用加载，
//使用class加载，格式为：easyui-组件名

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
  </head>
  <body>
    <div id="box" class="easyui-dialog" style="width:400px;height:200px" title="标题">
        内容部分
    </div>
  </body>
</html>

ps:使用了规定的格式就可以生成一个UI组件，这是由于JQueryEasyUI的一个解析器（parser）的起到了作用，解析之后，
从Firebug里面可以看到UI组件变化后的HTML.

//使用JS调用加载

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

ps:一般推荐使用第二种JS调用加载，因为一个UI组件有很多属性和方法，如果使用class的用法将极大地不方便
并且根据JS和HTML分离的原则，第二种提高了代码的可读性。

三、使用easyload.js智能加载

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

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

//JS代码

easyloader.load('dialog',function(){
    $('#box').dialog(); 
});

PS:使用easyloader智能加载，是根据你使用的UI组件按需加载。我们可以通过Firebug查看HTML,发现加载了非常多的JS文件，这些JS都是dialog组件的必要条件。所以，使用easyloader加载会减少不必要的内容加载。但问题是，使用智能加载，你编码的难度和成本都提高了，效率降低，并且智能加载的JS文件数量还是非常多的，并不会提高太大的速度，反而因为JS文件较多，被搜索引擎要求合并优化。

四、Parser解析器

Parser解析器是专门解析渲染各种UI组件，一般来说，我们并不需要使用它即可自动完成UI组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况。

手动解析一般是使用class的情况下有效，比如设置class="easyui-dialog"。

Parser属性
属性名	默认值	说明
$.parser.auto	true	定义是否自动解析EasyUI组件

//关闭自动解析功能，放在$(function(){})外

$.parser.auto = false;

Parser方法
属性名	默认值	说明
$.parser.parse	空或JQ选择器	解析指定的UI组件
$.parser.onComplete	回调函数	解析完毕后执行

//解析所有UI

$.parser.parse();

//解析指定的UI

$.parser.parse('#box');

ps:使用指定UI解析，必须要设置父类容器才可以解析到。比如：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
  </head>
  <body>
    <div id="box">
        <div class="easyui-dialog" title="标题" style="width:400px;height:200px">
             <span>内容部分</span>
        </div>    
    </div>
  </body>
</html>

//UI组件解析完毕后执行，放在$(function(){})；外

$.parser.onComplete = function(){
        alert('UI组件解析完毕！');
};

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/102569910

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！

Roger_CoderLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录