一.EasyUI入门
1.使用方法
//方法一:
<div class="easyui-dialog" style="width:400px;height:200px" data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>
//方法二:(推荐使用)
<div id="box" title="标题" style="width:400px;height:200px" >
内容部分
</div>
$('#box').dialog();
2.常用方法
//所有组件解析完毕后调用
$.parser.onComplete = function(){
alert('UI组件解析完毕!');
}
二.Base基础
第三章.Draggable(拖动)组件
(1).加载方式
方式一:在div上加入样式:class="easyui-draggable"
方式二:在js上使用$('#box').draggable()
(2).参数配置
//配置参数
$('#box').draggable({
revert:true,//复位,拖动后回到初始位置
cursor : 'text',//设置鼠标拖动的样式
handle:'#pox',//设置可以拖动的位置
disabled : false,//设置是否可以拖动,true表示不可以拖动
edge:10,//可以在其中拖动容器的宽度,即:距离边界10px可以拖动
axis:'h',//设置拖动的方向,v表示垂直方式;h表示水平方向
onBeforeDrag:function(){
console.log('拖动前');
},
onStartDrag:function(){
console.log('拖动开始');
},
onDrag:function(){
console.log('拖动中...');
},
onStopDrag:function(){
console.log('拖动结束');
},
});
//外置属性配置
$('#box').draggable('options')//获取配置属性
$('#box').draggable('enable')//设置允许拖动
第四章.Droppable(放置)组件
//网页代码
<div id="dd" style="width:600px;height:400px;background:black"></div>
<div id="box" style="width:100px;height:100px;background:#ccc;">
<span id="pox">内容部分</span>
</div>
//js代码
$.fn.droppable.defaults.disabled = true;//重写默认的属性
$('#dd').droppable({
accept : '#box',
disabled : false,
onDragEnter : function (e, source) {
//console.log(source);
$(this).css('background', 'blue');
//alert('enter');
},
onDragOver : function (e, source) {
//console.log(source);
$(this).css('background', 'orange');
//alert('over');
},
onDragLeave : function (e, source) {
//console.log(source);
$(this).css('background', 'green');
//alert('over');
},
onDrop : function (e, source) {
//console.log(source);
$(this).css('background', 'maroon');
//alert('over');
},
//onDragEnter只触发一次,而Over会在不停的拖动中不停触发
//onDrop是放入到放置区,松开鼠标左键,丢下的操作
});
//console.log($('#dd').droppable('options'));
//$('#dd').droppable('disable');
//$('#dd').droppable('enable');
$('#box').draggable({
});
第五章.Resizable(调整大小)组件
//html部分
<div id="box" style="width:100px;height:100px;border: 1px solid blue;">
内容部分
</div>
//js部分
$('#box').resizable({
disabled:false,//是否禁用
handles:'e,s,se',//设置拖动的方向
minWidth:200,//设置最小的宽度
minHeight:200,//设置最小的高度
maxWidth:600,//设置最大的宽度
maxHeight:600,//设置最大的高度
edge:10,//设置拖拉边界的大小.默认5
onStartResize: function(e){
console.log('开始调整大小')
},
onResize: function(e){
console.log('调整大小ing...')
},
onStopResize: function(e){
console.log('停止调整大小')
},
});
第六章.Tooltip(提示框)组件
$('#aa').tooltip({
content:'<strong>这里是内容提示框</strong>',
position:'top',//提示框的位置,可以是上(top)下(bottom)左(left)右(right)
trackMouse:true,//跟随鼠标移动
// deltaX:100,
// deltaY:100,
showEvent:'click',
hideEvent:'mouseleave',
showDelay:500,//延迟500ms显示
hideDelay:500,//延迟500ms消失
onShow:function(e){
console.log('显示啦!');
},
onHide:function(e){
console.log('隐藏啦!')
},
onUpdate:function(content){
console.log('提示内容改变:'+content)
}
});
// tooltip方法列表:
$('#aa').tooltip('update','提示内容改变了');
$('#aa').tooltip('show');
第七章.LinkButton(按钮)组件
$('#btn').linkbutton({
// id:'btn1',//设置id
// disabled:false,//设置不可用
// toggle:true,//切换状态是否被选中,实现checkbox的效果
// selected:true,//默认是否被选中
// group:'sex',//按钮组,可实现radio的效果
// plain:true,//简洁效果
text:'我是按钮',//按钮文字
iconCls:'icon-add',//图标
iconAlign:'right'//图标位置.'left'和'right'
});
$('#btn2').linkbutton({
// id:'btn1',//设置id
// disabled:false,//设置不可用
// toggle:true,//切换状态是否被选中,实现checkbox的效果
// group:'sex',//需要配合toggle使用,两个都必须设置为true
iconCls:'icon-mini-add'
});
//外部方法:
console.log($('#btn').linkbutton('options'));
第八章.ProgressBar(进度条)组件
$('#box').progressbar({
width:400,
height:30,
value:30,
text:'{value}%',//默认文本
onChange:function(newValue,oldValue){
console.log(oldValue+'--->'+newValue);
},
});
setTimeout(function(){
$('#box').progressbar('setValue',0);
},1000);
setInterval(function(){
$('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
},200);