字母索引导航菜单

说明：简化版JS文件只有2.06KB，只提供最简单的tab切换，不需要更多功能的朋友，可以选择这个，不需要加载我的那个YAO.JS库文件了，体积减小了很多。

下载地址： (2012-4-6更新)

说明：今天把之前整理到的代码都更新上来了，想用的朋友可以自己下载

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

复制代码

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

[ 本帖最后由 yaohaixiao 于 2009-8-21 16:53 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

已有 1 人评分	威望	收起理由
cloudgamer	+ 2	谢谢分享

总评分: 威望 + 2 查看全部评分

		自动登录	找回密码
密码			注册

【原创】滑动门导航类，多种好看且实用的示例，一定来看看！（8月1日更新） [复制链接]

回复 1# yaohaixiao [自己] 的帖子

回复 3# cnfiowen 的帖子

那我就上传了

脚本调整了，示例里也展示二级导航菜单一个简单示例

回复 16# wangsdong 的帖子

回复 19# vallkiss 的帖子

回复 20# yaohaixiao [自己] 的帖子

回复 21# yaohaixiao [自己] 的帖子

回复 24# chuhongbin 的帖子

回复 27# freegreen 的帖子

修复了下，YAHOO皮肤TAB的一个JS小BUG

修复了下YAHOO皮肤标签的一个小BUG

浏览过的帖子

浏览过的版块