简介
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(基础) |
|
Layout(布局) |
|
Menu(菜单)与 Button(按钮) |
|
Form(表单) |
|
Window(窗口) |
|
DataGrid(数据网格)与 Tree(树) |
|
以及几个常用的扩展插件
1 autocomplete自动完成控件,类似百度搜索框
2 lookup控件,这是一个比较中国化的东西,企业应用中使用的频率很高
3 daterange这个是国外网站上找到了,很炫的一款控件,略做了一些修改并引入
对于EasyUI几个常用控件的源码分析,学习和优化,可以去这个网址看看。
http://www.easyui.info/