resize.js

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

        _handle_for_r: function(args) {
            this._dds.r.setYConstraint(0,0);
            var newW = this._setWidth(args.e);
            this.resize(args.e, 0, newW, 0, 0);
        },
        /** 
        * @private
        * @method _handle_for_l
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Left handle.
        */
        _handle_for_l: function(args) {
            this._dds.l.setYConstraint(0,0);
            var newW = this._setWidth(args.e, true);
            var l = (newW - this._cache.width);
            this.resize(args.e, 0, newW, 0, l);
        },
        /** 
        * @private
        * @method _handle_for_b
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Bottom handle.
        */
        _handle_for_b: function(args) {
            this._dds.b.setXConstraint(0,0);
            var newH = this._setHeight(args.e);
            this.resize(args.e, newH, 0, 0, 0);
        },
        /** 
        * @private
        * @method _handle_for_t
        * @param {Object} args The arguments from the CustomEvent.
        * @description Handles the sizes for the Top handle.
        */
        _handle_for_t: function(args) {
            this._dds.t.setXConstraint(0,0);
            var newH = this._setHeight(args.e, true);
            var t = (newH - this._cache.height);
            this.resize(args.e, newH, 0, t, 0);
        },
        /** 
        * @private
        * @method _setWidth
        * @param {Event} ev The mouse event.
        * @param {Boolean} flip Argument to determine the direction of the movement.
        * @description Calculates the width based on the mouse event.
        * @return {Number} The new value
        */
        _setWidth: function(ev, flip) {
            var xy = this._cache.xy[0],
                w = this._cache.width,
                x = Event.getPageX(ev),
                nw = (x - xy);

                if (flip) {
                    nw = (xy - x) + parseInt(this.get('width'), 10);
                }
                
                nw = this._snapTick(nw, this.get('yTicks'));
                nw = this._checkWidth(nw);
            return nw;
        },
        /** 
        * @private
        * @method _checkWidth
        * @param {Number} w The width to check.
        * @description Checks the value passed against the maxWidth and minWidth.
        * @return {Number} the new value
        */
        _checkWidth: function(w) {
            if (this.get('minWidth')) {
                if (w <= this.get('minWidth')) {
                    w = this.get('minWidth');
                }
            }
            if (this.get('maxWidth')) {
                if (w >= this.get('maxWidth')) {
                    w = this.get('maxWidth');
                }
            }
            return w;
        },
        /** 
        * @private
        * @method _checkHeight
        * @param {Number} h The height to check.
        * @description Checks the value passed against the maxHeight and minHeight.
        * @return {Number} The new value
        */
        _checkHeight: function(h) {
            if (this.get('minHeight')) {
                if (h <= this.get('minHeight')) {
                    h = this.get('minHeight');
                }
            }
            if (this.get('maxHeight')) {
                if (h >= this.get('maxHeight')) {
                    h = this.get('maxHeight');
                }
            }
            return h;
        },
        /** 
        * @private
        * @method _setHeight
        * @param {Event} ev The mouse event.
        * @param {Boolean} flip Argument to determine the direction of the movement.
        * @description Calculated the height based on the mouse event.
        * @return {Number} The new value
        */
        _setHeight: function(ev, flip) {
            var xy = this._cache.xy[1],
                h = this._cache.height,
                y = Event.getPageY(ev),
                nh = (y - xy);

                if (flip) {
                    nh = (xy - y) + parseInt(this.get('height'), 10);
                }
                nh = this._snapTick(nh, this.get('xTicks'));
                nh = this._checkHeight(nh);
                
            return nh;
        },
        /** 
        * @private
        * @method _snapTick
        * @param {Number} size The size to tick against.
        * @param {Number} pix The tick pixels.
        * @description Adjusts the number based on the ticks used.
        * @return {Number} the new snapped position
        */
        _snapTick: function(size, pix) {
            if (!size || !pix) {
                return size;
            }
            var _s = size;
            var _x = size % pix;
            if (_x > 0) {
                if (_x > (pix / 2)) {
                    _s = size + (pix - _x);
                } else {
                    _s = size - _x;
                }
            }
            return _s;
        },
        /** 
        * @private
        * @method init
        * @description The Resize class's initialization method
        */        
        init: function(p_oElement, p_oAttributes) {
            this._locked = false;
            this._cache = {
                xy: [],
                height: 0,
                width: 0,
                top: 0,
                left: 0,
                offsetHeight: 0,
                offsetWidth: 0,
                start: {
                    height: 0,
                    width: 0,
                    top: 0,
                    left: 0
                }
            };

            Resize.superclass.init.call(this, p_oElement, p_oAttributes);

            this.set('setSize', this.get('setSize'));

            if (p_oAttributes.height) {
                this.set('height', parseInt(p_oAttributes.height, 10));
            }
            if (p_oAttributes.width) {
                this.set('width', parseInt(p_oAttributes.width, 10));
            }
            
            var id = p_oElement;
            if (!Lang.isString(id)) {
                id = D.generateId(id);
            }
            Resize._instances[id] = this;

            this._active = false;
            
            this._createWrap();
            this._createProxy();
            this._createHandles();

        },
        /**
        * @method getProxyEl
        * @description Get the HTML reference for the proxy, returns null if no proxy.
        * @return {HTMLElement} The proxy element
        */      
        getProxyEl: function() {
            return this._proxy;
        },
        /**
        * @method getWrapEl
        * @description Get the HTML reference for the wrap element, returns the current element if not wrapped.
        * @return {HTMLElement} The wrap element
        */      
        getWrapEl: function() {
            return this._wrap;
        },
        /**
        * @method getStatusEl
        * @description Get the HTML reference for the status element.
        * @return {HTMLElement} The status element
        */      
        getStatusEl: function() {
            return this._status;
        },
        /**
        * @method getActiveHandleEl
        * @description Get the HTML reference for the currently active resize handle.
        * @return {HTMLElement} The handle element that is active
        */      
        getActiveHandleEl: function() {
            return this._handles[this._currentHandle];
        },
        /**
        * @method isActive
        * @description Returns true or false if a resize operation is currently active on the element.
        * @return {Boolean}
        */      
        isActive: function() {
            return ((this._active) ? true : false);
        },
        /**
        * @private
        * @method initAttributes
        * @description Initializes all of the configuration attributes used to create a resizable element.
        * @param {Object} attr Object literal specifying a set of 
        * configuration attributes used to create the utility.
        */      
        initAttributes: function(attr) {
            Resize.superclass.initAttributes.call(this, attr);

            /**
            * @attribute useShime
            * @description This setting will be passed to the DragDrop instances on the resize handles and for the draggable property.
            * This property should be used if you want the resize handles to work over iframe and other elements.
            * @type Boolean
            */
            this.setAttributeConfig('useShim', {
                value: ((attr.useShim === true) ? true : false),
                validator: YAHOO.lang.isBoolean,
                method: function(u) {
                    for (var i in this._dds) {
                        if (Lang.hasOwnProperty(this._dds, i)) {
                            this._dds[i].useShim = u;
                        }
                    }
                    if (this.dd) {
                        this.dd.useShim = u;
                    }
                }
            });
            /**
            * @attribute setSize
            * @description Set the size of the resized element, if set to false the element will not be auto resized,
            * the resize event will contain the dimensions so the end user can resize it on their own.
            * This setting will only work with proxy set to true and animate set to false.
            * @type Boolean
            */
            this.setAttributeConfig('setSize', {
                value: ((attr.setSize === false) ? false : true),
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute wrap
            * @description Should we wrap the element
            * @type Boolean
            */
            this.setAttributeConfig('wrap', {
                writeOnce: true,
                validator: YAHOO.lang.isBoolean,
                value: attr.wrap || false
            });

            /**
            * @attribute handles
            * @description The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'. Defaults to: ['r', 'b', 'br'].
            * Can use a shortcut of All. Note: 8 way resizing should be done on an element that is absolutely positioned.
            * @type Array
            */
            this.setAttributeConfig('handles', {
                writeOnce: true,
                value: attr.handles || ['r', 'b', 'br'],
                validator: function(handles) {
                    if (Lang.isString(handles) && handles.toLowerCase() == 'all') {
                        handles = ['t', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'];
                    }
                    if (!Lang.isArray(handles)) {
                        handles = handles.replace(/, /g, ',');
                        handles = handles.split(',');
                    }
                    this._configs.handles.value = handles;
                }
            });

            /**
            * @attribute width
            * @description The width of the element
            * @type Number
            */
            this.setAttributeConfig('width', {
                value: attr.width || parseInt(this.getStyle('width'), 10),
                validator: YAHOO.lang.isNumber,
                method: function(width) {
                    width = parseInt(width, 10);
                    if (width > 0) {
                        if (this.get('setSize')) {
                            this.setStyle('width', width + 'px');
                        }
                        this._cache.width = width;
                        this._configs.width.value = width;
                    }
                }
            });

            /**
            * @attribute height
            * @description The height of the element
            * @type Number
            */
            this.setAttributeConfig('height', {
                value: attr.height || parseInt(this.getStyle('height'), 10),
                validator: YAHOO.lang.isNumber,
                method: function(height) {