resize.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

                }
            }
            return [oh, ow, t, l];
        },
        /** 
        * @private
        * @method _updateStatus
        * @param {Number} h The new height setting.
        * @param {Number} w The new width setting.
        * @param {Number} t The new top setting.
        * @param {Number} l The new left setting.
        * @description Using the Height, Width, Top & Left, it updates the status element with the elements sizes.
        */
        _updateStatus: function(h, w, t, l) {
            if (this._resizeEvent && (!Lang.isString(this._resizeEvent))) {
                if (this.get('status')) {
                    D.setStyle(this._status, 'display', 'inline');
                }
                h = ((h === 0) ? this._cache.start.height : h);
                w = ((w === 0) ? this._cache.start.width : w);
                var h1 = parseInt(this.get('height'), 10),
                    w1 = parseInt(this.get('width'), 10);
                
                if (isNaN(h1)) {
                    h1 = parseInt(h, 10);
                }
                if (isNaN(w1)) {
                    w1 = parseInt(w, 10);
                }
                var diffH = (parseInt(h, 10) - h1);
                var diffW = (parseInt(w, 10) - w1);
                this._cache.offsetHeight = diffH;
                this._cache.offsetWidth = diffW;
                this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
                D.setXY(this._status, [Event.getPageX(this._resizeEvent) + 12, Event.getPageY(this._resizeEvent) + 12]);
            }
        },
        /** 
        * @method lock
        * @description Lock the resize so it can't be resized
        * @param {Boolean} dd If the draggable config is set, lock it too
        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
        */
        lock: function(dd) {
            this._locked = true;
            if (dd && this.dd) {
                D.removeClass(this._wrap, 'yui-draggable');
                this.dd.lock();
            }
            return this;
        },
        /** 
        * @method unlock
        * @description Unlock the resize so it can be resized
        * @param {Boolean} dd If the draggable config is set, unlock it too
        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
        */
        unlock: function(dd) {
            this._locked = false;
            if (dd && this.dd) {
                D.addClass(this._wrap, 'yui-draggable');
                this.dd.unlock();
            }
            return this;
        },
        /** 
        * @method isLocked
        * @description Check the locked status of the resize instance
        * @return {Boolean}
        */
        isLocked: function() {
            return this._locked;
        },
        /** 
        * @method reset
        * @description Resets the element to is start state.
        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
        */
        reset: function() {
            this.resize(null, this._cache.start.height, this._cache.start.width, this._cache.start.top, this._cache.start.left, true);
            return this;
        },
        /** 
        * @private
        * @method resize
        * @param {Event} ev The mouse event.
        * @param {Number} h The new height setting.
        * @param {Number} w The new width setting.
        * @param {Number} t The new top setting.
        * @param {Number} l The new left setting.
        * @param {Boolean} force Resize the element (used for proxy resize).
        * @param {Boolean} silent Don't fire the beforeResize Event.
        * @description Resizes the element, wrapper or proxy based on the data from the handlers.
        * @return {<a href="YAHOO.util.Resize.html">YAHOO.util.Resize</a>} The Resize instance
        */
        resize: function(ev, h, w, t, l, force, silent) {
            if (this._locked) {
                return false;
            }
            this._resizeEvent = ev;
            var el = this._wrap, anim = this.get('animate'), set = true;
            if (this._proxy && !force) {
                el = this._proxy;
                anim = false;
            }
            this._setAutoRatio(ev);
            if (this._positioned) {
                if (this._proxy) {
                    t = this._cache.top - t;
                    l = this._cache.left - l;
                }
            }

            var ratio = this._setRatio(h, w, t, l);
            h = parseInt(ratio[0], 10);
            w = parseInt(ratio[1], 10);
            t = parseInt(ratio[2], 10);
            l = parseInt(ratio[3], 10);

            if (t == 0) {
                //No Offset, get from cache
                t = D.getY(el);
            }
            if (l == 0) {
                //No Offset, get from cache
                l = D.getX(el);
            }

            

            if (this._positioned) {
                if (this._proxy && force) {
                    if (!anim) {
                        el.style.top = this._proxy.style.top;
                        el.style.left = this._proxy.style.left;
                    } else {
                        t = this._proxy.style.top;
                        l = this._proxy.style.left;
                    }
                } else {
                    if (!this.get('ratio') && !this._proxy) {
                        t = this._cache.top + -(t);
                        l = this._cache.left + -(l);
                    }
                    if (t) {
                        if (this.get('minY')) {
                            if (t < this.get('minY')) {
                                t = this.get('minY');
                            }
                        }
                        if (this.get('maxY')) {
                            if (t > this.get('maxY')) {
                                t = this.get('maxY');
                            }
                        }
                    }
                    if (l) {
                        if (this.get('minX')) {
                            if (l < this.get('minX')) {
                                l = this.get('minX');
                            }
                        }
                        if (this.get('maxX')) {
                            if ((l + w) > this.get('maxX')) {
                                l = (this.get('maxX') - w);
                            }
                        }
                    }
                }
            }
            if (!silent) {
                var beforeReturn = this.fireEvent('beforeResize', { ev: 'beforeResize', target: this, height: h, width: w, top: t, left: l });
                if (beforeReturn === false) {
                    return false;
                }
            }

            this._updateStatus(h, w, t, l);

            if (this._positioned) {
                if (this._proxy && force) {
                    //Do nothing
                } else {
                    if (t) {
                        D.setY(el, t);
                        this._cache.top = t;
                    }
                    if (l) {
                        D.setX(el, l);
                        this._cache.left = l;
                    }
                }
            }
            if (h) {
                if (!anim) {
                    set = true;
                    if (this._proxy && force) {
                        if (!this.get('setSize')) {
                            set = false;
                        }
                    }
                    if (set) {
                        if (this.browser.ie > 6) {
                            if (h === this._cache.height) {
                                h = h + 1;
                            }
                        }
                        el.style.height = h + 'px';
                    }
                    if ((this._proxy && force) || !this._proxy) {
                        if (this._wrap != this.get('element')) {
                            this.get('element').style.height = h + 'px';
                        }
                    }
                }
                this._cache.height = h;
            }
            if (w) {
                this._cache.width = w;
                if (!anim) {
                    set = true;
                    if (this._proxy && force) {
                        if (!this.get('setSize')) {
                            set = false;
                        }
                    }
                    if (set) {
                        el.style.width = w + 'px';
                    }
                    if ((this._proxy && force) || !this._proxy) {
                        if (this._wrap != this.get('element')) {
                            this.get('element').style.width = w + 'px';
                        }
                    }
                }
            }
            if (anim) {
                if (YAHOO.util.Anim) {
                    var _anim = new YAHOO.util.Anim(el, {
                        height: {
                            to: this._cache.height
                        },
                        width: {
                            to: this._cache.width
                        }
                    }, this.get('animateDuration'), this.get('animateEasing'));
                    if (this._positioned) {
                        if (t) {
                            _anim.attributes.top = {
                                to: parseInt(t, 10)
                            };
                        }
                        if (l) {
                            _anim.attributes.left = {
                                to: parseInt(l, 10)
                            };
                        }
                    }

                    if (this._wrap != this.get('element')) {
                        _anim.onTween.subscribe(function() {
                            this.get('element').style.height = el.style.height;
                            this.get('element').style.width = el.style.width;
                        }, this, true);
                    }

                    _anim.onComplete.subscribe(function() {
                        this.set('height', h);
                        this.set('width', w);
                        this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
                    }, this, true);
                    _anim.animate();

                }
            } else {
                if (this._proxy && !force) {
                    this.fireEvent('proxyResize', { ev: 'proxyresize', target: this, height: h, width: w, top: t, left: l });
                } else {
                    this.fireEvent('resize', { ev: 'resize', target: this, height: h, width: w, top: t, left: l });
                }
            }
            return this;
        },
        /** 
        * @private
        * @method _handle_for_br
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Bottom Right handle.
        */
        _handle_for_br: function(args) {
            var newW = this._setWidth(args.e);
            var newH = this._setHeight(args.e);
            this.resize(args.e, (newH + 1), newW, 0, 0);
        },
        /** 
        * @private
        * @method _handle_for_bl
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Bottom Left handle.
        */
        _handle_for_bl: function(args) {
            var newW = this._setWidth(args.e, true);
            var newH = this._setHeight(args.e);
            var l = (newW - this._cache.width);
            this.resize(args.e, newH, newW, 0, l);
        },
        /** 
        * @private
        * @method _handle_for_tl
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Top Left handle.
        */
        _handle_for_tl: function(args) {
            var newW = this._setWidth(args.e, true);
            var newH = this._setHeight(args.e, true);
            var t = (newH - this._cache.height);
            var l = (newW - this._cache.width);
            this.resize(args.e, newH, newW, t, l);
        },
        /** 
        * @private
        * @method _handle_for_tr
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Top Right handle.
        */
        _handle_for_tr: function(args) {
            var newW = this._setWidth(args.e);
            var newH = this._setHeight(args.e, true);
            var t = (newH - this._cache.height);
            this.resize(args.e, newH, newW, t, 0);
        },
        /** 
        * @private
        * @method _handle_for_r
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Right handle.
        */