jqueryeasyui框架原理（EasyUI入门基础之插件篇-前端培训）

EasyUI是一组基于jQuery的UI（用户界面）插件集合。本文介绍了组件的创建方式，通过样式介绍每个属性的作用，更是列举出了EasyUI的所有组件，帮助学习者更快的了解组件。

jQuery EasyUI提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、panel（面板）、combo（下拉组合）等等。用户可以组合使用这些组件，也可以单独使用其中一个。

组件的创建：EasyUI可以通过HTML或JavaScript创建组件。

1、HTML创建组件的方式

样式：<标签 class=“easyui-组件名” style=“样式” title=“面板” iconCls=“icon-ok” collapsible=“true”></标签>

class=“easyui-组件名”作用：告诉EasyUI需要把div转化为EasyUI组件；

style作用：设置组件宽高和其他样式；

Title、iconCls、collapsible组件作用: 告诉EasyUI如何创建这个组件。

使用HTML创建EasyUI组件比较简单。

2、JS代码创建组件的方法

样式：

相同名称属性的作用同HTML创建组件的方式相同。

以下是jQuery EasyUI的插件列表。

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 树形网格