第一百九十五節，jQuery EasyUI，Resizable(調整大小)組件

jQuery EasyUI，Resizable(調整大小)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解 EasyUI 中 Resizeable(調整大小)組件的使用方法，調整大小就是可 以對元素可以拖着調整大小，這個組件不依賴於其他組件。

 

一．加載方式

//class 加載方式
<div id="rr" class="easyui-resizable"
　　data-options="maxWidth:800,maxHeight:600"
　　style="width:100px;height:100px;border:1px solid #ccc;">
</div>

//JS 加載調用
$('#box').resizable({
　　maxWidth:800,
　　maxHeight:600,
});

resizable()將制定元素執行調整大小方法

 

 

二．屬性列表

disabled  boolean 默認為 false，設置為 true 則禁用調整

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        disabled:true        //設置為 true 則禁用調整
    });
});

 

handles  string默認為 n,e,s,w,ne,se,sw,nw,all，聲明調整的方位，n 表示北（上）、e 表示東（右）、s 表示南（下）、w 表示西（左）、還有 ne（上右角）、se（下右角）、sw（下左角）、nw（上左角） 和 all（所有）

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        handles:'n'        //n 表示北（上）,只有上方可以調整大小
    });
});

 

minWidth  number 默認 10，調整大小時最小寬度

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        minWidth:200,         //調整大小時最小寬度
        minHeight:200         //調整大小時最小高度
    });
});

 

minHeight  number 默認 10，調整大小時最小高度

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        minWidth:200,         //調整大小時最小寬度
        minHeight:200         //調整大小時最小高度
    });
});

 

maxWidth  number 默認 10000，調整大小時最大寬度

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        maxWidth:200,         //調整大小時最大寬度
        maxHeight:200         //調整大小時最大高度
    });
});

 

maxHeight  number 默認 10000，調整大小時最大高度

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        maxWidth:200,         //調整大小時最大寬度
        maxHeight:200         //調整大小時最大高度
    });
});

 

edge  number 默認 5，邊框邊緣觸發大小，也就是元素邊緣多大像素范圍顯示拖拉指針

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        maxWidth:200,         //調整大小時最大寬度
        maxHeight:200,         //調整大小時最大高度
        edge:20             //也就是元素邊緣多大像素范圍顯示拖拉指針
    });
});

 

 

三．事件列表

onStartResize e 在開始改變大小的時候觸發

 

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        onStartResize:function (e) {
            alert('在開始改變大小的時候觸發');
        }
    });
});

 

 

 

onResize e在調整大小期間觸發。當返回 false 的時候，拖動時不會實際改變 DOM 元素大小。鼠標左鍵彈起時改變大小

 

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        onResize:function (e) {
            alert('在調整大小期間觸發。當返回 false 的時候，拖動時不會實際改變 DOM 元素大小。鼠標左鍵彈起時改變大小');
            return false;
        }
    });
});

 

 

 

onStopResize e 在停止改變大小的時候觸發，鼠標左鍵彈起時觸發

 

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        onStopResize:function (e) {
            alert('在停止改變大小的時候觸發,鼠標左鍵彈起時觸發');
        }
    });
});

 

 

 

四．方法列表

 

options  none 返回屬性對象

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        onStopResize:function (e) {
            alert('在停止改變大小的時候觸發,鼠標左鍵彈起時觸發');
        }
    });
    alert($('#box').resizable('options'));   //返回屬性對象,可以遍歷出里面的屬性
});

 

enable  none 啟用調整功能

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        onStopResize:function (e) {
            alert('在停止改變大小的時候觸發,鼠標左鍵彈起時觸發');
        }
    });
    $('#box').resizable('disable');   //禁用調整功能
    $('#box').resizable('enable');   //啟用調整功能
});

 

disable  none 禁用調整功能

 

/**
<div id="box">
    <div id="pox">內容部分</div>
</div>
 **/

$(function () {
    $('#box').resizable({    //將box元素執行調整大小方法
        onStopResize:function (e) {
            alert('在停止改變大小的時候觸發,鼠標左鍵彈起時觸發');
        }
    });
    $('#box').resizable('disable');   //禁用調整功能
    $('#box').resizable('enable');   //啟用調整功能
});

 

 

$.fn.resizable.defaults 重寫默認值對象。

 

 

$.fn.resizable.defaults.disabled = true;