EasyUI入门

EasyUI学习笔记整理。

• EasyUI下载

1. EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jQuery EasyUI 1.5.5
   下载完成之后，得到压缩包，解压后，得到一个【jquery-easyui-1.5.5.4】文件夹，里面有如下图所示的文件：
   
2. EasyUI入门
   1、引入必要的文件，习惯先引入css文件
   
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/js/easyui/themes/default/easyui.css"></link>  easyui的默认主题文件
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/js/easyui/themes/icon.css"></link> easyui的图标文件，也可以自定义
   
   2、引入easyui插件库，在此之前必须先引入jquery文件，因为easyui是基于jquery的。
   

   <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jq/jquery-1.12.4.min.js"></script>

   <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/easyui/jquery.easyui.min.js"></script>
   
   3、导入本地化文件，可挑选需要的本地化文件导入
   <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/easyui/locale/easyui-lang-zh_CN.js"></script>   中文
   
3. EasyUI使用范例
   新建一个JavaWeb工程，然后将jquery-easyui加入到工程中，将jquery-easyui文件夹中一些不必要的文件删掉，只保留必要的就可以了，如下图所示：
   
4. easyui的UI组件加载方式：
   1、HTML样式方式引入：

   <div id="dd" class="easyui-dialog" title="My Dialog" style="400px;height:200px;"
       data-options="iconCls:'icon-save',resizable:true,modal:true">
       Dialog Content.
   </div>

   easyui-dialog就是easyui的对话框属性的加载，easyui的插件都可以用这种方式加载，属性的设置可以写在data-options中。
   
   2、JS的方式加载（常用）：

   <div id="dd">Dialog Content.</div>
   
   <script>
   
   $('#dd').dialog({
       title: 'My Dialog',
        400,
       height: 200,
       closed: false,
       cache: false,
       href: 'get_content.php',
       modal: true
   });
   $('#dd').dialog('refresh', 'new_content.php');
   </script>

    
   3、使用easyloader.js智能加载：需要什么组件就加载什么组件，目的是为了节省带宽，但是对于现在的网速来说几乎可忽略，了解即可
   只需要引入jquery和easyloader.js两个文件

   easyloader.load('组件名',function(){
      $('#div').dialog();
   })

5. Parser解析器：
   是专门解析和渲染各种UI组件，一般来说，我们不需要使用它即可自动完成UI组件的解析工作。但是，某些情况下需要手动解析。
   手动解析一般是使用class的情况下有效，比如class='easyui-dialog'
   
   属性：
   

   名称	类型	描述	默认值
   $.parser.auto	boolean	定义是否自动解析 easyui 组件。	true

   
   
   事件：
   

   名称	参数	描述
   $.parser.onComplete	回调函数	当解析器完成解析动作的时候触发。

   
   方法：
   

   名称	参数	描述
   $.parser.parse	空或者jquery选择器	解析 easyui 组件。

   
   
   用法：

   $.parser.parse(); // 解析整个页面
   $.parser.parse('#cc'); // 解析某个具体节点且必须给 #cc加一个父容器才可以，parse中的选择器必须是父容器的选择器