resize-debug.js

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

                        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) {
                    height = parseInt(height, 10);
                    if (height > 0) {
                        if (this.get('setSize')) {
                            this.setStyle('height', height + 'px');
                        }
                        this._cache.height = height;
                        this._configs.height.value = height;
                    }
                }
            });

            /**
            * @attribute minWidth
            * @description The minimum width of the element
            * @type Number
            */
            this.setAttributeConfig('minWidth', {
                value: attr.minWidth || 15,
                validator: YAHOO.lang.isNumber
            });

            /**
            * @attribute minHeight
            * @description The minimum height of the element
            * @type Number
            */
            this.setAttributeConfig('minHeight', {
                value: attr.minHeight || 15,
                validator: YAHOO.lang.isNumber
            });

            /**
            * @attribute maxWidth
            * @description The maximum width of the element
            * @type Number
            */
            this.setAttributeConfig('maxWidth', {
                value: attr.maxWidth || 10000,
                validator: YAHOO.lang.isNumber
            });

            /**
            * @attribute maxHeight
            * @description The maximum height of the element
            * @type Number
            */
            this.setAttributeConfig('maxHeight', {
                value: attr.maxHeight || 10000,
                validator: YAHOO.lang.isNumber
            });

            /**
            * @attribute minY
            * @description The minimum y coord of the element
            * @type Number
            */
            this.setAttributeConfig('minY', {
                value: attr.minY || false
            });

            /**
            * @attribute minX
            * @description The minimum x coord of the element
            * @type Number
            */
            this.setAttributeConfig('minX', {
                value: attr.minX || false
            });
            /**
            * @attribute maxY
            * @description The max y coord of the element
            * @type Number
            */
            this.setAttributeConfig('maxY', {
                value: attr.maxY || false
            });

            /**
            * @attribute maxX
            * @description The max x coord of the element
            * @type Number
            */
            this.setAttributeConfig('maxX', {
                value: attr.maxX || false
            });

            /**
            * @attribute animate
            * @description Should be use animation to resize the element (can only be used if we use proxy).
            * @type Boolean
            */
            this.setAttributeConfig('animate', {
                value: attr.animate || false,
                validator: function(value) {
                    var ret = true;
                    if (!YAHOO.util.Anim) {
                        ret = false;
                    }
                    return ret;
                }               
            });

            /**
            * @attribute animateEasing
            * @description The Easing to apply to the animation.
            * @type Object
            */
            this.setAttributeConfig('animateEasing', {
                value: attr.animateEasing || function() {
                    var easing = false;
                    if (YAHOO.util.Easing && YAHOO.util.Easing.easeOut) {
                        easing = YAHOO.util.Easing.easeOut;
                    }
                    return easing;
                }()
            });

            /**
            * @attribute animateDuration
            * @description The Duration to apply to the animation.
            * @type Number
            */
            this.setAttributeConfig('animateDuration', {
                value: attr.animateDuration || 0.5
            });

            /**
            * @attribute proxy
            * @description Resize a proxy element instead of the real element.
            * @type Boolean
            */
            this.setAttributeConfig('proxy', {
                value: attr.proxy || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute ratio
            * @description Maintain the element's ratio when resizing.
            * @type Boolean
            */
            this.setAttributeConfig('ratio', {
                value: attr.ratio || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute ghost
            * @description Apply an opacity filter to the element being resized (only works with proxy).
            * @type Boolean
            */
            this.setAttributeConfig('ghost', {
                value: attr.ghost || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute draggable
            * @description A convienence method to make the element draggable
            * @type Boolean
            */
            this.setAttributeConfig('draggable', {
                value: attr.draggable || false,
                validator: YAHOO.lang.isBoolean,
                method: function(dd) {
                    if (dd && this._wrap) {
                        this._setupDragDrop();
                    } else {
                        if (this.dd) {
                            D.removeClass(this._wrap, this.CSS_DRAG);
                            this.dd.unreg();
                        }
                    }
                }
            });

            /**
            * @attribute hover
            * @description Only show the handles when they are being moused over.
            * @type Boolean
            */
            this.setAttributeConfig('hover', {
                value: attr.hover || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute hiddenHandles
            * @description Don't show the handles, just use the cursor to the user.
            * @type Boolean
            */
            this.setAttributeConfig('hiddenHandles', {
                value: attr.hiddenHandles || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute knobHandles
            * @description Use the smaller handles, instead if the full size handles.
            * @type Boolean
            */
            this.setAttributeConfig('knobHandles', {
                value: attr.knobHandles || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute xTicks
            * @description The number of x ticks to span the resize to.
            * @type Number or False
            */
            this.setAttributeConfig('xTicks', {
                value: attr.xTicks || false
            });

            /**
            * @attribute yTicks
            * @description The number of y ticks to span the resize to.
            * @type Number or False
            */
            this.setAttributeConfig('yTicks', {
                value: attr.yTicks || false
            });

            /**
            * @attribute status
            * @description Show the status (new size) of the resize.
            * @type Boolean
            */
            this.setAttributeConfig('status', {
                value: attr.status || false,
                validator: YAHOO.lang.isBoolean
            });

            /**
            * @attribute autoRatio
            * @description Using the shift key during a resize will toggle the ratio config.
            * @type Boolean
            */
            this.setAttributeConfig('autoRatio', {
                value: attr.autoRatio || false,
                validator: YAHOO.lang.isBoolean
            });

        },
        /**
        * @method destroy
        * @description Destroys the resize object and all of it's elements & listeners.
        */        
        destroy: function() {
            YAHOO.log('Destroying Resize', 'info', 'Resize');
            for (var h in this._handles) {
                if (Lang.hasOwnProperty(this._handles, h)) {
                    Event.purgeElement(this._handles[h]);
                    this._handles[h].parentNode.removeChild(this._handles[h]);
                }
            }
            if (this._proxy) {
                this._proxy.parentNode.removeChild(this._proxy);
            }
            if (this._status) {
                this._status.parentNode.removeChild(this._status);
            }
            if (this.dd) {
                this.dd.unreg();
                D.removeClass(this._wrap, this.CSS_DRAG);
            }
            if (this._wrap != this.get('element')) {
                this.setStyle('position', '');
                this.setStyle('top', '');
                this.setStyle('left', '');
                this._wrap.parentNode.replaceChild(this.get('element'), this._wrap);
            }
            this.removeClass(this.CSS_RESIZE);

            delete YAHOO.util.Resize._instances[this.get('id')];
            //Brutal Object Destroy
            for (var i in this) {
                if (Lang.hasOwnProperty(this, i)) {
                    this[i] = null;
                    delete this[i];
                }
            }
        },
        /**
        * @method toString
        * @description Returns a string representing the Resize Object.
        * @return {String}
        */        
        toString: function() {
            if (this.get) {
                return 'Resize (#' + this.get('id') + ')';
            }
            return 'Resize Utility';
        }
    });

    YAHOO.util.Resize = Resize;
 
/**
* @event dragEvent
* @description Fires when