Home > Web Front-end > JS Tutorial > jQuery plug-in Resizable

jQuery plug-in Resizable

巴扎黑
Release: 2017-06-29 09:27:30
Original
1951 people have browsed it

jQuery.resizable is a plug-in developed based on jQuery, which provides users with html dom resize behavior.

For example, the following html dom exists:


Assume that p in the entire blue border is an object that needs to be changed in size. The red part in the picture is the 'handle'. Then when the mouse drags the 'handle', the size of p will follow. Change.

You can download the source code here first: jQuery.resizable.js

API introduction:

handler(String|Object): Drag Drag handle, such as a general window, the lower right corner is the drag handle. When you click the drag handle, the length and width of the entire object will be changed. The default value is null, which must be specified. It can be a jQuery filter object, such as '.resize ' or '#resize', it can also be a jQuery object, such as $('.resize'),
min(Object): json object, including two properties, width and height, that is, change The minimum limited length and width of the object size, the default value is { width: 0, height: 0 },
max(Object): json object, including two attributes, width and height, that is, change The maximum length and width of the object size, the default value is { width: $(document).width(), height: $(document).height() },
onResize(Function): Trigger event during the size change. The resizable plug-in will pass a parameter to this method. For details, please view the source code and Demo. The default is: function() { },
onStop(Function): The trigger event when the size change ends. The resizable plug-in will pass a parameter to this method. For details, please view the source code and Demo. The default is: function() { }

Note:

Because onResize is triggered every time the size changes, it is relatively frequent. You should avoid processing overly complex content or content in this event. Frequent acquisition of dom objects will cause the size of the object to change and cannot keep up with the movement of the mouse. You can use some tricks to handle it (for example, when width%2==0?).

Online demo: live demo

The above is the detailed content of jQuery plug-in Resizable. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template