jQuery 框架之jQuery easy ui

关于jquery easy ui，对其 文件结构说明及其样式功能拓展谈谈自己的一些理解

1、 文件结构说明：

jQuery easy ui 可以有两种使用方式。
a、 直接的引用：jquery.easyui.min.js 文件以及 jquery-1.7.1.min.js 两个javascript文件以及icon.css 和 easyui.css ，其中jquery.easyui.min.js 文件中包含了
linkbutton----------------------------------------按钮
menu----------------------------------------------菜单
menubutton----------------------------------------菜单按钮
splitbutton---------------------------------------下拉按钮
progressbar---------------------------------------进度条
tree----------------------------------------------树状
combobox------------------------------------------组合框
combotree-----------------------------------------组合树
numberbox-----------------------------------------数据框
validatebox---------------------------------------验证框
searchbox-----------------------------------------搜索框
numberspinner-------------------------------------数值微调器
timespinner---------------------------------------时间微调器
calendar------------------------------------------日历
datebox-------------------------------------------日期框
datetimebox---------------------------------------日期时间框
layout--------------------------------------------布局
panel---------------------------------------------面板
datagrid------------------------------------------数据表
propertygrid--------------------------------------参数表
treegrid------------------------------------------树形表
tabs----------------------------------------------标签
accordion-----------------------------------------手风琴式效果
window--------------------------------------------窗体
dialog--------------------------------------------对话框
message-------------------------------------------信息框
（以上的各类工具框使用时可用class=”easyui-XX”（XX代表上面个工具框的名称），详情参见jquery.easyui.min的API。）
同时还有dragable（拖动）、dropable（位置拖动）、resizable（缩放）三种效果。这些文件组合成了整体的jquery.easyui.min的总文件结构。
b、 组合引用方式：即是我们学要用到什么工具箱或效果就调用其javascript文件，同时引用其对应的css文件，另外，只要需要用到iconCls属性则需要引用icon.css文件。
如我们需要用到linkbutton，则只需引用jquery-1.7.1.min.js 、linkbutton.js、linkbutton.css 和icon.css几个文件。

2、 属性使用说明

使用工具框的属性时、我们只需要像设置标签的id或class那样结合工具框自身拓展的属性去使用它就可以了。如linkbutton的使用，我们可以这么去书写：
<a href=”#” iconCls=”icon-ok” plain=”true”>ok</a>

3、函数使用说明

对于工具框和三种效果，他们在调用方法时都是先获取工具框的对象[是jquery对象]，如果使用其方法，如使用linkbutton的方法，书写形式为：
$(“#linkbuttonid”).linkbutton(“menthodName”,param);

4、 事件使用说明

同函数的使用一样，事件的使用第一步也是获取其jquery对象，但是和函数的使用又有点不同，因为对事件的处理是用户自定义的，如panel的折叠事件onCollapse，书写形式如下：
$(“#panelid”).panel(“onCollapse”,function(){//用户定义});

5、 功能拓展说明

a、 属性拓展：
Javascript提供了属性拓展的接口 attributes ,而在jquery中也提供了标签的属性拓展方法---attr方法，该方法有
$(object).attr(attributeName)------------------获取属性值
$(object).attr(attributeName, property)--------为已有属性设置值
$(object).attr(attributeName, fun)-------------自定义属性
b、 方法拓展：
在jquery.easyui中我们可以通过$.fn.toolboxName.method.newfun的形式为工具框添加方法（注：其中的toolboxName为工具框的名称）
c、 事件拓展：
同方法的拓展一样，不过实质上是对标签原始事件的拓展。
d、 其它：
可以在icon.css中自配置iconCls属性。操作方法：
首先找到icon.css然后在添加class 形式如：
.icon-name{
background:url('icons/edit_remove.png') no-repeat;
}
有一点值得注意的是图片的大小定义为16px * 16px。

6、 动态添加工具框：

和Jquery.easyui.min一起的还有一个文件称为 easyloader.js，它可以动态的向指定的标签中添加工具框。其使用方法如下：
using(“toolboxName”, function(){ $('#cc').calendar(//定义指定toolbox);