jQuery.resizable 是基于jQuery開(kāi)發(fā)的一款插件, 為用戶(hù)提供html dom resize 行為.

例如存在如下的html dom:

假設(shè)整個(gè)藍(lán)色邊框的div為需要改變大小的對(duì)象, 圖中紅色部分為'柄', 那么當(dāng)鼠標(biāo)拖動(dòng)'柄'時(shí),div的大小將會(huì)隨之改變.

大家可以先到此下載源碼: jQuery.resizable.js

API簡(jiǎn)介:

handler(String|Object): 拖拽柄, 比如一般的窗口, 右下角就為拖拽柄, 當(dāng)點(diǎn)擊拖拽柄使會(huì)改變整個(gè)對(duì)象的長(zhǎng)寬值, 默認(rèn)值為 null, 必須指定, 可為jQuery篩選器對(duì)象，如 '.resize' 或 '#resize' , 也可以為jQuery對(duì)象，如 $('.resize'),
min(Object): json對(duì)象,包括兩個(gè)屬性, width 和 height, 即改變對(duì)象大小的最小限定長(zhǎng)寬值, 默認(rèn)值為 { width: 0, height: 0 },
max(Object): json對(duì)象,包括兩個(gè)屬性, width 和 height, 即改變對(duì)象大小的最大限定長(zhǎng)寬值, 默認(rèn)值為 { width: $(document).width(), height: $(document).height() },
onResize(Function): 大小改變過(guò)程中的觸發(fā)事件, resizable插件會(huì)向此方法傳遞一個(gè)參數(shù),具體內(nèi)容可查看源碼和Demo, 默認(rèn)為: function() { },
onStop(Function): 大小改變結(jié)束時(shí)的觸發(fā)事件, resizable插件會(huì)向此方法傳遞一個(gè)參數(shù),具體內(nèi)容可查看源碼和Demo, 默認(rèn)為: function() { }

注意事項(xiàng):

由于onResize是在每次大小改變時(shí)都會(huì)觸發(fā), 所以比較頻繁, 應(yīng)避免在此事件中處理過(guò)于復(fù)雜的內(nèi)容或頻繁獲取dom對(duì)象, 這樣會(huì)造成對(duì)象大小改變無(wú)法跟上鼠標(biāo)的動(dòng)作, 可以使用一些小技巧進(jìn)行處理(例如當(dāng)width%2==0時(shí)執(zhí)行?).

在線演示: live demo

it知識(shí)庫(kù)：jQuery插件之Resizable，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。