在IE8中调试MooTools滑块“SlideItMoo”

时间:2012-04-13 20:04:47

标签: javascript internet-explorer-8 mootools slider

我在使用这个mooTools滑块脚本 - SlideItMoo时遇到问题 - 使用IE8。它在其他所有浏览器中都可以正常工作,但IE8会针对下面第3行的“对象不支持此属性或方法”提示错误。任何见解或帮助将非常感谢!

initialize: function(options){
        this.setOptions(options);
ERROR>> this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
        this.totalElements = this.elements.length;
        if( this.totalElements <= this.options.itemsVisible ) return;
        // width of thumbsContainer children
        this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
        this.currentElement = 0;
        this.direction = this.options.direction;
        this.autoSlideTotal = this.options.autoSlide + this.options.duration;
        this.begin();
    },



这里是完整的脚本供参考:

var SlideItMoo = new Class({

Implements: [Options],
options: {
    overallContainer: null,
    elementScrolled: null,
    thumbsContainer: null,      
    itemsVisible:5,
    elemsSlide: null,
    itemsSelector: null,
    itemWidth: null,
    showControls:1,
    transition: Fx.Transitions.linear,
    duration: 800,
    direction: 1,
    autoSlide: false,
    mouseWheelNav: false
},

initialize: function(options){
    this.setOptions(options);
    this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
    this.totalElements = this.elements.length;
    if( this.totalElements <= this.options.itemsVisible ) return;
    this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
    this.currentElement = 0;
    this.direction = this.options.direction;
    this.autoSlideTotal = this.options.autoSlide + this.options.duration;
    this.begin();
},

begin: function(){  
    this.setContainersSize();

    this.myFx = new Fx.Morph(this.options.thumbsContainer, { 
        wait: true, 
        transition: this.options.transition,
        duration: this.options.duration
    });     

    this.addControls();
    if( this.options.mouseWheelNav && !this.options.autoSlide ){
        $(this.options.thumbsContainer).addEvent('mousewheel', function(ev){
            new Event(ev).stop();
            this.slide(-ev.wheel);                              
        }.bind(this));
    }

    if( this.options.autoSlide )
        this.startAutoSlide();      
},

setContainersSize: function(){
    $(this.options.overallContainer).set({
        styles:{
            'width': this.options.itemsVisible * this.elementWidth + 50 * this.options.showControls
        }
    });
    $(this.options.elementScrolled).set({
        styles:{
            'width': this.options.itemsVisible * this.elementWidth
        }
    });
    $(this.options.thumbsContainer).set({
        styles:{
            'width': this.totalElements * (this.elementWidth + 10)  
        }
    });
},

addControls: function(){
    if( !this.options.showControls ) return;

    this.fwd = new Element('div', {
        'class': 'SlideItMoo_forward',
        'events':{
            'click':this.slide.pass(1, this)
        }
    });
    this.bkwd = new Element('div', {
        'class': 'SlideItMoo_back',
        'events':{
            'click': this.slide.pass(-1, this)
        }
    });
    $(this.options.overallContainer).adopt(this.fwd, this.bkwd);        
},

slide: function( direction ){

    if(this.started) return;
    this.direction = direction;
    var currentIndex = this.currentIndex();

    if( this.options.elemsSlide && this.options.elemsSlide>1 && this.endingElem==null ){
        this.endingElem = this.currentElement;          
        for(var i = 0; i < this.options.elemsSlide; i++ ){
            this.endingElem += direction;
            if( this.endingElem >= this.totalElements ) this.endingElem = 0;
            if( this.endingElem < 0 ) this.endingElem = this.totalElements-1;
        }
    }   

    if( this.direction == -1 ){
        this.rearange();
        $(this.options.thumbsContainer).setStyle('margin-left', -this.elementWidth);            
    }
    this.started = true;
    this.myFx.start({ 
        'margin-left': this.direction == 1 ? -this.elementWidth : 0 
    }).chain( function(){           
        this.rearange(true);            
        if(this.options.elemsSlide){
            if( this.endingElem !== this.currentElement ) this.slide(this.direction);
            else this.endingElem=null;  
        }
    }.bind(this)  );
},

rearange: function( rerun ){

    if(rerun) this.started = false;
    if( rerun && this.direction == -1 ) {
        return;
    }
    this.currentElement = this.currentIndex( this.direction );
    //$('debug').innerHTML+= this.currentElement+'<br>';

    $(this.options.thumbsContainer).setStyle('margin-left',0);

    if( this.currentElement == 1 && this.direction == 1 ){
        this.elements[0].injectAfter(this.elements[this.totalElements-1]);
        return;
    }
    if( (this.currentElement == 0 && this.direction ==1) || (this.direction==-1 && this.currentElement == this.totalElements-1) ){
        this.rearrangeElement( this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements-2] : this.elements[0]);
        return;
    }

    if( this.direction == 1 ){
        this.rearrangeElement( this.elements[this.currentElement-1], this.elements[this.currentElement-2]);
    }
    else{
        this.rearrangeElement( this.elements[this.currentElement], this.elements[this.currentElement+1]);
    }       
},

rearrangeElement: function( element , indicator ){
    this.direction == 1 ? element.injectAfter(indicator) : element.injectBefore(indicator);
},

currentIndex: function(){
    var elemIndex = null;
    switch( this.direction ){
        case 1:
            elemIndex = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + this.direction;             
        break;
        case -1:
            elemIndex = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.direction;
        break;
    }
    return elemIndex;
},

startAutoSlide: function(){
    this.startIt = this.slide.bind(this).pass(this.direction||1);
    this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
    this.elements.addEvents({
        'mouseover':function(){
            $clear(this.autoSlide);                     
        }.bind(this),
        'mouseout':function(){
            this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
        }.bind(this)
    })
}

})

2 个答案:

答案 0 :(得分:0)

它说Object不支持this属性或方法,不是这个=&gt; propertymothod,它指的是this或所选元素为undefined的函数范围。

答案 1 :(得分:0)

您可能会发现选择器未返回有效的元素。尝试测试变量是否在假设之前设置。

this.elements = $(this.options.thumbsContainer);
if(this.elements)this.elements.getElements(this.options.itemsSelector);