JQuery UI resizable usage considerations, real-time proportional stretching and tricks you don't know

Source: Internet
Author: User

This article summarizes the problems that I have encountered in the process of using the resizable plug-in, as well as the fantastic ideas for adapting to them.

  First, resizable use precautions

Here are the tests I wrote on Jsfiddle DEMO:HTTP://JSFIDDLE.NET/PLUYMMP1

  

1 <  class= "J_outer outer">2     <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 ({2Handles: "E"3 });4$(". J_inner "). Resizable ({5Handles: "E"6 });7 8$(". J_outer "). Resizable (" destroy ");//Unbind . J_outer's resizable9$(". J_outer "). Resizable ({TenHandles: "E" One }); A  -$(". J_inner "). Resizable (" destroy ");//Unbind . J_inner's resizable -$(". J_inner "). Resizable ({ theHandles: "E" -});
JS

The two-parent-child Div, which binds resizable and reconciles, is ordered, otherwise it can result in unexpected results.

1. Correct binding order: Bind the parent's resizable method first, then bind its children's resizable method

If it is, bind the child first, then bind the parent, and the test result is:

    both the child and parent are bound to the action handle, but the parent Div's action handle does not respond to the drag event, and the child can .

    

2. Unbind the parent resizable, and the resizable of the resulting child is also unbound

  

3. Unbind the resizable of the child, and the parent's normal unaffected

  

4. Resizable the child, then re-bind, the child and parent can respond to drag

5. Unbind the parent resizable, and then re-bind, the child and the parent can respond to the drag-and-drop

Therefore, the order of the bindings should be the parent-to-child, the resizable of the parent to be unbound, and the child must be re-bound resizable.

  Second, the operating handle of the adaptation

The first thing to understand is that theresizable bound handle can have up to eight handles in eight directions, with only one in each direction.

That's the problem, if I want to have two handles in the s direction, what should I do?

I encountered this problem in the project, and finally I did it in a trickery way. The specific method is: Add one of the remaining seven directions, and then at Create, the unique handle class is replaced with ui-resizable-s, it is possible.

Demo Address: http://jsfiddle.net/q58chj0h/

  

At that time to solve this problem, not to mention how happy, haha

  

  Third, the resizable existence of the bug

  Jquery.ui.resizable Aspectratio cannot be reset after init

  Workaround:

Fix code:

1 var oldsetoption = $.ui.resizable.prototype._setoption; 2 function (key, value) {3     oldsetoption.apply (this, arguments); 4     if (Key = = = "Aspectratio") {5         this. _aspectratio =!! value; 6     }7 };    

This allows for real-time switching and other proportional and non-proportional stretching, by the way, by pasting my equal-scale stretching implementation code:

  

//used to identify whether resizing is scaled proportionally$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");});
1Startfunction(event,ui) {2 //determine whether to adjust proportionally3     if($( This). attr ("aspectratio") = = "1"){4$( This). Resizable ("option", "Aspectratio",true); 5}Else{6$( This). Resizable ("option", "Aspectratio",false); 7     }8}

  

  

  

JQuery UI resizable usage considerations, real-time proportional stretching and tricks you don't know

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.