easyui 初体验

简介

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。

 

目录结构

 

demo文件夹：一些示例，（正式项目中删除）

 

locale：一些不同语言的文件，其实是对easyui的扩展。（只须保留你想用的语言相对应的文件）

 

plugins：easyui提供的各个功能的文件。（使用方式二加载必须保留，方式一加载可以删除）

 

src :各个插件的源文件，不是全部，其实有些功能不是开源的，是商业授权，因此没有源文件。（可以删除）

 

themes：主题，就是css文件和要用到的图标文件，里边提供5种风格。（可以只保留要使用的风格，并且具体到一个风格里，又分为两部分：easyui.css和其它所有css。easyui.css是其它所有css的合并后结果，在不同的加载方式中只会用到一部分。）

 

easyloader.js：暂且称之为加载器文件。在使用方式一加载也不会被使用。

 

jquery.easyui.min.js：easyui的主文件。它是plugins下所有文件合并后的结果，因些它在使用方式一加载必须保留，方式二加载不会使用到，可以删除。

 

jquery.min.js：jquery文件，easyui是基于jquery的，因此是必须的。

 

 

 

其它的是一些授权文件和更新日志之类的，就不说了。

 

两种引用加载方式

 

1：饿汉式加载

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

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

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

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

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

这种也是最常用的方式。这种方式会加载easyui提供的所有功能。

 

2：懒汉式加载

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

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

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

这种方式就相对比较懒，只会在使用特定功能的时候才会加载相对应的plugins下的js和风格里css文件，而其它不使用的功能对应的js和css永远不会被下载。而easyloader.js就是负责用于加载各个插件的。

 

不同加载方式产生问题

 

风格

方式1的加载我们通过引用 themes/default/easyui.css来指定，引用不同风格下的easyui.css来使用不同的风格，但是方式2我们并没用指定风格？如何指定风格？

不指定时，默认是引用default风格下的样式，就会去下载该风格下的样式。如果你使用方式2时且没有指定风格，不存在default风格就会出现问题。

当然我们可以在页面加载后通过

easyloader.theme = "gray";

来指定风格。

语言

同样的对于语言文件，对于方式1我们可以直接在页面引用jquery.easyui.min.js的后面引用。

 

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

但是这对于方式2的加载，这是不起作用的。

 

因些语言文件其实是对各个插件默认配置的修改，当插件都还没有加载时，语言文件对它的修改当然是不会起作用的。

 

因此我们可以通过下面

 

easyloader.locale = "zh_CN";

来指定使用何种语言。

 

两种渲染方式

 

1：javascript方式

<input id="cc" style="width:200px" />

$('#cc').combobox({

        url: ...,

        required: true,

        valueField: 'id',

        textField: 'text'

});

 

2：html标记方式

<input id="cc" class="easyui-combobox" name="dept" 

data-options="valueField:'id',textField:'text',url:'get_data.php'" /> 

 

注：具网上传言，html标记方式相对JS加载方式而言，（在IE）渲染性能差些。

这个我还没感觉到，只是个人觉得JS加载方式相对html标记方式要更加灵活，你可以在DOM加载完毕之后再去渲染控件，也可以在使用到某个控件时，再去渲染。

由于EasyUI是基于jQuery的，而上面2种方式使用到了jQuery的选择器。根据给定ID去匹配元素比根据给定的class去匹配元素性能更佳。

所以选择哪一种，你懂的。。。。。。

 

说说IE兼容性问题

 

EasyUI本身控件功能是很不错，效果也漂亮，使用方式也简单，但是对于IE不同版本的兼容性不是很好，性能问题尤其突出，所以，如果你是用IE浏览器，那么就不建议使用EasyUI。

如果你是在项目中使用EasyUI，又要兼容IE8及以下浏览器。那么可以搭配

EasyUI 1.3.1+EasyUI 1.3.2+jQuery 1.8.x

来使用（本人在实际项目中使用过，期间发现较少问题，总的情况还算稳定，就是页面控件渲染是硬伤，网上针对部分EasyUI控件的优化办法也有一些，聊胜于无，总的效果不是很理想）。

注：jQuery Easy UI从1.3.3到现在的最新版本1.3.4都是基于jQuery2.0的，而jQuery2.0是不支持IE6、7、8的了，所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想继续兼容IE8以前的版本，只能使用jQueryEasyUI1.3.2或以前的版本了。另外jQuery1.9对IE8兼容性不是很好，所以不建议选择。

 

插件列表如下：

分类	插件
Base（基础）	Parser 解析器 Easyloader 加载器 Draggable 可拖动 Droppable 可放置 Resizable 可调整尺寸 Pagination 分页 Searchbox 搜索框 Progressbar 进度条 Tooltip 提示框
Layout（布局）	Panel 面板 Tabs 标签页/选项卡 Accordion 折叠面板 Layout 布局
Menu（菜单）与 Button（按钮）	Menu 菜单 Linkbutton 链接按钮 Menubutton 菜单按钮 Splitbutton 分割按钮
Form（表单）	Form 表单 Validatebox 验证框 Combo 组合 Combobox 组合框 Combotree 组合树 Combogrid 组合网格 Numberbox 数字框 Datebox 日期框 Datetimebox 日期时间框 Calendar 日历 Spinner 微调器 Numberspinner 数值微调器 Timespinner 时间微调器 Slider 滑块
Window（窗口）	Window 窗口 Dialog 对话框 Messager 消息框
DataGrid（数据网格）与 Tree（树）	Datagrid 数据网格 Propertygrid 属性网格 Tree 树 Treegrid 树形网格

 

以及几个常用的扩展插件

1 autocomplete自动完成控件，类似百度搜索框
2 lookup控件，这是一个比较中国化的东西，企业应用中使用的频率很高
3 daterange这个是国外网站上找到了，很炫的一款控件，略做了一些修改并引入

对于EasyUI几个常用控件的源码分析，学习和优化，可以去这个网址看看。

http://www.easyui.info/