Javascript教程_滑动门导航源码教程

Javascript教程_滑动门导航源码教程

YTabs.js(8-1更新，代码有了很大的调整，但是灵性和扩展型也更好了)

YAO.singleTab = function(oConfigs){
    this.tabRoot = YAO.isString(oConfigs.tabRoot) ? YAO.getEl(oConfigs.tabRoot) : (oConfigs.tabRoot || null);
    this.tabs = YAO.isString(oConfigs.tabs) ? this.tabRoot.getElementsByTagName(oConfigs.tabs) : (oConfigs.tabs || null);
    this.contents = YAO.isString(oConfigs.contents) ? this.tabRoot.getElementsByTagName(oConfigs.contents) : (oConfigs.contents || null);
    
    if(!this.tabs || !this.contents){
        return false;
    }
    
    this.length = this.tabs.length || 0;
    this.defaultIndex = oConfigs.defaultIndex || 0;
    this.lastIndex = this.defaultIndex;
    this.lastTab = this.tabs[this.lastIndex] || null;
    this.lastContent = this.contents[this.lastIndex] || null;
    this.evtName = oConfigs.evt || 'mouseover';
    this.defaultClass = oConfigs.defaultClass || this.CURRENT_TAB_CLASS;
    this.previousClass = oConfigs.previousClass || '';
    this.hideAll = oConfigs.hideAll || false;
    this.auto = oConfigs.auto || false;
    this.autoSpeed = oConfigs.autoSpeed || 6000;
    this.fadeUp = oConfigs.fadeUp || false;
    this.scroll = oConfigs.scroll || false;
    this.scrollId = oConfigs.scrollId || null;
    this.scrollSpeed = oConfigs.scrollSpeed || 5;
    this.direction = oConfigs.direction || 'V';
    this.activeTag = oConfigs.activeTag || 'IMG';
    this.stepHeight = oConfigs.stepHeight || 0;
    this.stepWidth = oConfigs.stepWidth || 0;
    this.ajax = oConfigs.ajax || false;
    this.ajaxDefaultInfo = this.contents.innerHTML;
    this.aPath = oConfigs.aPath || '';
    
    this.init();
};
YAO.singleTab.prototype.timer = null;
YAO.singleTab.prototype.isPause = false;
YAO.singleTab.prototype.CURRENT_TAB_CLASS = 'current';
YAO.singleTab.prototype.init = function(){
    var i, that = this;
    if (this.tabs && this.contents) {
        if (this.auto) {
            this.timer = setTimeout(function(){
                that.autoChange();
            }, that.autoSpeed);
        }
        if (!this.hideAll) {
            YAO.addClass(this.lastTab, this.defaultClass);
            if (!this.ajax && !this.scroll) {
                if (this.lastContent) {
                    this.lastContent.style.display = 'block';
                }
            }
            if (this.ajax) {
                this.ajaxTab(this.lastTab);
            }
            if (this.scroll) {
                this.scrollCnt((this.lastContent || this.contents), this.defaultIndex);
            }
        }
        else {
            YAO.removeClass(this.lastTab, this.defaultClass);
        }
        for (i = 0; i < this.length; ++i) {
            if (i !== this.defaultIndex) {
                YAO.removeClass(this.tabs[i], this.CURRENT_TAB_CLASS);
                if (!this.ajax && !this.scroll) {
                    this.contents[i].style.display = 'none';
                }
            }
            YAO.on(this.tabs[i], this.evtName, function(index){
                return function(event){
                    var evt = null, curClass = (this.tabs[index] === this.tabs[this.defaultIndex]) ? this.defaultClass : this.CURRENT_TAB_CLASS;
                    if (!YAO.hasClass(this.tabs[index], curClass)) {
                        var currentContent = (this.ajax || (this.scroll && (this.stepHeight || this.stepWidth))) ? this.contents : (this.contents[index] || null);
                        
                        this.setCurrent(currentContent, index);
                        this.lastIndex = index;
                    }
                    if (this.auto) {
                        this.isPause = true;
                    }
                    evt = event || window.event;
                    YAO.stopEvent(evt);
                }
            }(i), this.tabs[i], that);
            YAO.on(this.tabs[i], 'mouseout', function(index){
                return function(){
                    var curTab = this.tabs[index];
                    if (this.hideAll && this.evtName === 'mouseover') {
                        if (this.lastTab === curTab) {
                            YAO.removeClass(curTab, (YAO.hasClass(curTab, that.defaultClass) ? this.defaultClass : this.CURRENT_TAB_CLASS));
                        }
                        if (this.previousClassTab) {
                            YAO.removeClass(this.previousClassTab, this.previousClass);
                        }
                        if (!this.scroll && !this.ajax) {
                            this.contents[index].style.display = 'none';
                        }
                    }
                    else {
                        if (this.auto) {
                            this.isPause = false;
                        }
                    }
                }
            }(i), this.tabs[i], that);
        }
    }
};
YAO.singleTab.prototype.autoChange = function(){
    var that = this;
    if (!this.isPause) {
        var currentContent = null, currentTab = null;
        if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
        }
        this.lastIndex = this.lastIndex + 1;
        if (this.lastIndex === this.length) {
            this.lastIndex = 0;
        }
        currentContent = this.ajax ? this.contents : (this.contents[this.lastIndex] || null);
        this.setCurrent(currentContent, this.lastIndex);
        this.timer = setTimeout(function(){
            that.autoChange();
        }, this.autoSpeed);
    }
    else {
        this.timer = setTimeout(function(){
            that.autoChange()
        }, this.autoSpeed);
        return false;
    }
};
YAO.singleTab.prototype.setCurrent = function(curCnt, index){
    var activeObj = null;
    curTab = this.tabs[index];
    YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : this.CURRENT_TAB_CLASS));
    if (curTab === this.tabs[this.defaultIndex]) {
        YAO.addClass(curTab, this.defaultClass);
    }
    else {
        YAO.addClass(curTab, this.CURRENT_TAB_CLASS);
    }
    if (this.previousClass) {
        if (this.previousClassTab) {
            YAO.removeClass(this.previousClassTab, this.previousClass);
        }
        if (index !== 0) {
            YAO.addClass(this.tabs[index - 1], this.previousClass);
            if ((index - 1) === this.defaultIndex) {
                YAO.removeClass(this.tabs[index - 1], this.defaultClass);
            }
            this.previousClassTab = (this.tabs[index - 1]);
        }
    }
    if (!this.scroll && !this.ajax) {
        if (this.lastContent) {
            this.lastContent.style.display = "none";
        }
        if (curCnt) {
            curCnt.style.display = "block";
        }
    }
    
    if (this.fadeUp) {
        activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
        if (this.lastContent !== curCnt) {
            YAO.fadeUp(activeObj);
        }
    }
    else {
        if (this.scroll) {
            this.scrollCnt(curCnt, index);
        }
    }
    if (!this.ajax) {
        this.lastContent = curCnt;
    }
    else {
        if (this.ajax) {
            this.ajaxTab(curTab);
        }
    }
    this.lastTab = curTab;
};
YAO.singleTab.prototype.scrollCnt = function(curCnt, index){
    var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0;
    if (this.activeTag) {
        activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0];
    }
    if (this.direction === 'V') {
        itemHeight = activeObj ? activeObj.offsetHeight : this.stepHeight;
        scrollHeight = -(index * itemHeight);
    }
    else {
        itemWidth = activeObj ? activeObj.offsetWidth : this.stepWidth;
        scrollWidth = -(index * itemWidth);
    }
    YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed);
};
YAO.singleTab.prototype.ajaxTab = function(curTab){
    var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/');
    ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
    url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
    
    if (curTab === this.tabs[this.defaultIndex]) {
        cnt.innerHTML = this.ajaxDefaultInfo;
    }
    else {
        YAO.ajax({
            url: url,
            element: cnt,
            load: cnt.innerHTML
        });
    }
};

页面的调用

YTabs.tabs({
    tabId: 'yTabs',
    tTag: 'dd',
    cTag: 'dt'
}, {
        tabs: YTabs.getByClassName('main-tab', 'li', 'main_navigation'),
        contents: YTabs.getByClassName('submenu', 'ul', 'main_navigation')
}, {
    tabId: 'letters',
    tTag: 'li',
    cTag: 'dl',
    hideAll: true,
    previousClass: 'off'
}, {
    tabs: YTabs.getByClassName('main-tab', 'li', 'menus'),
    contents: YTabs.getByClassName('sub-menu', 'ul', 'menus'),
    hideAll: true
}, {
    tabs: document.getElementById('sports').getElementsByTagName('li'),
    contents: YTabs.getByClassName('cnt', 'div', 'yahooskin'),
    evt: 'click',
    defaultClass: 'first',
    previousClass: 'off'
}, {
    tabId: 'news',
    tTag: 'li',
    defaultIndex: 2,
    contents: document.getElementById('newsCnt').getElementsByTagName('ul'),
    evt: 'click'
}, {
    tabId: 'dishes',
    tTag: 'h4',
    cTag: 'p'
}, {
    tabId: 'cmt-list',
    tTag: 'h4',
    contents: YTabs.getByClassName('bd', 'div', 'cmt-list'),
    defaultIndex: 1,
    evt: 'click'
});

希望整理的这些东西对大家的开发有帮助！！