jQueryEasyUI框架使用文档.doc

文档介绍：JQUERYEASYUI框架使用文档jQueryEasyUI是一个基于jQuery实现的WebUI框架,用法非常简单,但是功能非常强大,使用它你可以使用很少的Javascript代码来制作适合自己的网页。主页:http://jquery-:http://jquery-easyui./download这里介绍一下快速使用这个框架的方法:首先在你使用的HTML页面的头部需要包含一些CSS文件和JS文件:="stylesheet"type="text/css"href="../themes/default/">,第一个是EasyUI的CSS文件,后面两个JS一个是jQuery,一个是EasyUI的JS文件。包含这几个文件后就可以使用EasyUI了,因为EasyUI的功能十分强大,所以把这些功能分类如下,便于大家学****使用,我会在随后的文章里逐一介绍每个分类的用法和例子:∙基本o可拖放(Draggableo调整大小(Resizable∙布局o面板(Panelo标签(Tabso可折叠标签(Accordiono布局(Layout∙菜单和按钮o菜单(Menuo链接按钮(LinkButtono菜单按钮(MenuButtono拆分按钮(SplitButton∙表单o表单(boTreeo数字框(NumberBoxO验证框(VALIDATEBOXO日期输入框(DATEBOXO日历(CALENDAR∙窗口O窗口(WINDOWO对话框(DIALOGO提示框(MESSAGER∙数据网格和树O分页(PAGINATIONO数据网格(DATAGRIDO树(TREEjQueryEasyUI面板(Panel用法星期五,2010四900:47:37这篇文章介绍一下面板(PANEL用法以及参数,首先我们可以先看一下面板功能可以做什么,下图就是一个面板的实例。(查看演示)同样我们来通过一个小例子来学****一下这些参数,HTML代码如下:. 《jQueryEasyUI框架使用文档》包含必要文件后,只要在$(function({};里添加一行代码来生成面板:1.$('#p'.panel(options;也可以给面板函数添加一些参数:1.$('#p'.panel({2. title:'MyPanel',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:1004.};上面只是一些例子,下面我们来看一下具体的属性和事件方法:属性名字类型描述默认值title字符串在面板头部显示的标题文本nulliconCls字符串一个CSS类来显示在面板中的16x16图标nullwidth数字设置面板的宽度autoheight数字设置面板的高度autoleft数字设置面板左侧位置nulltop数字设置面板的顶部位置nullcls字符串给面板添加一个CSS类nullheaderCls字符串给面板头部添加一个CSS类nullbodyCls字符串给面板主体添加一个CSS类nullstyle对象给面板自定义样式{}