EasyUI中文API帮助说明文档Word文档下载推荐.docx
《EasyUI中文API帮助说明文档Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《EasyUI中文API帮助说明文档Word文档下载推荐.docx(97页珍藏版)》请在冰豆网上搜索。
/div>
3.<
1.$('
#dd'
).draggable({
handle:
'
#title'
3.});
proxy(替代)
string,function
拖动时的替代元素,当被设置为'
clone'
时,将使用该元素的一个复制元素来作为替代元素。
如果指定了一个函数,它将返回一个jquery对象。
null
revert(复原)
如果设置为true,当拖动停止时元素将返回它的初始位置。
false
cursor(指针)
string(字符串)
拖动时的CSS指针。
move
deltaX(水平增量,X轴)
number(数字)
被拖动元素对应于当前指针的水平位置。
deltaY(垂直增量,y轴)
被拖动元素对应于当前指针的垂直位置。
handle(句柄)
selector(选择器)
开始拖动的句柄。
disabled(停止拖动)
当设置为true时停止拖动。
edge(边缘)
可以在其中拖动的容器的宽度
axis(拖动轴)
可用值为'
v'
或者'
h'
当设置为空时,元素可以同时在水平和垂直方法拖动。
onBeforeDrag
e
在拖动之前触发,返回false将取消拖动。
onStartDrag
当目标对象开始被拖动时触发。
onDrag
在拖动过程中触发,当不能再拖动时返回false。
onStopDrag
当拖动停止时触发。
options
none
返回属性对象。
proxy
如果替代元素被设置,返回将被用于拖动的替代元素。
enable
允许拖动。
disable
禁止拖动。
拖动至容器
使用$.fn.droppable.defaults重载默认值。
).droppable({
accept:
#d1,#d3'
accept
selector
决定哪个可拖动元素将会被接收。
onDragEnter
e,source
当可拖动元素被拖入目标容器的时候触发,参数source是被拖动的DOM元素。
onDragOver
当可拖动元素被拖至某个元素之上的时候触发,参数source是被拖动的DOM元素。
onDragLeave
当可拖动元素被拖离目标容器的时候触发,参数source是被拖动的DOM元素。
onDrop
当可拖动元素被拖入目标容器并放置的时候触发,参数source是被拖动的DOM元素。
缩放
使用$.fn.resizable.defaults重载默认值。
rr"
border:
1px
solid
#rr'
).resizable({
maxWidth:
800,
3.
maxHeight:
600
4.});
disabled(禁止缩放)
如果设置为true将禁止缩放。
handles(句柄)
说明缩放的方向,'
n'
表示向上(北),'
e'
表示向右(东)等。
n,e,s,w,ne,se,sw,nw,all
minWidth(最小宽度)
缩放时所允许的最小宽度。
10
minHeight(最小高度)
缩放时所允许的最小高度。
maxWidth(最大宽度)
缩放时所允许的最大宽度。
10000
maxHeight
缩放时所允许的最大高度。
edge(边界)
将被缩放的边框的边界。
5
onStartResize
当开始缩放时触发。
onResize
在缩放过程中触发,当返回false时,DOM元素将不再缩放。
onStopResize
当缩放停止是触发。
分页
使用$.fn.pagination.defaults重载默认值。
依赖关系
∙链接按钮
使用指南
pp"
#efefef;
#pp'
).pagination({
total:
2000,
pageSize:
10
total(总数)
总记录数,当创建分页时必须设置。
1
pageSize(每页记录数)
每页显示的记录数。
pageNumber(当前页码)
当分页创建完毕时显示当前页码。
pageList(可选择的每页记录数)
array(数组)
用户能够改变每页显示的记录数。
[10,20,30,50]
loading(是否正在载入)
定义数据是否正在载入。
buttons(按钮)
自定义按钮,每个按钮包含2个属性:
iconCls:
显示背景图片的CSS类
handler:
当按钮被点击时调用的一个句柄函数
showPageList(显示可选择的每页记录数)
定义是否显示可选择的每页记录数。
showRefresh(显示刷新)
定义是否显示刷新按钮。
beforePageText(输入框之前的文本)
在输入框之前显示的符号。
Page
afterPageText(输入框之后的文本)
在输入框之后显示的符号。
of{pages}
displayMsg(显示信息)
在插件右上方显示分页信息。
Displaying{from}to{to}of{total}items
onSelectPage
pageNumber,pageSize
当用户进行翻页时触发,回调函数包含2个参数:
pageNumber:
下一页的页码
pageSize:
下一页的显示记录数
onBeforeRefresh
刷新之前触发,返回false将取消刷新。
onRefresh
刷新之后触发。
onChangePageSize
pageSize
当用户修改每页显示记录数时触发。
返回分页属性对象。
loading
提醒分页插件正在载入。
loaded
提醒分页插件已经载入。
搜索框
使用$.fn.searchbox.defaults重载默认值。
∙菜单按钮
创建搜索框
1.使用标签创建。
对input标签引用'
easyui-searchbox'
类。
script
type="
text/javascript"
function
qq(value,name){
alert(value+"
:
+name)
4.
}
5.<
/script>
6.<
input
ss"
class="
easyui-searchbox"
7.
searcher="
qq"
8.
prompt="
Please
Input
Value"
menu="
#mm"
300px"
/input>
9.<
mm"
120px"
10.
name="
all"
iconCls="
icon-ok"
All
News<
11.
sports"
Sports
12.<
2.使用脚本创建。
2.<
6.$('
#ss'
).searchbox({
200,
searcher:
function(value,name){
9.
alert(value
+
"
name)
},
menu:
#mm'
12.
prompt:
Value'
13.});
width(宽度)
设置组建的宽度。
auto
propmt(提醒)
显示在搜索框的提醒信息。
value(值)
搜索框的默认值。
menu(菜单)
搜索类型下拉菜单。
searcher(搜索器)
function(value,name)
当用户点击搜索按钮或者按下ENTER键的时候搜索函数将被调用。
返回搜索框属性对象。
menu
返回搜索类型菜单对象。
textbox
返回文本框对象。
getValue
返回当前搜索关键字。
setValue
value
设置新的搜索关键字。
getName
返回当前搜索类型。
destroy
清除搜索框组件
resize
width
重置搜索框组建的宽度。
进度条
使用$.fn.progressbar.defaults重载默认值。
∙无
创建进度条
进度条组件可以通过html标签或脚本两种方法创建。
使用html标签创建更容易,只需要对<
div>
标签引用'
easyui-progressbar'
p"
easyui-progressbar"
400px;
获取/设置进度值
为进度条获取当前进度值并且设置一个新的进度值。
1.var
value
=
$('
#p'
).progressbar('
getValue'
2.if
(value
100){
+=
Math.floor(Math.random()
*
10);
setValue'
value);
5.}
设置进度条的宽度。
当前进度,百分比数值。
text(文本)
显示在组件中的文本模板。
{value}%
onChange
newValue,oldValue
当进度发生改变时触发。
返回进度条属性对象。
重置进度条。
返回当前进度值。
设置一个新的进度值。
布局管理器
控制面板
使用$.fn.panel.defaults重载默认值。
创建控制面板
1.使用标签创建控制面板
使用标签创建控制面板十分简单,只须要对<
easyui-panel'
easyui-panel"
title="
My
Panel"
500px;
150px;
padding:
10px;
#fafafa;
icon-save"
closable="
true"
collapsible="
minimizable="
maximizable=true>
p>
panel
content.<
/p>
5.
2.使用脚本创建控制面板
下面的代码将创建一个工具栏在右上方的控制面板。
4.<
5.$('
).panel({
6.
500,
150,
title:
Panel'
tools:
[{
iconCls:
icon-add'
handler:
function(){alert('
new'
)}
},{
13.
icon-save'
14.
save'
15.
}]
16.});
移动控制面板
调用'
move'
方法可以将控制面板移动到一个新的位置。
).panel('
{
left:
100,
top:
100
载入内容
下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。
href:
content_url.php'
onLoad:
function(){
alert('
loaded
successfully'
6.});
title(标题)
显示在控制面板顶部的标题文本。
iconCls(图标CSS类)
在控制面板标题前显示一个16x16大小图标的CSS类。
设置控制面板的宽度。
height(高度)
设置控制面板的高度。
left(左边距)
设置控制面板的左边距。
top(顶边距)
设置控制面板的顶边距。
cls(类)
对控制面板引用一个CSS类。
headerCls(头部css类)
对控制面板头部引用一个CSS类。
bodyCls(主体类)
对控制面板主体引用一个CSS类。
style(样式)
object(对象)
给控制面板添加一个自定义的样式。
{}
fit(铺满浏览器)
设置为true时,控制面板的大小将铺满它所在的容器(浏览器)。
border(边框)
定义是否显示控制面板边框。
doSize(调整大小)
如果设置为true,在控制面板被创建时将被重置大小并且自动布局。
noheader(无头部)
如果设置为true,控制面板头部将不被创建。
content(内容)
控制面板主体的内容。
collapsible(可折叠)
定义是否显示可折叠按钮。
minimizable(最小化)
定义是否显示最小化按钮。
maximizable(最大化)
定义是否显示最大化按钮。
closable(关闭)
定义是否显示关闭按钮。
tools(工具栏)
自定义工具栏,每一个工具都可以包含2个属性:
图标类和句柄。
[]
collapsed(已折叠)
定义控制面板初始化时是否折叠。
minimized(已最小化)
定义控制面板初始化时是否最小化。
maximized(已最大化)
定义控制面板初始化时是否最大化。
closed(已关闭)
定义控制面板初始化时是否关闭。
href(超链接)
载入远程数据的超链接,载入的数据将显示在控制面板中。
cache(缓存)
如果设置为true,从超链接载入的数据将被缓存。
loadingMessage(载入时信息)
在正在载入远程数据时显示在控制面板中的信息。
Loading…
extractor(提取器)
function(函数)
定义如何从ajax返回值中提取内容,返回被提取的数据。
extractor:
function(data){
varpattern=/<
body[^>
]*>
((.|[\n\r])*)<
\/body>
/im;
varmatches=pattern.exec(data);
if(matches){
returnmatches[1];
//onlyextractbodycontent
}else{
returndata;
}
}
onLoad
在远程数据被载入时触发。
onBeforeOpen
在控制面板被打开之前触发,返回false将停止打开。
onOpen
在控制面板被打开之后触发。
onBeforeClose
在控制面板被关闭之前触发,返回false将取消关闭。
onClose
在控制面板被关闭后触发。
onBeforeDestroy
在控制面板被注销前触发,返回false将取消注销。
onDestroy
在控制面板被注销后触发。
onBeforeCollapse
在控制面板被折叠之前触发,返回false将停止折叠。
onCollapse
在控制面