第2章 使用EasyUIEasy-UI解析器，是一个渲染UI的解析器。Easy-UI组件有两种加载方式：普通加载和智能加载（按照你的需要来加载）。——————————–普通加载——————————引入必要的文件介绍，如下：//引入Jquery核心库<script type=”text/javascript” src=”easyui/jquery.min.js”></script>//Easy-UI的核心文件<script type=”text/javascript” src=”easyui/jquery.easyui.min.js”></script>//Easy-UI中文提示信息<script type=”text/javascript” src=”easyui/locale/easyui-lang-zh_CN.js” ></script>//这个是自己的js文件，可以是其它的名字<script type=”text/javascript” src=”js/index.js”></script>//Easy-UI主题样式，使用的是easyui.css是所有组件样式的合并。【很关键的一点】<link rel=”stylesheet” type=”text/css” href=”easyui/themes/default/easyui.css” />//图标文件，所有组件上的图标，都是采用这里的文件。<link rel=”stylesheet” type=”text/css” href=”easyui/themes/icon.css” />普通加载也有两种方式：使用class的方式加载和使用js的方式加载【重点】使用Easy-UI，
组件语法：使用前缀 连字符 组件名称； 属性语法：ata-options来设置easyui的属性，语法为：属性名：值，多个属性之间用逗号隔开。前缀：easyui连字符：-组件名称：diaglog（对话框）使用Easy-UI，我们用dialog（对话框）来讲解。1、class的方式加载： <div class=”easyui-dialog” title=”标题” style=”width:400px;height:200px”> 内容部分 </div>2、js的方式加载： <div id=”box” title=”标题” style=”width:400px;height:200px”> 内容部分 </div> <script> $(“#box”).dialog(); </script> 代码很简单，但是会动态的生成许多的div。这就是一个解析和渲染的一个过程。我们一般推荐第二种方式JS的加载，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不方便。并且根据js和HTML分离的原则，第二种提高了代码的可读性。它的属性的设置，直接在dialog中以键值对的形式进行设置，也不用写在html中显得臃肿。——————————–普通加载——————————下面的东西有兴趣可以了解一下，但是在实际应用中并不常用——————————–智能加载（基本不会去使用）——————————引入必要的文件介绍（不需要easyui的核心js和css），如下：//引入Jquery核心库<script type=”text/javascript” src=”easyui/jquery.min.js”></script>//Easy-UI的智能加载文件，其它的任何文件都不需要引入<script type=”text/javascript” src=”easyui/easyloader.js”></script>智能加载方式：js的方式加载： <div id=”box” title=”标题” style=”width:400px;height:200px”> 内容部分 </div> <script> //写法也略有不同，使用easyloder.load()来加载，有两个参数，第一个参数是你要使用哪一个组件（dialog组件），第二个参数：你要使用组件干嘛（渲染出来）；这样会去动态加载需要的文件，并不是全部加载 easyloder.loader( “dialog”,function(){ $(“#box”).dialog(); }); </script>使用easyloder智能加载，是根据你使用过的UI组件按需加载，会加载很多小的文件，虽然整体的大小都比全部加载的小，但问题是，1、使用智能加载，你的编码难度和成本都提高了。2、效率降低。3、js文件较多，被搜索引擎要求合并优化。——————————–智能加载————————————————————–Easy-UI解析器（Parser解析器）——————————这是所有UI组件最重要的一个组件，它并不是一个UI，它是UI的一个渲染解析器，专门解析渲染各种UI组件。一般我们是不需要使用它的。为什么呢？因为它是自动完成的。我们只要添加命令，它就会自动渲染成视图。我们也可以设置成手动渲染，但是一般没有人会这样做。除非是在要求动态创建UI的时候。关闭自动的方法：$.parser.auto=false;解析完毕后执行的方法：$.parser.onComplete=function(){}这两个放在Jquery方法加载完毕之前或者之后就可以不要放在里面就行。eg：//可以是这里 $.parser.auto=false;$(function(){//这里不可以})//可以是这里 $.parser.auto=false;<div id=”box” title=”标题” style=”width:400px;height:200px”> <div class=”easyui-dialog”> 内容部分 </div></div>有时候我界面上有几个要渲染的UI，但是呢？我只想渲染其中的一个，怎么办呢？<script>$.parser.auto=false;//关闭自动渲染$(function(){//这里不可以$.parser.parse();//解析所有UI$.parser.parse(“#box”);//解析指定UI，【必须要设置父容器才可以解析到】})</script>——————————–Easy-UI解析器——————————
