《jQueryEasyUI框架使用文档》由会员分享，可在线阅读，更多相关《jQueryEasyUI框架使用文档（27页珍藏版）》请在金锄头文库上搜索。
1、JQUERYEASYUI框架使用文档jQueryEasyUI是一个基于jQuery实现的WebUI框架，用法非常简单，但是功能非常强 大，使用它你可以使用很少的Javascript代码来制作适合自己的网页。, Foldir盟哄1址1(EST4卿3ESTEI4mmRf-EKOt时5EST URPU4KW5EfT-WFWJiHQ1(1 ”%= 1直 dtkC oll roia G nm 簟Lm 1Fil*Z-主页:http:/jquery-下载:http:/jquery- nload这里介绍一下快速使用这个框架的方法：首先在你使用的HTML页面的头部需要包含一些CSS文件和JS文件：1. 2. 3
2、. 这三个文件是必须要包含的，第一个是臼syUI的CSS文件，后面两个JS 一个是jQuery，一个是EasyUI的JS文件。包含这几个文件后就可以使用臼syUI 了，因为臼syUI的功能十分强大，所以把这些功能分类如下，更于大家学习使用，我会在随后的文章里逐一介绍每个分类的用法和例子： 基本o可拖放(Draggable)o调整大小(Resizable) 布局o面板(Pa nel)o标签(Tabs)o可折叠标签(Accordio n)o布局(Layout)菜单和按钮o菜单(Me nu)o链接按钮(Lin kButt on)o菜单按钮(Me nuButt on)o拆分按钮(SplitButt o
3、n)表单o表单(Form)o组合框(ComboBox)o组合树(ComboTree)o数字框(NumberBox)o验证框(ValidateBox)o日期输入框(DateBox)o 日历(Cale ndar)窗口o 窗口 (Wi ndow)o对话框(Dialog)o 提示框(Messager)数据网格和树o 分页(Pagi natio n)o 数据网格(DataGrid)o 树(Tree)JQUERYEASYUI 面板(PANEL)用法星期五,2010 四 900:47:37这篇文章介绍一下面板(Pa nel)用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。(查看
4、演示) y TitleAp：iiLelP：xtlh1P：=iTlh1同样我们来通过一个小例子来学习一下这些参数，HTML代码如下:1. 2. Panel Content3. 然后按照jQueryEasyUI框架使用文档包含必要文件后，只要在$(怕门ction();里添 加一行代码来生成面板：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-
5、save8. handler:function()alert(save)9. 10. );也可以把面板移动到其他位置：1. $(#p).panel(move,2. left:100,3. top:1004. );上面只是一些例子，下面我们来看一下具体的属性和事件方法:属性名字类型描述默认值title字符 串在面板头部显示的标题文本nulliconCls字符个CSS类来显示在面板中的16x16图标null串width数字设置面板的宽度autoheight数字设置面板的咼度autoleft数字设置面板左侧位置nulltop数字设置面板的顶部位置nullcis字符 串给面板添加一个CSS类nullh
6、eaderCIs字符 串给面板头部添加一个CSS类nullbodyCIs字符 串给面板主体添加一个CSS类nullstyle对象给面板自定义样式fit布尔当设置为true，面板尺寸将适合它的父容器。falseborder布尔定义面板的边框truedoSize布尔当设置为true，面板载创建的时候将被调整和重新布局truecollapsible布尔定义是否显示可折叠定义按钮falseminimizable布尔定义是否显示最小化按钮falsemaximizable布尔定义是否显示最大化按钮falseclosable布尔定义是否显示关闭按钮falsetools数组自定义工具，每个工具可以包含两个属性
7、：iconClsandhandlercollapsed布尔定义在初始化的时候折叠面板falseminimized布尔定义在初始化的时候最小化面板falsemaximized布尔定义在初始化的时候最大化面板falseclosed布尔定义在初始化的时候关闭面板falsehref字符 串一个远程的URL加载数据，然后显示在面板中nullloadingMessage字符 串当加载远程数据时，在面板中显示的信息Loading.事件名字参数描述onLoadnone当远程数据加载时触发onBeforeOpennone当面板打开之刖触发onOpennone当面板打开之后触发onBeforeClosenone当
8、面板关闭之刖触发onClosenone当面板关闭之后触发onBeforeDestroynone当面板销毁之刖触发onDestroynone当面板关闭之后触发onBeforeCollpasenone当面板折叠之刖触发onCollapsenone当面板折叠之后触发onBeforeExpandnone当面板展开之刖触发onExpandnone当面板展开之后触发onResizewidth,height当面板调整大小之后触发 width:新的宽度 height:新的咼度onMoveleft,top当面板移动之后触发 left:新的左侧位置 top:新的顶部位置onMaximizenone当窗口最大化的时
9、候被触发onRestorenone当窗口恢复到原来的大小时被触发onMinimizenone当窗口最小化的时候被触发方法名字参数描述optionsnone返回设置的属性值panelnone返回面板对象headernone返回面板头部对象bodynone返回面板主体对象setTitletitle设置面板头部标题ope nforceOpen当forceOpen设置为true，面板被打开的时候忽略onBeforeOpen 回调函数closeforceClose当forceClose设置为true面板被关闭的时候忽略onBeforeClose回 调函数destroyforceDestroy当force
10、Destroy设置为true，面板被销毁的时候忽略 onBeforeDestroy 回调函数refreshnone当设置了 href值时，刷新面板来加载远程数据resizeoptions设置面板的大小和布局，这些选项包含以下的属性： width:新面板的宽度 height:新面板的咼度 left:新面板的左侧位置 top:新面板的顶部位置moveoptions移动面板到一个新的位置，这些选项包含以下属性：left:新面板的左侧位置top:新面板的顶部位置演示JQUERYEASYUI 日期框(DATEBOX)用法星期六,2010 六 1212:29:19在jQueryEasyUI的1.1版本以后
11、又添加了几个新的插件，日期框就在其内，在web查询信息的时候经常会用到日期框，下面来看一下jQueryEasyUI的效图：:Jun 2010T:67691Q口 11314151&1T1S202122232425262720293013456739TodayCloseHTML代码：1. 然后按照jQueryEasyUI框架使用文档包含必要文件后，在$(function();里插入下 面的代码即可：1. $(#dd).datebox(options);jQueryEasyUI日期框需要依存于一下的几个插件：*calendar (日历)*validatebox (验证框)卜面来介绍DateBox的具
12、体用法，首先来看属性:属性名类型描述默认值currentText字符串为当刖日期按钮显示的文本TodaycloseText字符串关闭按钮显示的文本Closedisabled布尔如果为true则禁用输入框falserequired布尔定义输入框是否为必添falsemissingMessage字符串当输入框为空时提示的文本Thisfieldis required.formatterfunction格式化日期的函数,这个函数以date为参数， 并且返回一个字符串parserfunction分析字符串的函数，这个函数以date为参数 并返回一个日期事件事件名JI 参数l描述onSelectdate当选择一个日期时触发方法方法名参数描述destroynone销毁
