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