slideshowbehavior.js

AJAX 应用 实现页面的无刷新

            this.resetButtons();
        }
    },
    
    get_imageDescriptionLabelID : function() {
        /// <value type="String" mayBeNull="true">    
        /// ID of the label that describes the current slide.
        /// </value>
        return this._imageDescriptionLabelID;
    },    
    set_imageDescriptionLabelID : function(value) {
        if (this._imageDescriptionLabelID != value) {
            this._imageDescriptionLabelID = value;
            this.raisePropertyChanged('imageDescriptionLabelID');
        }
    },
    
    get_imageTitleLabelID : function() {
        /// <value type="String" mayBeNull="true">    
        /// ID of the label that shows the title of the current slide.
        /// </value>
        return this._imageTitleLabelID;
    },
    set_imageTitleLabelID : function(value) {
        if (this._imageTitleLabelID != value) {
            this._imageTitleLabelID = value;
            this.raisePropertyChanged('imageTitleLabelID');
        }
    },
    
    get_nextButtonID : function() {
        /// <value type="String" mayBeNull="true">    
        /// ID on the next button.
        /// </value>        
        return this._nextButtonID;
    },
    set_nextButtonID : function(value) {
        if (this._nextButtonID != value) {
            this._nextButtonID = value;
            this.raisePropertyChanged('nextButtonID');
        }
    },
     
    get_playButtonID : function() {
        /// <value type="String" mayBeNull="true">    
        /// ID on the play button.    
        /// </value>        
        return this._playButtonID;
    },
    set_playButtonID : function(value) {
        if (this._playButtonID != value) {
            this._playButtonID = value;
            this.raisePropertyChanged('playButtonID');
        }
    },
       
    get_playButtonText : function() {
        /// <value type="String" mayBeNull="true">    
        /// Text in play button to play the slide show when it is not playing.    
        /// </value>        
        return this._playButtonValue;
    },
    set_playButtonText : function(value) {
        if (this._playButtonValue != value) {
            this._playButtonValue = value;
            this.raisePropertyChanged('playButtonText');
        }
    },    

    get_stopButtonText : function() {
        /// <value type="String" mayBeNull="true">    
        /// Text in play button to stop the slide show when it is playing.
        /// </value>        
        return this._stopButtonValue;
    },
    set_stopButtonText : function(value) {
        if (this._stopButtonValue != value) {
            this._stopButtonValue = value;
            this.raisePropertyChanged('stopButtonText');
        }
    },

    get_playInterval : function() {
        /// <value type="Number" integer="true" mayBeNull="true">    
        /// Interval in milliseconds between slide switches.
        /// </value>        
        return this._playInterval;
    },
    set_playInterval : function(value) {
        if (this._playInterval != value) {
            this._playInterval = value;
            this.raisePropertyChanged('playInterval');
        }
    },
    
    get_previousButtonID : function() {
        /// <value type="String" mayBeNull="true">
        /// ID of the previous button.
        /// </value>
        return this._previousButtonID;
    },
    set_previousButtonID : function(value) {
        if (this._previousButtonID != value) {
            this._previousButtonID = value;
            this.raisePropertyChanged('previousButtonID');
        }
    },
    
    get_slideShowServicePath : function() {
        /// <value type="String" mayBeNull="true">
        /// Slide show webservice path to pull the images.
        /// </value>        
        return this._slideShowServicePath;
    },
    
    set_slideShowServicePath : function(value) {
        if (this._slideShowServicePath != value) {
            this._slideShowServicePath = value;
            this.raisePropertyChanged('slideShowServicePath');
        }
    },
    
    get_slideShowServiceMethod : function() {
        /// <value type="String" mayBeNull="false">
        /// Slide show webservice methods that will return the slide images.
        /// </value>        
        return this._slideShowServiceMethod;
    },
    set_slideShowServiceMethod : function(value) {
        if (this._slideShowServiceMethod != value) {
            this._slideShowServiceMethod = value;
            this.raisePropertyChanged('slideShowServiceMethod');
        }
    },

    get_loop : function() {
        /// <value type="Boolean" mayBeNull="true">
        /// boolean to detect if slideshow should wrap around on hitting the first/last slides.
        /// </value>
        return this._loop;
    },
    set_loop : function(value) {
        if (this._loop != value) {
            this._loop = value;
            this.raisePropertyChanged('loop');
        }
    },
    
    get_autoPlay : function() {
        /// <value type="Boolean" mayBeNull="true">
        /// boolean to detect if slide show should start playing on render.
        /// </value>
        return this._autoPlay;
    },
    set_autoPlay : function(value) {
        if (this._autoPlay != value) {
            this._autoPlay = value;
            this.raisePropertyChanged('autoPlay');
        }
    },
    
    _onClickNext : function(e) {
        /// <summary>
        /// Next button click handler.
        /// </summary>      
        /// <param name="e" type="Sys.UI.DomEvent" mayBeNull="false" />   
        /// <returns />  
               
        // prevent server post-back for asp.net buttons.
        e.preventDefault();
        e.stopPropagation();        
        this._clickNext();
    }, 
    
    _onImageLoaded : function(e) {
        /// <summary>
        /// Image loaded handler.
        /// </summary>
        /// <param name="e" type="Sys.UI.DomEvent" mayBeNull="false"/>   
        /// <returns />      
        this.updateImage(this._slides[this._currentIndex]);
        this.resetButtons();        
        this._cacheImages();
    },
    
    _clickNext : function() {
        /// <summary>
        /// Switches slide show to displaying the next slide.
        /// </summary>  
        /// <returns />  
                  
        if (this._slides) {
            if ((this._currentIndex + 1) < this._slides.length) {
                ++this._currentIndex;
            } else if (this._loop) {
                this._currentIndex = 0;
            } else {
                return false;
            }
            this.setCurrentImage();
            return true;
        }
        return false;    
    },
        
    _onClickPrevious : function(e) {
        /// <summary>
        /// Previous button click handler.
        /// </summary>
        /// <param name="e" type="Sys.UI.DomEvent" mayBeNull="false"/>   
        /// <returns />  
        
        // prevent server post-back for asp.net buttons.
        e.preventDefault();
        e.stopPropagation();        
        this._clickPrevious();

    }, 
    
    _clickPrevious : function() {
        /// <summary>
        /// Switches slide show to displaying the previous slide.
        /// </summary>    
        /// <returns />          
        
        if (this._slides) {
            if ((this._currentIndex - 1) >= 0) {
                --this._currentIndex;
            }
            else if (this._loop) {
                this._currentIndex = this._slides.length - 1;
            } else {
                return false;
            }
            this.setCurrentImage();
            return true;
        }
        return false;
    },

    _onClickPlay : function(e) {
        /// <summary>
        /// Play button click handler.
        /// </summary>
        /// <param name="e" type="Sys.UI.DomEvent" mayBeNull="false"/>   
        /// <returns />
                
        // prevent server post-back for asp.net buttons.
        e.preventDefault();
        e.stopPropagation();
        this._play();
    }, 
    
    _play : function() {
        /// <summary>
        /// Maintains timer state/slide show buttons state and creates handler to switch images in play mode
        /// if not already in play mode.
        /// </summary>   
        /// <returns />
        if (this._inPlayMode) {
            this._inPlayMode = false;
            this._timer.set_enabled(false);
            this.resetSlideShowButtonState();
        } else {
            // play the side show
            this._inPlayMode = true;
            if (!this._timer) {
                this._timer = new Sys.Timer();
                this._timer.set_interval(this._playInterval);
                this._tickHandler = Function.createDelegate(this, this._onPlay);
                this._timer.add_tick(this._tickHandler);
            }
            this.resetSlideShowButtonState();
            this._timer.set_enabled(true);
        }
    },
    
    _onPlay : function(e) {
        /// <summary>
        /// Sets the slide show to the current image in play mode and maintains button state.
        /// </summary>   
        /// <param name="e" type="Sys.UI.DomEvent" mayBeNull="false"/>
        /// <returns type="Boolean" />
        if (this._slides) {
            if ((this._currentIndex + 1) < this._slides.length) {
                ++this._currentIndex;
                this.setCurrentImage();
                return true;
            } else if (this._loop) {
                this._currentIndex = 0;
                this.setCurrentImage();
                return true;
            } else {
                this._inPlayMode = false;
                this.resetSlideShowButtonState();
            }
        }
        return false;
    },
    
    _slideShowInit : function() {
        /// <summary>
        /// Initializes the slide show by invoking the webservice to retrieve the slides
        /// and sets the first slide.
        /// </summary>
        /// <returns />
        // clear the state of the slideshow
        this._currentIndex = -1;
        this._cachedImageIndex = -1;
        this._inPlayMode = false;
        this._currentValue = null;
        // clear the cache
        this._images = null;
        // Create the service parameters and optionally add the context parameter
        // (thereby determining which method signature we're expecting...)
        var params = null;
        if (this._useContextKey) {
            params = { contextKey : this._contextKey };
        }
        
        Sys.Net.WebServiceProxy.invoke(
                this._slideShowServicePath, 
                this._slideShowServiceMethod, 
                false,
                params,
                Function.createDelegate(this, this._initSlides), 
                null, 
                null);
    },
    
    _initSlides : function(sender, eventArgs) {
        /// <summary>
        /// Initializes the slide show with the first image and configures the specified play settings.
        /// </summary>
        /// <param name="sender" type="Object" mayBeNull="true"/>
        /// <param name="eventArgs" type="Sys.EventArgs" mayBeNull="true" />
        /// <returns />

        this._slides = sender;
        if (this._slides) {
            this._images = new Array();
            this._clickNext();  
            if (this._autoPlay) {
                this._play();
            }
        }
    },
   
    _cacheImages : function() {
        /// <summary>
        /// Caches 4 more slides periodically.
        /// </summary>
        /// <returns />
        
        // cache if current index is divisible by 3
        if ((this._currentIndex) % 3 == 0) {
            var oldCachedImageIndex = this._cachedImageIndex;
            for (var i = this._cachedImageIndex + 1; i < this._slides.length; i++) {
                if (this._slides[i]) {
                    this._images[i] = new Image();
                    this._images[i].src = this._slides[i].ImagePath;
                    this._cachedImageIndex = i;
                    if((oldCachedImageIndex + 4) <= i ) {
                        // cached 4 slides
                        break;
                    }
                }
            }
        }
    }
    
}
AjaxControlToolkit.SlideShowBehavior.registerClass('AjaxControlToolkit.SlideShowBehavior', AjaxControlToolkit.BehaviorBase);

 
AjaxControlToolkit.SlideShowEventArgs = function(previousSlide, nextSlide, slideIndex) {
    /// <summary>
    /// Event arguments for the SlideShowBehavior's slideChanging event
    /// </summary>
    /// <param name="previousSlide" type="Object" mayBeNull="true" />
    /// <param name="nextSlide" type="Object" mayBeNull="true" />
    /// <param name="slideIndex" type="Integer" mayBeNull="true" />
    /// <returns />
    AjaxControlToolkit.SlideShowEventArgs.initializeBase(this);

    this._previousSlide = previousSlide;
    this._nextSlide = nextSlide;
    this._slideIndex = slideIndex;
}
AjaxControlToolkit.SlideShowEventArgs.prototype = {
    get_previousSlide : function() {
        /// <value type="Object">
        /// PreviousSlide
        /// </value>
        return this._previousSlide;
    },

    get_nextSlide : function() {
        /// <value type="Object">
        /// NextSlide
        /// </value>
        return this._nextSlide;
    },

    get_slideIndex : function () {
        /// <value type="Number" integer="true">    
        /// SlideIndex
        /// </value>
        return this._slideIndex;
    }
}
AjaxControlToolkit.SlideShowEventArgs.registerClass('AjaxControlToolkit.SlideShowEventArgs', Sys.CancelEventArgs);