jQuery UI resizable使用注意事項、實時等比例拉伸及你不知道的技巧

　　這篇文章總結的是我在使用resizable插件的過程當中，遇到的問題及變通應用的奇思妙想。

　　1、resizable使用注意事項

　　如下是我在jsfiddle上寫的測試demo：http://jsfiddle.net/pLuymmp1

　　

1 <div class="J_outer outer">
2     <div class="J_inner inner"></div>
3 </div>

html

1 .outer{width:100px;border:2px solid blue;}
2 .inner{width:50px;height:50px;border:2px solid green;margin:0 auto;}

css

 1 $(".J_outer").resizable({
 2     handles:"e"
 3 });
 4 $(".J_inner").resizable({
 5     handles:"e"
 6 });
 7 
 8 $(".J_outer").resizable("destroy");//解綁.J_outer的resizable
 9 $(".J_outer").resizable({
10     handles:"e"
11 });
12 
13 $(".J_inner").resizable("destroy");//解綁.J_inner的resizable
14 $(".J_inner").resizable({
15     handles:"e"
16 });

js

　　兩個父子關係的div，對其綁定resizable和解綁，都是有次序之分的，不然會致使意外的結果發生　　

　　1. 正確的綁定順序：要先綁定父級的resizable方法，再綁定其子級的resizable方法

　　若是是，先綁定子級、再綁定父級，測試結果是：

　　　　子級和父級都綁定上了操做手柄，可是父級div的操做手柄沒法響應拖拽事件，子級能夠。

　　　　

　　2.解綁父級的resizable，結果子級的resizable也被解綁

　　

　　3.解綁子級的resizable，父級的正常未受影響

　　

　　4.解綁子級的resizable，再重綁，子級和父級都可正常響應拖拽

　　5.解綁父級的resizable，再重綁，子級的resizable失效，父級的正常響應拖拽

　　因此，綁定的順序應爲由父到子，解綁父級的resizable，則須要對其子級進行重綁resizable。

 

　　2、操做手柄的變通妙用

　　首先要明白的是，resizable綁定的手柄最多隻能有e,s,w,n,se,sw,ne,nw八個方向的八個手柄，每一個方向有且只能有一個。

　　那問題來了，若是我想要在s方向有兩個手柄，應該要怎麼辦？

　　我在項目中就遇到這個問題，最後是以取巧的方式作到的。具體的方法是：再添加其他七個方向中的一個，而後在create的時候，將其特有的手柄class置換爲ui-resizable-s，就能夠了。

　　demo地址：http://jsfiddle.net/q58chj0h/

　　

　　當時解決這個問題，內心別提多開心，哈哈

　　

　　3、resizable存在的bug

　　jquery.ui.resizable aspectRatio在init後沒法進行從新設置

　　解決方法：

　　修復代碼：　　

1 var oldSetOption = $.ui.resizable.prototype._setOption;
2 $.ui.resizable.prototype._setOption = function(key, value) {
3     oldSetOption.apply(this, arguments);
4     if (key === "aspectRatio") {
5         this._aspectRatio = !!value;
6     }
7 };    

 

 

 　　這樣就能夠進行實時切換等比例和非等比例拉伸了，順便貼一下個人等比例拉伸實現代碼：

　　

//用於識別是否按等比例調整大小
$sw.mouseover(function(){
    $self.attr("aspectRatio", "1");
});
$se.mouseover(function(){
    $self.attr("aspectRatio", "1");
});
$ne.mouseover(function(){
    $self.attr("aspectRatio", "1");
});
$nw.mouseover(function(){
    $self.attr("aspectRatio", "1");
});
$n.mouseover(function(){
    $self.attr("aspectRatio", "0");
});
$e.mouseover(function(){
    $self.attr("aspectRatio", "0");
});
$s.mouseover(function(){
    $self.attr("aspectRatio", "0");
});
$w.mouseover(function(){
    $self.attr("aspectRatio", "0");
});

1 start:function(event,ui){
2 //判斷是否按等比例進行調整
3     if($(this).attr("aspectRatio") == "1"){
4         $(this).resizable("option", "aspectRatio", true); 
5     }else{
6         $(this).resizable("option", "aspectRatio", false); 
7     }
8 }

 via:cnblogs.com/walls/p/4256736.html