jQuery EasyUI框架使用文档
jQuery EasyUI是一个基于jQuery实现的Web UI框架，用法非常简单，但是功能非常强大，使用它你可以使用很少的Javascript代码来制作适合自己的网页。
主页:jquery-easyui.wikidot
下载:jquery-easyui.wikidot/download
这里介绍一下快速使用这个框架的方法：首先在你使用的HTML页面的头部需要包含一些CSS文件和JS文件：
1. <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
2. <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
3. <script type="text/javascript" src="../jquery.easyui.min.js"></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) js除号
o 日历(Calendar)
∙ 窗口
o 窗口(Window)
o 对话框(Dialog)
o 提示框(Messager)
∙ 数据网格和树
o 分页(Pagination)
o 数据网格(DataGrid)
o 树(Tree)
jQuery EasyUI 面板(Panel)用法
星期五,2010 四 9 00:47:37
这篇文章介绍一下面板(Panel)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。（jquery下载的文件怎么使用查看演示）
同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：
1. <div id="p" title="My Panel" collapsible="true" >
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. $('#p').panel('move',{
2. left:100,
3. top:100
4. });
上面只是一些例子，下面我们来看一下具体的属性和事件方法：
属性
名字 | 类型 | 描述 | 默认值 |
title | 字符串 | 在面板头部显示的标题文本 | null |
iconCls | 字符串 | 一个CSS类来显示在面板中的16x16图标 | null |
width | 数字 | 设置面板的宽度 | auto |
height | 数字 | css样式规则的具体格式是什么设置面板的高度 | auto |
left | 数字 | 设置面板左侧位置 | null |
top | 数字 | 设置面板的顶部位置 | null |
cls | 字符串 | 给面板添加一个CSS类 | null |
headerCls | 字符串 | 给面板头部添加一个CSS类 | null |
bodyCls | 字符串 | 给面板主体添加一个CSS类 | nulljava培训机构讲师工资待遇 |
style | 对象 | 给面板自定义样式 | {} |
fit | 布尔 | 当设置为true，面板尺寸将适合它的父容器。 | false |
border | 布尔 | 定义面板的边框 | true |
doSize | 布尔 | 当设置为true，面板载创建的时候将被调整和重新布局 | true |
collapsible | 布尔 | 定义是否显示可折叠定义按钮 | false |
minimizable | 布尔 | 定义是否显示最小化按钮 | false |
maximizable | 布尔 | 定义是否显示最大化按钮 | false |
closable | 布尔 | 定义是否显示关闭按钮 | false |
tools | 数组 | 自定义工具，每个工具可以包含两个属性：iconCls and handler | [] |
collapsed | 布尔 | 定义在初始化的时候折叠面板 | false |
python函数formatminimized | 布尔 | 定义在初始化的时候最小化面板 | false |
maximized | 布尔 | 定义在初始化的时候最大化面板 | false |
closed | 布尔 | 定义在初始化的时候关闭面板 | false |
href | 字符串 | 一个远程的URL加载数据，然后显示在面板中 | null |
loadingMessage | 字符串 | 当加载远程数据时，在面板中显示的信息 | Loading… |
事件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论