alwaysvisiblecontrolbehavior.js

AJAX 应用 实现页面的无刷新

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.


/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
/// <reference path="../ExtenderBase/BaseScripts.js" />
/// <reference path="../Compat/Timer/Timer.js" />
/// <reference path="../Common/Common.js" />
/// <reference path="../Animation/Animations.js" />


Type.registerNamespace('AjaxControlToolkit');

AjaxControlToolkit.HorizontalSide = function() {
    /// <summary>
    /// The HorizontalSide enumeration describes the horizontal side
    /// of the window used to anchor the element
    /// </summary>
    /// <field name="Left" type="Number" integer="true" />
    /// <field name="Center" type="Number" integer="true" />
    /// <field name="Right" type="Number" integer="true" />
    throw Error.invalidOperation();
}
AjaxControlToolkit.HorizontalSide.prototype = {
    Left : 0,
    Center : 1,
    Right : 2
}
AjaxControlToolkit.HorizontalSide.registerEnum("AjaxControlToolkit.HorizontalSide", false);


AjaxControlToolkit.VerticalSide = function() {
    /// <summary>
    /// The VerticalSide enumeration describes the vertical side
    /// of the window used to anchor the element
    /// </summary>
    /// <field name="Top" type="Number" integer="true" />
    /// <field name="Middle" type="Number" integer="true" />
    /// <field name="Bottom" type="Number" integer="true" />
    throw Error.invalidOperation();
}
AjaxControlToolkit.VerticalSide.prototype = {
    Top : 0,
    Middle : 1,
    Bottom : 2
}
AjaxControlToolkit.VerticalSide.registerEnum("AjaxControlToolkit.VerticalSide", false);


AjaxControlToolkit.AlwaysVisibleControlBehavior = function(element) {
    /// <summary>
    /// The AlwaysVisibleControl behavior is used to fix a particular control a specified distance
    /// from the top/left corner at all times regardless of how the users scrolls or sizes the window.
    /// </summary>
    /// <param name="element" type="Sys.UI.DomElement" domElement="true">
    /// The DOM element the behavior is associated with
    /// </param>
    AjaxControlToolkit.AlwaysVisibleControlBehavior.initializeBase(this, [element]);
    
    // Desired offset from the horizontal edge of the window
    this._horizontalOffset = 0;
    
    // Vertical side of the window used to anchor the element
    this._horizontalSide = AjaxControlToolkit.HorizontalSide.Left;
    
    // Desired offset from the vertical edge of the window
    this._verticalOffset = 0;
    
    // Vertical side of the window used to anchor the element
    this._verticalSide = AjaxControlToolkit.VerticalSide.Top;
    
    // Custom property indicating the desired
    // duration of the scrolling effect
    this._scrollEffectDuration = .1;
    
    // Member variable used to handle the window's scroll and resize events
    this._repositionHandler = null;
    
    // The _animate flag is used to decide if we should play the animations whenever
    // the page is scrolled or resized.  We only need to do this on browsers that don't
    // support CSS position: fixed (i.e., IE <= 6).
    this._animate = false;
    
    // Animation to handle moving the element
    this._animation = null;
}
AjaxControlToolkit.AlwaysVisibleControlBehavior.prototype = {
    initialize : function() {
        /// <summary>
        /// Initialize the behavior
        /// </summary>
        /// <returns />
        AjaxControlToolkit.AlwaysVisibleControlBehavior.callBaseMethod(this, 'initialize');
        
        var element = this.get_element();
        if (!element) throw Error.invalidOperation(AjaxControlToolkit.Resources.AlwaysVisible_ElementRequired);
        
        // Create the resposition handler used to place the element
        this._repositionHandler = Function.createDelegate(this, this._reposition);
        
        // Determine whether or not to use animations (i.e. whether or not the browser
        // supports CSS position: fixed).  All major browsers except IE 6 or earlier support it.
        // Don't animate if we're running a version of IE greater than 6
        this._animate = (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7);
        if (this._animate) {
            // Initialize the animations to use the actual properties
            this._animation = new AjaxControlToolkit.Animation.MoveAnimation(
                element, this._scrollEffectDuration, 25, 0, 0, false, 'px');

            // Make the control use absolute positioning to hover
            // appropriately and move it to its new home
            element.style.position = 'absolute';
        } else {
            // Make the control use fixed positioning to keep it from moving
            // while the content behind it slides around
            element.style.position = 'fixed';
        }
        
        // Attach the onResize handler
        $addHandler(window, 'resize', this._repositionHandler);
        
        // Attach the onscroll event handler for the animations
        if (this._animate) {
            $addHandler(window, 'scroll', this._repositionHandler);
        }
        
        // Move to the initial position
        this._reposition();
    },
    
    dispose : function() {
        /// <summary>
        /// Dispose the behavior
        /// </summary>
        /// <returns />
    
        // Detach the event and wipe the delegate
        if (this._repositionHandler) {
            if (this._animate) {
                $removeHandler(window, 'scroll', this._repositionHandler);
            }
            $removeHandler(window, 'resize', this._repositionHandler);
            this._repositionHandler = null;
        }
        
        // Dispose the animation
        if (this._animation) {
            this._animation.dispose();
            this._animation = null;
        }
        
        AjaxControlToolkit.AlwaysVisibleControlBehavior.callBaseMethod(this, 'dispose');
    },

    _reposition : function(eventObject) {
        /// <summary>
        /// Handler to reposition the element and place it where it actually belongs
        /// whenever the browser is scrolled or resized
        /// </summary>
        /// <param name="eventObject" type="Sys.UI.DomEvent">
        /// Event info
        /// </param>
        /// <returns />

        var element = this.get_element();
        if (!element) return;
        
        this.raiseRepositioning(Sys.EventArgs.Empty);
        
        var x = 0;
        var y = 0;
        
        // Compute the initial offset if we're animating
        if (this._animate) {
            if (document.documentElement && document.documentElement.scrollTop) {
                x = document.documentElement.scrollLeft;
                y = document.documentElement.scrollTop;
            } else {
                x = document.body.scrollLeft;
                y = document.body.scrollTop;
            }
        }
        
        // Compute the width and height of the client
        var clientBounds = $common.getClientBounds();
        var width = clientBounds.width;
        var height = clientBounds.height;
        
        // Compute the horizontal coordinate
        switch (this._horizontalSide) {
            case AjaxControlToolkit.HorizontalSide.Center :
                x = Math.max(0, Math.floor(x + width / 2.0 - element.offsetWidth / 2.0 - this._horizontalOffset));
                break;