jQuery UI resizable使用上の注意事項、リアルタイムなどのスケールストレッチ、知らないテクニック

この文章はresizableプラグインを使用する過程で出会った問題と変通アプリケーションの不思議な考えをまとめたものです.
一、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
2つの親子関係のdivは、resizableと解縛をバインドする順序があります.そうしないと、意外な結果が発生します.
　　1.正しいバインド順序:親のresizableメソッドをバインドしてから、子のresizableメソッドをバインドします.
もしそうであれば、子をバインドしてから親をバインドします.テストの結果は次のとおりです.
子と親は操作ハンドルにバインドされていますが、親divの操作ハンドルはドラッグイベントに応答できません.子はできます.
　　　　
　　2.親のresizableを結合解除し、結果として子のresizableも結合解除されます.
　　
　　3.子レベルのresizableをバインド解除し、親レベルの正常な影響を受けません.
　　
　　4.子レベルのresizableをバインド解除し、再バインドすると、子レベルと親レベルが正常にドラッグ&ドロップに応答します.
　　5.親のresizableをバインド解除し、再バインドし、子のresizableが無効になり、親の正常な応答がドラッグされます.
したがって、バインドの順序は、親から子、親のresizableを解くために、子を再バインドする必要があります.
 
二、操作ハンドルの融通の妙用
まず、resizableバインドのハンドルは、最大e,s,w,n,se,sw,ne,nwの8つの方向の8つのハンドルしかなく、各方向に1つしかありません.
問題が来ました.もし私がs方向に2つのハンドルを持ちたいなら、どうすればいいですか?
私はプロジェクトの中でこの問題に直面して、最後に巧みな方法でやったのです.具体的には、残りの7つの方向の1つを追加し、createのときに、その特有のハンドルclassをui-resizable-sに置き換えるといいです.
demoアドレス:http://jsfiddle.net/q58chj0h/
　　
その时この问题を解决して、心の中はどんなに楽しいと言わないでください、ははは
　　
三、resizableに存在するバグ
　　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