YTabs！英文字母索引菜单

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

A|

A

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
B|

B

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
C|

C

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
D|

D

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
E|

E

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
F|

F

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
G|

G

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
H|

H

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
I|

I

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
J|

J

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
K|

K

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
L|

L

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
M|

M

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
N|

N

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜
O

O

川菜粤菜京菜鲁菜宁波菜本帮菜湖南菜台湾菜潮州菜新疆菜淮扬菜杭帮菜云南菜海鲜烧烤清真自助素食火锅海派菜东北菜创意菜私房菜农家菜茶餐厅简餐贵州菜

一. HTTP压缩概述

HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如gzip等压缩HTML、JavaScript或 CSS文件。压缩的最大好处就是降低了网络传输的数据量，从而提高客户端浏览器的访问速度。当然，同时也会增加一点点服务器的负担。Gzip是比较常见的一种HTTP压缩算法。

程序简介

YTabs！英文字母索引菜单，一个很经典的导航菜单效果，我使用我的YTabs实现了。兼容性好，调用方便。ytabs.js中包含了YAO和tabView两个类，YAO是我根据YUI还有一些其他资源整理的一个常用方法类，采用单体模式。而tabView则是完全由我自己，也是这个图片新闻效果的核心程序。

调用方法

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

第二步：编写调用代码：

YAO.YTabs({
		tabRoot: 'YLetter',
		tabs: 'li',
		contents: 'dl',
		hideAll: true,
		previousClass: 'off'
	});

程序代码

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
		});
	}
};

Download：ytabs-side-menus.rar

个人简介

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

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

我的作品

YAOHAIXIAO.COM