JQUERYEASYUI框架使用文档.pdf

JQUERY EASYUI 框架使用文档 jQuery EasyUI 是一个基于jQuery 实现的Web UI 框架 ，用法非常简单 ，但是功能非常强 大 ，使用它你可以使用很少的Javascript 代码来制作适合自己的网页。 主页 http// 下载 http///download 这里介绍一下快速使用这个框架的方法 ：首先在你使用的 HTML页面的头部需要包含一些 CSS文件和 JS文件 ： 1. link rel stylesheet type text/css href ../themes/default/easyui.css 2. script type text/j avascript src ../j query-1.4.2.min.j s/script 3. script type text/j avascript src ../j query.easyui.min.j s/script 这三个文件是必须要包含的 ，第一个是 EasyUI 的 CSS文件 ，后面两个 JS一个是jQuery ， 一个是 EasyUI 的JS文件。包含这几个文件后就可以使用 EasyUI 了 ，因为 EasyUI 的功能 十分强大 ， 所以把这些功能分类如下 ，便于大家学习使用 ，我会在随后的文章里逐一介绍每个分类的用 法和例子 ：  基本 o 可拖放(Draggable) o 调整大小(Resizable)  布局 o 面板(Panel) o 标签(Tabs) o 可折叠标签(Accordion) o 布局(Layout)  菜单和按钮 o 菜单(Menu) o 链接按钮(LinkButton) o 菜单按钮(MenuButton) o 拆分按钮(SplitButton)  表单 o 表单(Form) o 组合框(ComboBox) o 组合树(ComboTree) o 数字框(NumberBox) o 验证框(ValidateBox) o 日期输入框(DateBox) o 日历(Calendar)  窗口 o 窗口(Window) o 对话框(Dialog) o 提示框(Messager)  数据网格和树 o 分页(Pagination) o 数据网格(DataGrid) o 树(Tree) JQUERY EASYUI 面板(PANEL)用法 星期五,2010 四 9 0047 37 这篇文章介绍一下面板(Panel)用法以及参数 ，首先我们可以先看一下面板功能可以做什么 ， 下图就是一个面板的实例。 （查看演示 ） 同样我们来通过一个小例子来学习一下这些参数 ，HTML代码如下 ： 1. div id p title My Panel collapsible true style padding:10px; 2. Panel Content 3. /div 然后按照 《jQuery EasyUI 框架使用文档》包含必要文件后 ，只要在$(function(){ }); 里添 加一行代码来生成面板 ： 1. $(#p).panel(options); 也可以给面板函数添加一些参数 ： 1. $(#p).panel({ 2. title: My Panel, 3. tools: [{ 4. iconCls:icon-new, 5. handler:function(){alert(new)} 6. },{ 7. iconCls:icon-save 8. handler:function(){alert(save)} 9. }] 10.}); 也可以把面板移动到其他位置 ： 1. $(