1. 程式人生 > >基於jquery的監聽某個元素高度變化resize事件

基於jquery的監聽某個元素高度變化resize事件

    //一個jquery的外掛,用於監聽元素寬度高度變化,呼叫方式:
    //$("classname").bind('resize',function(){
        //callback
        //...
        //...
    //});
     (function ($, window, undefined) {
                var elems = $([]),
                    jq_resize = $.resize = $.extend($.resize, {}),
                    timeout_id,
                    str_setTimeout = 'setTimeout',
                    str_resize = 'resize',
                    str_data = str_resize + '-special-event',
                    str_delay = 'delay',
                    str_throttle = 'throttleWindow';
                jq_resize[str_delay] = 250;
                jq_resize[str_throttle] = true;
                $.event.special[str_resize] = {
                    setup: function () {
                        if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                            return false;
                        }
                        var elem = $(this);
                        elems = elems.add(elem);
                        $.data(this, str_data, {
                            w: elem.width(),
                            h: elem.height()
                        });
                        if (elems.length === 1) {
                            loopy();
                        }
                    },
                    teardown: function () {
                        if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                            return false;
                        }
                        var elem = $(this);
                        elems = elems.not(elem);
                        elem.removeData(str_data);
                        if (!elems.length) {
                            clearTimeout(timeout_id);
                        }
                    },
                    add: function (handleObj) {
                        if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                            return false;
                        }
                        var old_handler;

                        function new_handler(e, w, h) {
                            var elem = $(this),
                                data = $.data(this, str_data);
                            data.w = w !== undefined ? w : elem.width();
                            data.h = h !== undefined ? h : elem.height();
                            old_handler.apply(this, arguments);
                        }

                        if ($.isFunction(handleObj)) {
                            old_handler = handleObj;
                            return new_handler;
                        } else {
                            old_handler = handleObj.handler;
                            handleObj.handler = new_handler;
                        }
                    }
                };

                function loopy() {
                    timeout_id = window[str_setTimeout](function () {
                        elems.each(function () {
                            var elem = $(this),
                                width = elem.width(),
                                height = elem.height(),
                                data = $.data(this, str_data);
                            if (width !== data.w || height !== data.h) {
                                elem.trigger(str_resize, [data.w = width, data.h = height]);
                            }
                        });
                        loopy();
                    }, jq_resize[str_delay]);
                }
            })(jQuery, this);

呼叫方式

//bind resize事件
$("body").bind('resize',function(){
    //callback
    //...
    //...
});