Resizable of jquery plug-in

Jquery. resizable is a plug-in developed based on jquery to provide users with HTML Dom resize behavior.

For example, the following HTML Dom exists:

Assume that the DIV of the entire blue border is the object whose size needs to be changed, and the red part in the figure is the 'handler'. When you drag the 'handler' mouse, the size of the DIV will change accordingly.

You can download the source code jquery. resizable. js first.

API introduction:

Handler (string | object): Drag the handle. For example, in a normal window, the drag handle is in the lower right corner. When you click the drag handle, the length and width of the entire object will be changed. The default value is null and must be specified. It can be a jquery filter object, for example '. resize 'or' # resize ', which can also be a jquery object, such as $ ('. resize '),
Min (object): JSON object, including two attributes: width and height, that is, the minimum limited length and width value for changing the object size. The default value is {width: 0, height: 0 },
Max (object): JSON object, which includes two attributes: width and height, that is, the maximum limited length and width of the object size. The default value is {width: $ (document ). width (), height: $ (document ). height ()},
Onresize (function): The trigger event during the size change process. The resizable plug-in will pass a parameter to this method. For details, see the source code and demo. The default value 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, see the source code and demo. The default value is function (){}

Note:

Because onresize is triggered every time the size changes, it is frequent and should avoid processing too complex content in this event or frequently obtaining DOM objects, this will cause the object size to change and cannot keep up with the mouse action. You can use some tips for processing (for example, when width % 2 = 0 ?).

Online Demo: Live Demo