300px;height:
200px;background-color:
gray">
拖动标题
-->
拖动的属性：
revert:
true,
handle:
'#drag',//只有drag中的内容可以拖动
disable:
true,
拖动的事件：
e---->event事件
onBeforeDrag（）
onStartDrag（）
onDrag（）
onStopDrag（）
onbefore（）:
function（e）{
alert（e）;
};
onBeforeDrag（）:
function（e）{
alert（'拖动前触发'）;
};
onbeforeDrag（）:
function（e）{
returnfalse;//禁止拖动
}
方法列表：
$（'#demo'）.draggable（'disable'）;
$（'#demo'）.draggable（'enable'）;
alert（$（'#demo'）.draggable（'options'））;
console.log（$（'#demo'）.draggable（'options'））;
--
$（function（）{
$（'#demo2'）.draggable（{
revert:
true,
handle:
'#drag',
disable:
true
}）;
}）
-->
resizable组件
/*
$（'#demo4'）.resizable（{
maxWidth:
600,
maxHeight:
600,
onStartResize:
function（e）{
alert（e）;
console.log（'开始触发'）;
},
}）
*/
//console.log（$（'demo3）.resizable（'options'））;
tooltip提示框组件：
title
content
onShow显示的时候触发
onHid隐藏的时候出发
"type="input"name="username">
$（'input'）.tooltip（{
content:
"Thecontentisrequired!
",
}）;
linkbutton组件：
plain:
显示一个简洁效果
text:
按钮文字
iconCls:
'icon-add'
按钮1
按钮2
$（'#demo'）.linkbutton（{
plain:
true,
}）
progressbar进度条组件：
value:
60
width:
height:
text:
设置进度条百分比的模板,不推荐改动！
onChange:
function（newValue,oldValue）{
}
setValue
options:
返回对象属性
修改进度条的默认值：
$.fn.progressbar.default.value=30;
40,width:
300">
setTimeOut（function（）{
$（'#demo'）.progressbar（'setValue',70）;
},1000）;
setInterval（fn,time）;
$（'#demo'）.progressbar（{
width:
300,
onChange:
function（newValue,oldValue）{
console.log（newValue,oldValue）;
},
}）;
window.setInterval（function（）{
$（'#demo'）.progressbar（'setValue',$（'#demo'）.progressbar（'getValue'）+5）;
},500）;
panel面板组件：
true"title="面板"style="width:
300px;height:
200px">
文本内容
title
width
heigth
iconCls
fit:
自适应
border:
是否显示边框
noheader:
面板标题
content:
修改内容
collapsible:
是否显示折叠按钮
minimizable:
是否显示最小化按钮
maximizable:
是否显示最大化按钮
closable:
关闭按钮
tools:
工具栏设置
300px;height:
200px">
alert（'add'）">
alert（'delete'）">
alert（'edit'）">
alert（'find'）">
$（'#demo'）.panel（{
title:
'面板',
content:
"文本内容",
collapsible:
true,
minimizable:
true,
maximizable:
true,
closable:
true,
tools:
"#tools",
}）
vararr=['saab','Volo','Bmw'];
for（iinarr）{
alert（arr[i]）;
};
tabs选项卡组件：
依赖于panel和linkbutton组件
300px;height:
200px">
he
she
it
plain
fit
border
tools
tabPosition:
top（默认）,left/right/bottom
$（'#demo'）.tabs（{
width:
300,
height:
200,
tabPosition:
'left'
plain:
true,
fit:
true,
}）;
according分类组件：
依赖于panel组件
300px;height:
200px">
a
b
c
according=容器属性+面板属性
width
heigth
fit
border
animate:
展开和折叠是否显示动画效果（默认是有）
multiple:
是否同时展开多个面板
onSelect:
function（title,index）{};
$（'#demo'）.accordion（{
width:
500,
height:
600,
fit:
true,
animate:
true,
multiple:
true,
}）;
layout组件：
依赖于panel和resizable组件
重点区域面板属性
title
border
split每个面包可以自动调整大小
iconCls
collapsible默认是true
600px;height:
400px">
'north',title:
'top',split:
true,iconCls:
'icon-help'"style="height:
60px">
'south',title:
'bottom',split:
true"style="height:
60px">
'east',title:
'right',split:
true"style="width:
50px">
'west',title:
'left',split:
true"style="width:
50px">
'center',title:
'center',split:
true">
window组件：
依赖draggable和resizable组件，实现布局功能。
iconCls
modal模态
title
collapsible
width
heigth
closable
minizable
maximizable
draggable
resizable
shadow
true,resizable:
false"style="width:
600px;height:
400px">
$（'#demo'）.window（{
title:
'tom',
modal:
true,
draggable:
false,
resizable:
false
}）;
600px;height:
400px">
true">
'center'">content
'west'"style="width:
80px">left
'south',border:
false"style="height:
100px">
'icon-ok'"style="width:
60px">确定
'icon-cancel'"style="width:
60px">取消
dialog:
依赖于window和linkbutton组件
因为默认值不同导致每个组件的语义不同
width
heigth
title
modal
toolbar:
'#tt'
buttons:
texticonClshandler
300,height:
200">
true">文件
true">编辑
true">帮助
$（'#demo'）.dialog（{
width:
400,
height:
200,
modal:
true,
toolbar:
[{
text:
'编辑',
iconCls:
'icon-edit',
handler:
function（）{
alert（'edit'）;
},
},{
text:
'删除',
iconCls:
'icon-remove',
handler:
function（）{
alert（'remove'）;
},
}]
}）;
message：
依赖于window和progressbar组件
$.message.alert（title,question,info,warning,fn（异步））
警告框
$.messager.alert（'提示框','是否确认?
','info',function（）{
alert（"已经成功删除!
"）;
}）;
确认框
$.messager.confirm（'确认框','你真的要删除吗',function（flag）{
if（flag）{
alert（'删除成功'）;
}
}）
输入框
$.messager.prompt（'提示框','请输入你的名字',function（content）{
if（content）{
alert（content）;
}
}）
进度条：
$.messager.progress（{
title:
'执行中',
msg:
'上传文件中',
interval:
1000
//默认为300毫秒
}）
消息框：
$.messager.show（{
title:
'提示消息',
msg:
'修改成功',
timeout:
500
}）
menu:
不依赖于其他组件
menubutton:
依赖于menu和linkbutton组件
'icon-save',menu:
'#nest'">文件
'icon-remove'">增加
'icon-add'">删除
'icon-edit'">修改
$（'#demo'）.menubutton（{
text:
'文件',
iconCls:
'icon-search',
menu:
'#nest'
}）
splitbutton组件：
依赖menu和linkbutton组件
类似于menubutton，只是多了一个分节符
pagination:
依赖于linkbutton组件
total
pageSize
pageNumber
layout
showRefresh
pageList[10,20,30]默认设置
onSelectPage:
function（pageNumber,pageSize）{
展开阅读全文
相关搜索
升级会员 