选项卡(Tab)切换效果与关联事件处理实现

本文链接：https://blog.csdn.net/jiahaiwu1986/article/details/6769486

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> Home Tab Originally </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="JiahaiWu">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  
  <style type="text/css">
/* Tab 标签及内容区域样式设置
---------------------------------------------- */
.homeTab
{
   background: #FFFFF;
   padding: 10px 10px;
   width: 900px;
   margin: 0 auto;
}
.homeTab .tabHeader span
{
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 5px;
   border: #ccc 1px solid;
   background-color: #D2E8F7;
   margin-left: 3px;
   cursor: pointer;
}
.homeTab .container
{
   padding: 10px 10px 8px 10px;
   clear: left;
   border: #ccc 1px solid;
}
.hidden
{
   visibility: hidden;
   display: none;
}
.homeTab .tabHeader .normal
{
   color: #000;
   background-color: #D2E8F7;
}
.homeTab .tabHeader .hover
{
   color: #000;
   background-color: #2AE8EF;
}
.homeTab .tabHeader .selected
{
   color: #000;
   background-color: #FFFFFF;
   margin-bottom: 0;
   border-top: 2px solid #FF2000;
   border-bottom: 1px solid snow;
}
  </style>
</HEAD>
<BODY>
   <div class="homeTab">
<div class="tabHeader">
<span class="normal">Tab 1</span>
<span class="selected">Tab 2</span>
<span class="hover">Tab 3</span>
</div>
<div class="container">
<div>This is tab 1.</div>
<div class="hidden">More content in tab 2.</div>
<div class="hidden">Tab 3 is always last!</div>
</div>
</div>
<br/>
<br/>

<SCRIPT LANGUAGE="JavaScript" src="jquery-1.6.2.min.js"></SCRIPT>
<script language="javascript">
/** homeTab
-- @version 0.0.0.2
-- @auther JiahaiWu
-- @Date 2011-08-01
**/
/**
* 实现Tab页切换效果示例程序
  @auther JiahaiWu 2011-08-01
  @version 0.0.0.2
  为了便于实现效果作如下约定：
  S1: Tab页面切换作用区域 selector:{"tab":".homeTab","header":".header","container":".container","subHeader":"span","subContainer":"div"}
  S2: Tab切换关联样式 classSet:{"normal":"normal","hover":"hover","selected":"selected", "hidden":"hidden","visible":""}
  S3: JS代码执行依赖于jQuery.js 1.4.3以上版本
*
*/
var homeTab = {
   setting: {
   //选项卡页签选择器参数设置
   selector: { "tab": ".homeTab", "header": ">.tabHeader", "container": ">.container", "subHeader": ">span", "subContainer": ">div" },
   //选项卡页签样式变换参数设置
   classSet: { "normal": "normal", "hover": "hover", "selected": "selected", "hidden": "hidden", "visible": "" },
   //触发事件回调函数
   eventHandler: null,
   //设置隐藏选项卡的索引集
   hideIndexs: [],
   baseIndex: 0
   },
   //加载tab选项卡内容方法
   _loadTab: function (setting) {
   var selectedIndex = -1;
   var tabTags = [];
   var tabCons = [];
   var _needHide = function (index) {
   for (var i = 0; i < setting.hideIndexs.length; i++) {
   if (setting.hideIndexs[i] === index)
   return true;
   }
   return false;
   };
   var _select = function (index) {
   tabTags[selectedIndex].className = setting.classSet.normal;
   tabCons[selectedIndex].className = setting.classSet.hidden;
   selectedIndex = index;
   tabTags[selectedIndex].className = setting.classSet.selected;
   tabCons[selectedIndex].className = setting.classSet.visible;
   };
   var _focus = function (index) {
   if (selectedIndex === index)
   return;
   tabTags[index].className = setting.classSet.hover;
   };
   var _unfocus = function (index) {
   if (selectedIndex === index)
   return;
   tabTags[index].className = setting.classSet.normal;
   };
   var ActiveIndexChanging = function (index) {
   if (typeof (setting.eventHandler) === "function")
   return setting.eventHandler.apply(this, ["ActiveIndexChanging", selectedIndex, index, setting.selector.tab]);
   else
   return true;
   };
   var ActiveIndexChanged = function (index) {
   if (typeof (setting.eventHandler) === "function")
   return setting.eventHandler.apply(this, ["ActiveIndexChanged", selectedIndex, index, setting.selector.tab]);
   else
   return true;
   };
   //构建tabConatainer处理对象，绑定必要的事件方法
   var construct = function () {
   var tabContainers = jQuery(setting.selector.tab + " " + setting.selector.container + " " + setting.selector.subContainer);
   jQuery(setting.selector.tab + " " + setting.selector.header + " " + setting.selector.subHeader).each(function (index) {
   tabTags.push(this);
   tabCons.push(tabContainers.get(index));
   jQuery(this).mouseover(index, function () {
   _focus(index);
   });
   jQuery(this).mouseout(index, function () {
   _unfocus(index);
   });
   jQuery(this).click(index, function () {
   var doNext = ActiveIndexChanging(index);
   if (doNext !== false) {
   _select(index);
   ActiveIndexChanged(index);
   }
   });
   });
   if (tabCons.length < tabTags.length || tabTags.length < 1)
   throw new Error("Error: the tab container blocks length is illegal!");
   };
   var init = function () {
   construct();
   selectedIndex = setting.baseIndex;
   for (var i = 0; i < tabTags.length; i++) {
   if (i !== setting.baseIndex) {
   if (_needHide(i)) {
   tabTags[i].className = setting.classSet.hidden;
   tabCons[i].className = setting.classSet.hidden;
   }
   else {
   tabTags[i].className = setting.classSet.normal;
   tabCons[i].className = setting.classSet.hidden;
   }
   }
   };
   _select(setting.baseIndex);

   setting.selectedIndex = selectedIndex;
   setting.tabTags = tabTags;
   setting.tabCons = tabCons;
   };
   //run self
   init();
   return setting;
   },
   _removeTab: function (setting) {
   var tabContainers = jQuery(setting.selector.tab + " " + setting.selector.container + " " + setting.selector.subContainer);
   jQuery(setting.selector.tab + " " + setting.selector.header + " " + setting.selector.subHeader).each(function (index) {
   this.onclick = "";
   this.onmouseover = "";
   this.onmouseout = "";
   });
   },
   /**
   * 加载tab选项卡简易方法,参数不足部分使用默认配置项
   * @param _tabSelector tab选项卡选择器值，具体用法参考jQuery选择器规则
   * @param _index tab选项卡初始显示选项卡索引值
   * @auther JiahaiWu 2011-08-01
   **/
   add: function (_tabSelector, _index, _eventHandler) {
   try {
   if (typeof (_tabSelector) === "string")
   homeTab.setting.selector.tab = _tabSelector;
   if (typeof (_index) === "number" && /^[0-9]{1,2}$/.test(_index))
   homeTab.setting.baseIndex = _index;
   if (typeof (_eventHandler) === "function")
   homeTab.setting.eventHandler = _eventHandler;
   return homeTab._loadTab(homeTab.setting);
   }
   catch (ex) {
   alert(ex.message);
   }
   },
   remove: function (_tabSelector) {
   try {
   if (typeof (_tabSelector) === "string")
   homeTab.setting.selector.tab = _tabSelector;
   homeTab._removeTab(homeTab.setting);
   }
   catch (ex) {
   alert(ex.message);
   }
   }
};

//针对tab菜单切换事件回调处理方法
//@auther JiahaiWu 2011-08-01
function DefaultHandler(eventStr, activeIndex, changingIndex, tab) {
  if (eventStr === "ActiveIndexChanging" ) {
alert(eventStr);
  }
  else
return true;
}

//基于HomeTab脚本加载Tab页面
//指定相关配置属性后再添加Tab页元素
//@auther JiahaiWu 2011-08-01
function tabLoader(startIndex,_handler) {
//homeTab.setting.hideIndexs = [9];
homeTab.setting.selector = { "tab": ".homeTab", "header": ">.tabHeader", "container": ">.container", "subHeader": ">span", "subContainer": ">div" };
if (typeof (_handler) === "function")
homeTab.setting.eventHandler = _handler;
else
homeTab.setting.eventHandler = null;
homeTab.add(".homeTab", startIndex);
}

//初始方法调度
//@auther JiahaiWu 2011-08-01
jQuery(document).ready(function(){
   tabLoader(0,null);
   //tabLoader(0,DefaultHandler);
});
</script>
</BODY>
</HTML>