jQuery plug-in Resizable

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!