教程jquery-easyui中文帮助

BaseationParser解析器EasyLoader加载器Draggable可拖拽Droppable可释放Resizable可调整尺寸Pagination分页SearchBox搜索框ProgressBar进度条LayoutPanel Accordion手风琴Layout布局andButton菜单和按钮 ButtonSplitButtonFormForm表单ValidateBox验证框Combo组合ComboBox组合框ComboTree组合树ComboGrid组合表格NumberBox数字框DateBox日期框DateTimeBoxCalendarSpinner微调器NumberSpinner数值微调器TimeSpinner时间微调器WindowWindow窗口 Messager消息框DataGridandTree数据表格和树DataGrid数据表格PropertyGrid属性表格TreeTreeGridBase基 特jQuery.fn.{plugin}.defaultsdialogjQuery.fn.dialog.defaults里事方jQuery.fn.{plugin}.methods里定义。每个方法有两个参数：jqparam。第一个参数'jq'jQuery对象。第二个参数'param'是指传递给方法的真正的参数。例如，给dialog组件扩展一个名叫'mymove'的方法，代码看起来就像这样：$.extend($.fn.dialog.methods,mymove:function(jq,return$(this).dialog('move', 7. $('#dd').dialog('mymove',left:top:4. 解析用 $.parser.parse('#cc');特名类说默认easyui.方.方名参说 名参说easyuiEasyLoader加载用easyloader.base easyuieasyloader.load('messager $.messager.alert('Title','load4.特名类说默认easyui的基本路径，必须以'/'easyload.js定义在 下的名称定义当加载模块的时候是否加载css定义的语言环事名参说方名参说module,Module的有效类型是：module名称module用'.css'结尾的css文件用'.js'js文件 可拖 用3.特名类说作。如果指定一个函数，它必须返回一个jQuery对象。如果设为true拖拽时的css光标（cursor）拖拽的元素相对于当前光标的位置的X拖拽的元素相对于当前光标的位置的Y设为truedraggable0事名参说e拖拽前触发，返回falseee拖拽期间触发。返回falsee方名参描如果设置了（proxy）属性就返回（proxy）启用拖拽动作。Droppable可释 用3.特名类说默认事名参说当可拖拽元素被拖进来时触发。sourceDOMonDra当可拖拽元素被拖过时触发。sourceDOM当可拖拽元素被拖离开时触发。sourceDOM当可拖拽元素被放下时触发。sourceDOMDroppable可释 用3.特名类说默认事名参说当可拖拽元素被拖进来时触发。sourceDOMonDra当可拖拽元素被拖过时触发。sourceDOM当可拖拽元素被拖离开时触发。sourceDOM当可拖拽元素被放下时触发。sourceDOMResizable可调整尺用$.fn.resizable.defaultsdefaults用<divid="rr"style="width:100px;height:100px;border:1pxsolid4.特名类说默认true将调整尺寸n,e,s,w,ne,se,sw,5事名参说ee调整尺寸期间触发。返回falseDOMePagination分 依 用<divid="pp"style="background:#efefef;border:1pxsolid4.特名类说默认11iconCls：CSS类，它将显示一个背景shoofDisplaying{from}{to}of{total}事名参说falseMethods方名参说options 搜索依用法示1.'easyui-searchbox'类加入到<input/>function prompt="PleaseInputValue" <divname="all"iconCls="icon-ok">All<divname="sports">Sports2.2.<input<divid="mm"<divname="all"iconCls="icon-ok">All<divname="sports">Sportsalert(value+","+ prompt:'PleaseInput13.特名类说默认函数，当用户按搜索按钮或者按ENTER方名参说optionsProgressBarProgressBar进度依用法示ProgressBarhtml'easyui-progressbar'类加入varvalue=if(value<value+=Math.floor(Math.random()*$('#p').progressbar('setValue',5.特名类说默认0事名参说方名参说options Layout布 面用法示1.经由标记创建从标记创建Panel'easyui-panel'类添加到<div/><divid="p"class="easyui-panel"title="MyPanel"style="width:500px;height:150px;iconCls="icon-save"collapsible="true"minimizable="true"<p>panel<p>panel2.2.编程创建的Panel。<divid="p"<p>panel<p>paneltitle:'Mytools:13.16.'move''move'方法把Panel加载内加载内ajax加载panelalert('loaded 6.特名类说默认显示在Panel在Panel16x16CSS设置Panel设置Panel设置Panel设置Panel给PanelCSS给PanelCSS给PanelCSS给Panel事事当设为true时，Panel定义了是否显示Panel设置为true，创建时Panel要是设置为true，PanelPaneliconCls和定义了初始化Panel定义了初始化Panel定义了初始化Panel定义了初始化Panel一个URL，用它加载数据并且显示在Panel里设置为truehref加载的Panel当加载数据时在Panel里显示的一条信息定义了如何从ajaxextractor:varpattern=/<body[^>]*>((.|[\n\r])*)<\/body>/im;varmatches=pattern.exec(data);ifreturn body}elsereturn}}名参说当数据被加载时触发Panel打开前触发，返回false方方PanelPanel关闭前触发，返回falsePanelPanel销毁前触发，返回falsePanelPanel折叠前触发，返回falsePanelPanel展开前触发，返回falsePanelwidth,Panel调整尺寸后触发。Panel移动后触发。on名参说返回Panel返回Panel返回Panel当forceOpen参数设为trueonBeforeOpen回调函数打开PanelforceDestroytrueonBeforeDestroy当设置了href特性时，刷新Panel加载数据设置Panel尺寸并做布局。OptionswidthPanelheightPanel高度leftPanel左边位置top：新的Panel移动Panel到新位置。OptionsleftPaneltop：新的PanelPanel最小化Panel把最大化的Panel折叠Panel展开Panel 页/选项用用$.fn.tabs.defaults重写defaults依用法示1经由标记创建每个tabpanel经由子<div/>标记被创建，其用法与Panel一样。<divid="tt"class="easyui-tabs"<divtitle="Tab1" <divtitle="Tab2"closable="true"style="overflow:auto;padding:20px;display: <divtitle="Tab3"iconCls="icon-reload"closable="true"style="padding:20px;22编程创建Tabs'onSelect'alert(title+'is 6.增增加新的tab增加一个新的tabtitle:'Newcontent:'Tab6.获获取选中的获取选中的tabpanel和它的tabvarpp=vartab 相应的tab特名类说默认TabsTabsTrue就不用背景容器来呈现tab条TrueTabsTrueTabs每按一次tab每一个滚动动画应该持续右侧，每个工具选项都和Linkbutton一样事名参说当一个ajaxtabpanel完成加载数据时触发tabpaneltabpanelfalsetabpaneltabpaneltabpanele,当一个tabpanel被时触发方名参说tabsoptionstabpaneltabs增加一个新的tabpanel，options参数是一个配置对象，详细信息请参见tabpanel特性。tabpanel，titlepaneltabpaneltabpaneltabpaneltabpanel，paramtabtabpanel。options：paneloptions。TabpanelTabpanelpanel名类说默认TabpanelTabpanel加载内容来填充tabpanel的URLTruehreftabpanel显示在tabpanelCSSTabpanelTabpanel名类说true时，tabpanel将显示一个关闭按钮，点击它就能关闭这个tabpanel。true时，tabpanel 手风依依$.fn.accordion.defaultsdefaults用法示accordion'easyui-accordion'<div/><divid="aa"class="easyui-accordion" <divtitle="Title1"iconCls="icon-save"style="overflow:auto;padding:10px;<h3style="color:#0099FF;">Accordionfor<p>AccordionisapartofeasyuiframeworkforItletsyoudefineyouraccordioncomponentonwebpagemore <divtitle="Title2"iconCls="icon-reload"selected="true"style="padding:10px;<divaccordionaccordionAccordionPanelAccordionPanel内'getSelected'panelpanel'refresh'varpp$('#aa').accordion('getSelected');获取选中的if pp.panel('refresh','new_content.php');//调用'refresh'方法加载新内4.容器选名类说默认AccordionAccordiontrueaccordionpanelPanel选Accordionpanelpanel名类说默认truepanel事名参说panelpanelpanelfalsepanel方方名参说accordionaccordionLayout依用法示Layout'easyui-layout'<div/><divid="cc"class="easyui-layout" <divregion="north"title="NorthTitle"split="true"style="height:100px;"></ <divregion="south"title="SouthTitle"split="true"style="height:100px;"></ <divregion="east"iconCls="icon-reload"title="East"split="true"style="wid<divregion="west"split="true"title="West" <divregion="center"title="centertitle"style="padding:5px;background:#eee;<bodyclass="easyui- <divregion="north"title="NorthTitle"split="true"style="height:100px;"></ <divregion="south"title="SouthTitle"split="true"style="height:100px;"></ <divregion="east"iconCls="icon-reload"title="East"split="true"style="wid<divregion="west"split="true"title="West" <divregion="center"title="centertitle"style="padding:5px;background:#eee;LayoutLayout//折叠west名类说Layoutpanellayoutpanel的位置，其值是下列之一：north、south、eastTruelayoutpanelTruepanelpanelCSS从站点加载数据的URL方名参说layout'panel，'region参数可能的值是：'north'、'south'、'east'、'west'panel，'region参数可能的值是：'north'、'south'、'east'、'west'andButton菜单和按菜单.defaultsdefaults用法示创'iconCls'加 -sep'类 item将产生一'类到<div/>标记。每 item经由<div/>标记 item左边的图标。添<divid="mm" "<div<diviconCls="icon-<div 编程创编程创 并侦听'onClick'事件 显 被创建时，它是隐藏不可见的。调用显 被创建时，它是隐藏不可见的。调用'show'方法来显。 ('show',left:top:4.特名类说默认z-index.的左边位置。0的顶部位置。0事名参说 显示之后触发 隐藏之后触发当点 item时触发方名参说pos参数有两个特性：。隐 获 item数据并返回，该数据包含下列特性target：DOM对象，即 id：string，元素的id属性。 item的文字。href：string，定位的url。 item item时执行的函数iconCls：stringCSS给指定 item设置文字。'param'包含两个特性target：DOM对象，被设定 item给指定 item设置图标。'param'包含两个特性target：DOM对象，即 iconCls：新图标的CSS类。找到指定 item，返回对象与getItem方法相同追 item，'param'参数包含下列特性parent：DOM对象， item将追加到其中，如果没有设定，item将作为顶级 text：string， item的文字。href：string，定位的url。onclick：string或者function，当用户点击 item时执行的代码或iconClsstringCSS移除指定 启 禁 按用法示<ahref="#"id="btn"iconCls="icon-3. //禁用此 //启用此特名类说默认idTrueTrue16x16CSS方名参说ButtonButton菜单按button.defaultsdefaults依用<ahref="javascript:void(0)"id="mb"iconCls="icon-<divid="mm"<diviconCls="icon-<diviconCls="icon-<div <div <diviconCls="icon-<div>Select :3.特名类说True创建一个相 的选择器当悬停在按钮上时，以毫秒为单位定义的，显 的持续时间方名参说禁 启 拆分按依用<ahref="javascript:void(0)"id="sb"iconCls="icon-ok"onclick="javascript:al<divid="mm"<diviconCls="icon-<diviconCls="icon-3.特名类说True创建一个对 的选择器当悬停在按钮上时，以毫秒为单位定义的，显 的持续时间方名参说Form表用<formid="ff"使form成为ajax提交的form onSubmit:////返回false来提 提交调用form插件的'submit'方法来提交$('#ff').form('submit',onSubmit:////返回false来提 特名类说默认事名参说提交前触发，返回false来提交动作false方名参说optionsdata参数可以是一个字符串或者对象类型，字符串作为一个URL，否则作truevalidatebox插 验证用<inputid="vv"required="true"validType="3.验证规requiredvalidTypeurlURLlength[0,100]xy','paramName']ajax'trueminLength$.extend($.fn.validatebox.defaults.rules,minLength:validator:function(value,returnvalue.length>= message:'Pleaseenteratleast{0} 8.现在你可以使用这个minLength验证类型，去定义一个至少输入5个字符的输入框 1.<inputclass="easyui-validatebox"特名类说默认Thisfieldis方名参说validate方法并且返回验证结果，truefalse 组 bo.defaults重写了defaults 依用<inputid="cc"<select4.特validateboxcombo名类说,keyHandlerkeyHandler:up:down:enter:function(){},query:}事说参说onShonewValue,validateboxvalidateboxcombo名参说sho 组合扩展自扩展自 依 用<selectid="cc"name="dept"<option<inputid="cc"name="dept"5.json数据格式的示 1.4.7.特其特性扩展自combo，下列是为combobox增加的特性 名类说ComboBoxvalueComboBoxtext'remote'。从加载列表数据的URLhttpmethod'mode'localtruecombocombocombobox名参说当数据加载成功时触发当数据加载失败时触发combocombocombobox名参说options请求的列表数据 组合扩展自扩展自 botree.defaults重写了defaults依用1.<selectid="cc"<inputid="cc"3.特combotreecombotree名类说默认事其事件扩展自combo和tree combocombocombotree名参说optionstreetree再一次请求的tree数据 组合表扩展自扩展自 bogrid.defaults重写了defaults依用1.<selectid="cc"name="dept"<inputid="cc"name="dept"特其特性扩展自combodatagridcombogrid名类说当datagrid正加载数据时显示的信息idtextdatagrid数据。如果组合树从服务'remote'。'mode'localtrue就事其事件扩展自combo和datagrid 方其方法扩展自combo，下列是位combogrid追加或重写的方法 名参说optionsdatagrid 数字 依 用<inputtype="text"4.特其特性扩展自validatebox，下列是为numberbox增加的特性 名类说默认0方其方法扩展自validatebox，下列是为numberbox追加或重写的方法 名参说 日期扩展自扩展自 依用<inputid="dd"3.特combodatebox名类说true'date'参数，并返回一个字符'date'字符串参数，并返事名参说combocombodatebox名参说optionscalendardatebox 依用<inputid="dt"3.特dateboxdatetimebox名类说默认方dateboxdatetimebox名参说optionstimespinnerdatetimebox 日用<divid="cc"current:new5.特名类说默认true时设置日历的尺寸以['Jan','Feb','Mar','Apr','May','Jun','Jul','Sep','Oct','Nov',当前年份（4位当前月份（1开始事名参说方名参说options 微调 依 用<inputid="ss"4.validateboxvalidateboxspinner名类说默认1事名参说validateboxvalidateboxspinner名参说options 数值微调依用<inputid="ss"min="10"max="100"required="true"3.特spinnernumberbox事spinner方spinnernumberspinner重写的方法。名参说optionsnumberspinner 时间微调依 用<inputid="ss"required="true"3.特其特性扩展自spinner，下列是为timespinner增加的特性。 名类说默认:010事 方其方法扩展自spinner，下列是为timespinner重写的方法 名参数optionstimespinnerWindow窗 窗依用<divid="win"iconCls="icon-save"title="MyWindow5.6.$('#win').window('close');//closepanelpanelwindow名类说默认z-indextruefalse就浮事 方其方法扩展自panel，下列是为window增加的方法 名参说window 依用<divid="dd"title="MyDialog"Dialog3.特windowdialog名类说默认定义框能否调整尺寸框的顶部，每个工具的选项都与linkbutton一linkbutton事 方其方法扩展自window，下列是为dialog增加的方法 名参说dialog 消息$.messager.defaultsdefaults依用$.messager.alert('Warning','Thewarning$.messager.confirm('Confirm','Areyousureyouwanttodeleterecord?',fif 6.特名类说默认方名参说在屏幕的右下角显示一个消息窗口，options是一个配置对象：fade、showslide。showSpeed600。width250。msg如果定义为非0值，消息窗口将在超时后自动关闭。title,msg,icon,fnicon：显示图标的。可用的值是：error、question、info、title,msg,fn(b)true参数，否则给它传递一个false参数。title,msg,optionsoroptionstitle''msg''text：显示在进度条里的文字，默认值是erval是300。barprogressbarDataGridandTree数据表格和 数据表扩展自$.fn.panel.defaults，用$.fn.datagrid.defaults重写了defaults 依linkbutton 用<table8.paneldatagrid数paneldatagrid名类说默认datagrid的column的配置对象，详细请参column的特性。True就会自动扩大或缩小列的尺寸以适应表格的True就把行条纹化。（即奇偶行使用不同背景色请求数据的method类型True从站点请求数据的URL当从站点加载数据时，显示的提示信息pleasewait…TruedatagridTrueTruepagination1paginationpagination特性时，初始化页面尺寸的选当请求数据时，发送的额外参数'asc'desc''background:red的样式，该函数需要两rowIndex0'data'，表示原始数据。'total''rows'特性。editordatagridview列（Column）的特{field:'itemid',title:'Item{field:'productid',title:'Product{title:'Item5. {field:'listprice',title:'ListPrice',width:80,align:'right',sortable:tru{field:'unitcost',title:'Unit名类说默认TrueTrueTrueTruecheckboxvaluerowIndex'background:red'。此函数需要三个参数：value名参说container,target,target,例如，文本编辑器（texteditor）像下面这样定义 $.extend($.fn.datagrid.defaults.editors,text:init:function(container, varinput=$('<inputtype="text"class="datagrid-editable-input">return getValue:return setValue:function(target, resize:function(target,varinput=if($.boxModel==input.width(width-(input.outerWidth()-}else}}}viewdatagridviewdatagrid名参说target,container,target：DOM对象，datagrid对象。target,container,target,fields,frozen,rowIndex,render函数调target,target,panelpaneldatagrid名参说加载数据发生某些错误时触发false加载rowIndex,rowIndex0开始。rowIndex,rowIndex0开始。rowIndex,field,rowIndex,field,sort,field,rowIndex,rowIndex,rowIndex,rowIndex0开始rowIndex,rowData,rowIndex0开始rowIndex,rowIndex0开始e,datagride,rowIndex,当行时触发方名参说optionspagerpanelfrozentrueparam参数，它将替queryParams特性。lo