EasyUI学习笔记(1)_网易课堂_EasyUI入门/Base基础

一．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);