Detailed explanation of jQuery.resize() function

The resize() function is used to bind a handler function to the resize event of each matching element. This function can also be used to trigger the resize event. In addition, you can also pass some additional data to the event handling function.

The resize event is triggered when the size of the element is adjusted. This event is commonly used in window objects (browser windows) or frame pages.

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the resize event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via resize(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.resize( [ [ data ,] handler ] )

If at least one parameter is specified, it means binding the handler function of the resize event; if not specified Any parameter means triggering the resize event.

Parameters

Parameter Description

data Optional/Any type of data that needs to be passed to the event processing function through event.data when an event is triggered.

handler Optional/event handling function specified by Function type.

jQuery 1.4.3 new support: resize() supports data parameter.

This in the parameter handler points to the current DOM element. resize() will also pass in a parameter to the handler: the Event object representing the current event.

If the return value of the function handler is false, it means to prevent the element's default event behavior and stop the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented.

The handler function of the form's resize event returns false, which can prevent the form's default form submission behavior.

Return value

resize()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Now, we bind the handler function to the resize event of the window object (you can bind multiple ones, and they will be executed in sequence according to the binding order when triggered):

$(window).resize( function(){

alert("Resizing the window is not recommended!");

} );

// Trigger window object The resize event

// $(window).resize( );

We can also pass some additional data to the event handling function. In addition, through the parameter Event object passed in by jQuery for the event processing function, we can obtain relevant information about the current event (such as event type, DOM element that triggered the event, additional data, etc.):

var minSize = { width: 800, height: 600 };
$(window).resize( minSize, function(event){
    var min = event.data;
    var $dom = $(this);
    if( $dom.width() < min.width ){
        $("body").append("<br>窗口宽度不要小于" + min.width );
    }else if( $dom.height() < min.height ){
        $("body").append("<br>窗口高度不要小于" + min.height);
    }
} );

The above is the detailed content of Detailed explanation of jQuery.resize() function. For more information, please follow other related articles on the PHP Chinese website!