sync.tooltipcontainer.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

/**
 * Component rendering peer: ToolTipContainer
 */
Extras.Sync.ToolTipContainer = Core.extend(Echo.Render.ComponentSync, {
    
    $load: function() {
        Echo.Render.registerPeer("Extras.ToolTipContainer", this);
    },
    
    $construct: function() {
        this._div = null;
        this._applyDiv = null;
        this._toolTipDiv = null;
    },
    
    renderAdd: function(update, parentElement) {
        this._div = document.createElement("div");
        this._div.id = this.component.renderId;
        var componentCount = this.component.getComponentCount();
        
        if (componentCount > 0) {
            this._applyDiv = this._createApplyTo(update);
            this._div.appendChild(this._applyDiv);
        }
        
        if (componentCount > 1) {
            this._toolTipDiv = this._createToolTip(update);
        }
        
        parentElement.appendChild(this._div);
    },
    
    renderUpdate: function(update) {
        var element = this._div;
        var containerElement = element.parentNode;
        Echo.Render.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return true;
    },
    
    renderDispose: function(update) {
        this._div = null;
        
        if (this._applyDiv) {
            Core.Web.Event.removeAll(this._applyDiv);
            this._applyDiv = null;
        }
        
        if (this._toolTipDiv && this._toolTipDiv.parentNode === document.body) {
            document.body.removeChild(this._toolTipDiv);
            this._toolTipDiv = null;
        }
    },
    
    _createToolTip: function(update) {
        var div = document.createElement("div");
        div.style.zIndex = 32767;
        div.style.position = "absolute";
        var width = this.component.render("width");
        if (width) {
            div.style.width = Echo.Sync.Extent.toCssValue(width);
        }
        Echo.Render.renderComponentAdd(update, this.component.getComponent(1), div);
        return div;
    },
    
    _createApplyTo: function(update) {
        var applyToComponent = this.component.getComponent(0);
        
        var div = document.createElement("div");
        div.style.cursor = "default";
        Echo.Render.renderComponentAdd(update, applyToComponent, div);
        
        if (this.component.getComponentCount() > 1) {
            Core.Web.Event.add(div,
                    Core.Web.Env.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED ? "mouseenter" : "mouseover", 
                    Core.method(this, this._processRolloverEnter), true);
            Core.Web.Event.add(div,
                    Core.Web.Env.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED ? "mouseleave" : "mouseout", 
                    Core.method(this, this._processRolloverExit), true);
            Core.Web.Event.add(div, "mousemove", Core.method(this, this._processMove), true);
        }
        
        return div;
    },
    
    _positionToolTip: function(e) {
        // Determine cursor position.
        var cursorX = (e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)));
        var cursorY = (e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)));
        
        // Determine size of window and tip.
        var bodyBounds = new Core.Web.Measure.Bounds(document.body);
        var tipBounds = new Core.Web.Measure.Bounds(this._toolTipDiv);
        
        // Load default tip position.
        var tipX = cursorX + 10;
        var tipY = cursorY + 10;
        
        // Ensure tip is on screen vertically.
        if (tipY + tipBounds.height > bodyBounds.height) {
            tipY = bodyBounds.height - tipBounds.height;
            if (tipY < 0) {
                tipY = 0;
            }
        }
        
        // Ensure tip is on screen horizontally (but never position it under cursor).
        if (cursorY < tipY && (tipX + tipBounds.width > bodyBounds.width)) {
            tipX = bodyBounds.width - tipBounds.width;
            if (tipX < 0) {
                tipX = 0;
            }
        }
        
        // Render tip position.
        this._toolTipDiv.style.left = tipX + "px";
        this._toolTipDiv.style.top = tipY + "px";
    },
    
    _processMove: function(e) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return;
        }
        this._positionToolTip(e);
        return true;
    },
    
    _processRolloverEnter: function(e) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return;
        }
        
        if (this._toolTipDiv.parentNode !== document.body) {
            document.body.appendChild(this._toolTipDiv);
            this._positionToolTip(e);
        }
        return true;
    },
    
    _processRolloverExit: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return;
        }
        if (this._toolTipDiv.parentNode === document.body) {
            document.body.removeChild(this._toolTipDiv);
        }
        return true;
    }
});