EasyUI入门
EasyUI学习笔记整理。
-
EasyUI下载
-
EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.5.5下载完成之后,得到压缩包,解压后,得到一个【jquery-easyui-1.5.5.4】文件夹,里面有如下图所示的文件:
- 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> 中文 - EasyUI使用范例
新建一个JavaWeb工程,然后将jquery-easyui加入到工程中,将jquery-easyui文件夹中一些不必要的文件删掉,只保留必要的就可以了,如下图所示: - easyui的UI组件加载方式:
1、HTML样式方式引入:<div id="dd" class="easyui-dialog" title="My Dialog" style="width: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', width: 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(); })
- 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中的选择器必须是父容器的选择器