YTabs！多标签滚动 & Ajax标签导航

程序开发：YAOHAIXIAO.COM发表时间：2010 - 01 - 23

1.技术版面请勿灌水。（5楼之后单纯顶贴的，视为灌水。）
2.原则上不代劳商业应用（江湖救急除外），不解答考试及作业题（作弊可耻，偷懒有罪）。
3.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]
4.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]
5.本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；
6.本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；
7.技术版面请勿灌水。（5楼之后单纯顶贴的，视为灌水。）
8.原则上不代劳商业应用（江湖救急除外），不解答考试及作业题（作弊可耻，偷懒有罪）。
9.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]
10.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]

示例一：加载HTML格式数据

1.技术版面请勿灌水。（5楼之后单纯顶贴的，视为灌水。）
2.原则上不代劳商业应用（江湖救急除外），不解答考试及作业题（作弊可耻，偷懒有罪）。
3.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]
4.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]
5.本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；
6.本版严重鄙视以下类型的行业内滥竽充数者：自己有脑，不肯思考；发狠提问，呲牙咧嘴；
7.技术版面请勿灌水。（5楼之后单纯顶贴的，视为灌水。）
8.原则上不代劳商业应用（江湖救急除外），不解答考试及作业题（作弊可耻，偷懒有罪）。
9.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]
10.如需要收藏主题，请使用主题右上角的链接；对论坛使用有疑问时请查看[论坛规则]

示例二：加载JSON格式数据

程序简介

YTabs！多标签滚动 & Ajax标签导航，一个很经典的标签导航效果，可以支持加载HTML和JSON格式的数据。同时我添加了标签滚动效果，ytabs.js中的Carousel类来处理滚动效果，由于时间和能力有限，Carousel类的功能还不是很完善，也希望大家一起来从实它。ytabs.js中还包含了YAO和tabView两个类，YAO是我根据YUI还有一些其他资源整理的一个常用方法类，采用单体模式。而tabView则是完全由我自己，也是这个AjaxTab效果的核心程序。

调用方法

第一步：在页面中调用ytabs.js文件，例如：

第二步：编写调用代码：

(function(){
	var hCarousel = new YAO.Carousel({
		btnPrevious: YAO.getEl('s-left-html'),
		Container: YAO.getEl('s-tabs-bd-html'),
		Scroller: YAO.getEl('scroller-html'),
		items: 'li',
		btnNext: YAO.getEl('s-right-html')
	});
	var jCarousel = new YAO.Carousel({
		btnPrevious: YAO.getEl('s-left-json'),
		Container: YAO.getEl('s-tabs-bd-json'),
		Scroller: YAO.getEl('scroller-json'),
		items: 'li',
		btnNext: YAO.getEl('s-right-json')
	});
	
	YAO.YTabs({
		tabs: YAO.getEl('scroller-html').getElementsByTagName('li'),
		contents: YAO.getEl('s-content-html'),
		evt: 'click',
		ajax: true,
		aPath: 'samples/.htm/?id='
	}, {
		tabs: YAO.getEl('scroller-json').getElementsByTagName('li'),
		contents: YAO.getEl('s-content-json'),
		evt: 'click',
		ajax: true,
		aPath: 'samples/.js/?id='
	});
})();

程序代码

var tabView = 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 || '';
};
tabView.prototype.timer = null;
tabView.prototype.isPause = false;
tabView.prototype.CURRENT_TAB_CLASS = 'current',

tabView.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);
		}
	}
};
tabView.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;
	}
};
tabView.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;
};
tabView.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);
};
tabView.prototype.ajaxTab = function(curTab){
	var that = this, url = '', ajaxLink = null, loadFn = null, cnt = this.contents, uriData = this.aPath.split('/'), json = (uriData[1].toLowerCase() === '.js' || uriData[1].toLowerCase() === 'json') ? true : false;
	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 {
		if(json){
			loadFn = function(jsonData){
				var data = YAO.JSON.parse(jsonData.responseText);
				cnt.innerHTML = data.html;
			}
		}
		else{
			loadFn = cnt.innerHTML;
		}
		YAO.ajaxRequest({
			url: url,
			element: cnt,
			loadFn: loadFn
		});
	}
};

YAO.Carousel = function(oConfig){
	this.btnPrevious = YAO.isString(oConfig.btnPrevious) ? YAO.getEl(oConfig.btnPrevious) : (oConfig.btnPrevious || null);
	this.lnkBtnPrevious = this.btnPrevious.getElementsByTagName('a')[0] || null;
	this.Container = YAO.isString(oConfig.Container) ? YAO.getEl(oConfig.Container) : (oConfig.Container || null);
	this.Scroller = YAO.isString(oConfig.Scroller) ? YAO.getEl(oConfig.Scroller) : (oConfig.Scroller || null);
	this.btnNext = YAO.isString(oConfig.btnNext) ? YAO.getEl(oConfig.btnNext) : (oConfig.btnNext || null);
	this.lnkBtnNext = this.btnNext.getElementsByTagName('a')[0] || null;
	this.items = YAO.isString(oConfig.items) ? this.Container.getElementsByTagName(oConfig.items) : (oConfig.items || null);
	
	if(!this.btnPrevious || !this.lnkBtnPrevious || !this.Container || !this.Scroller || !this.btnNext || !this.lnkBtnNext || !this.items){
		return false;
	}
	
	this.length = this.items.length;
	this.itemWidth = this.items[0].offsetWidth;
	this.itemHeight = this.items[0].offsetHeight;
	this.scrollerWidth = this.itemWidth * this.length;
	this.scrollHeight = this.itemHeight * this.length;
	this.derection = oConfig.derection || 'H';
	this.stepHeight = oConfig.stepHeight || this.itemHeight;
	this.stepWidth = oConfig.stepWidth || this.itemWidth;
	this.groups = this.derection === 'H' ? Math.ceil(this.scrollerWidth / this.stepWidth) : Math.ceil(this.scrollHeight / this.stepHeight);
	this.maxMovedNum = this.derection === 'H' ? (this.groups - (this.Container.offsetWidth / this.stepWidth)) : (this.groups - (this.Container.offsetHeight / this.stepHeight));
	this.scrollSpeed = oConfig.speed || 50;
	
	this.init();
};
YAO.Carousel.prototype.movedNum = 0;
YAO.Carousel.prototype.LNK_BTNS_DISABLED_CLASS = 'dis'; 
YAO.Carousel.prototype.init = function(){
	var oSelf = this;
	if (this.derection === 'H') {
		this.Scroller.style.width = this.scrollerWidth + 'px';
	}
	else {
		this.Scroller.style.height = this.scrollerHeight + 'px';
	}
	this.Container.style.overflow = 'hidden';
	if (this.lnkBtnNext && this.movedNum === this.maxMovedNum) {
		YAO.addClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
	}
	if (this.lnkBtnPrevious && this.movedNum === 0) {
		YAO.addClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
	}
	YAO.on(this.btnPrevious, 'click', this.scrollPrevious, this.btnPrevious, oSelf);
	YAO.on(this.btnNext, 'click', this.scrollNext, this.btnNext, oSelf);
};
YAO.Carousel.prototype.scrollPrevious = function(event){
	var evt = event || window.event;
	if (this.movedNum > 0) {
		this.movedNum -= 1;
		if (this.lnkBtnNext && YAO.hasClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS)) {
			YAO.removeClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
		}
		if (this.movedNum <= 0) {
			this.movedNum = 0;
			if (this.lnkBtnPrevious) {
				YAO.addClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
			}
		}
		this.scroll(this.movedNum);
	}
	YAO.stopEvent(evt);
};
YAO.Carousel.prototype.scrollNext = function(event){
	var evt = event || window.event;
	if (this.movedNum < this.maxMovedNum) {
		this.movedNum += 1;
		if (this.lnkBtnPrevious && YAO.hasClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS)) {
			YAO.removeClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
		}
		if (this.movedNum >= this.maxMovedNum) {
			this.movedNum = this.maxMovedNum;
			if (this.lnkBtnNext) {
				YAO.addClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
			}
		}
		this.scroll(this.movedNum);
	}
	YAO.stopEvent(evt);
}; 
YAO.Carousel.prototype.scroll = function(steps){
	var scrollWidth = 0, scrollHeight = 0;
	if (this.derection === 'H') {
		if (this.stepWidth) {
			scrollWidth = -(this.stepWidth * steps);
		}
		else {
			scrollWidth = -(this.itemWidth * steps);
		}
	}
	else {
		if (this.stepHeight) {
			scrollHeight = -(this.stepHeight * steps);
		}
		else {
			scrollHeight = -(this.itemHeight * steps);
		}
	}
	YAO.moveElement(this.Scroller, scrollWidth, scrollHeight, this.scrollSpeed);
};

Download：ytabs-scroll-ajaxtabs.rar

个人简介

姓名：姚海啸
年龄：28岁
学历：大专
职业：前端工程师

奋斗目标：成为顶尖的前端工程师

我的作品