idTabs是基于JQUERY编写封装的一个插件，主要用于选项卡的实现。今天正碰到一个需求，这时候开始用到它了。
首先需要在HTML页面加载JQEURY和idTabs的库。
<script type="text/javascript" src="http://img3.tieyou.com/js/jquery.idTabs.min.js"></script>
如果你细心的话，打开jquery.idTabs.min.js后你会发现在里面已经加载了JQUERY的latest类库了，这说明，这个插件是基于JQUERY的latest库编写的，如果使用就要引用
jquery-latest.min.js这个类库了，不过idTabs已经帮你引用进来了。
idTabs使用基本介绍如下：
<ul class="idTabs"> <li><a href="#jquery">jQuery</a></li> <li><a href="#official">Tabs 3</a></li> </ul> <div id="jquery">If you haven't checked out ...</div> <div id="official">idTabs is only a simple ...</div>
通常的使用方法如下：
<div id="usual1" class="usual">
<ul>
<li><a class="selected" href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">This is tab 1.</div>
<div id="tab2">More content in tab 2.</div>
<div id="tab3">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
选择默认选项卡的示例如下：
<div id="usual2" class="usual">
<ul>
<li><a href="#tabs1">Tab 1</a></li>
<li><a class="selected" href="#tabs2">Tab 2</a></li>
<li><a href="#tabs3">Tab 3</a></li>
</ul>
<div id="tabs1">This is tab 1.</div>
<div id="tabs2">More content in tab 2.</div>
<div id="tabs3">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual2 ul").idTabs("tabs2");
</script>
更自由的使用方法如下：
<ul id="freedom" class="idTabs"> <li>Freedom</li> <li><a class="selected" href="#one">First</a></li> <li><a href="#two">Second</a></li> <li><a href="#three">Third</a></li> <li><a href="#four">Fourth</a></li> </ul> <div class="tabContainer"> <h3>Tab Container</h3> <p id="one">This is my first tab.</p> <p id="two">This is my second tab.</p> </div> <img id="three" src="jquery_logo.gif" alt="Even images can be a tab"> <span id="four">Message four over here!</span>
打破传统的列表的方法如下：
<div class="imagebox idTabs">
<a class="selected" href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
<img id="img1" src="http://www.sunsean.com/images/symbol/_brace.png">
<img id="img2" src="http://www.sunsean.com/images/symbol/_lambda.png">
<img id="img3" src="http://www.sunsean.com/images/symbol/_beta.png">
<img id="img4" src="http://www.sunsean.com/images/symbol/_paren.png">
</div>
<script type="text/javascript">
$(".imagebox").idTabs("!mouseover");
</script>
带参数和URL的changing方法如下：
<div id="adv1" class="usual">
<ul>
<li><a href="#t1">Tab 1</a></li>
<li><a class="selected" href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div id="t1">This is tab 1.</div>
<div id="t2">More content in tab 2.</div>
<div id="t3">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
var settings = { start:1, change:false };
$("#adv1 ul").idTabs(settings,true);
</script>
带渐隐效果的方法如下：
<div id="adv2">
<ul>
<li><a class="selected" href="#ani1">1</a></li>
<li><a href="#ani2">2</a></li>
<li class="split"></li>
<li><a href="#ani3">3</a></li>
<li><a href="#ani4">4</a></li>
</ul>
<span>
<p style="display: block; opacity: 0.266035;" id="ani1">Click on the tabs to see a nice fade.</p>
<p id="ani2">You're not impressed?</p>
<p id="ani3">But it's so cool... in a nerdy way.</p>
<p id="ani4">Download idTabs and have your cake. You can eat it too.</p>
</span>
</div>
<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>
自定义功能的方法如下：
<span id="adv3">
<a class="selected" href="#cake">Cake</a> vs <a href="#pie">Pie</a>
<p id="cake">Cake is great</p>
<p id="pie">So is pie</p>
<div id="message">It's so delicous and moist!</div>
</span>
<script type="text/javascript">
$("#adv3").idTabs(function(id){
switch(id){
case "#cake": $("#message").html("It's so delicous and moist!"); break;
case "#pie": $("#message").html("Just the way mom makes it."); break;
} return true;
});
</script>
以上idTabs官方的使用方法都已列出。
以下是今天需求所编写的：
<div id="idTableAjax">
<div class="NavBox">
<ul class="idTabs">
<li><a href="#shanghai" class="selected">上海</a></li>
<li><a href="#beijing">北京</a></li>
<li><a href="#tianjing">天津</a></li>
<li><a href="#guangzhou">广州</a></li>
<li><a href="#shenzhen">深圳</a></li>
<li><a href="#nanjing">南京</a></li>
<li><a href="#suzhou">苏州</a></li>
<li><a href="#hangzhou">杭州</a></li>
<li><a href="#wuxi">无锡</a></li>
<li><a href="#wuhan">武汉</a></li>
<li><a href="#changsha">长沙</a></li>
<li><a href="#qingdao">青岛</a></li>
<li><a href="#jinan">济南</a></li>
<li><a href="#chongqing">重庆</a></li>
<li><a href="#chengdu">成都</a></li>
<li><a href="#xian">西安</a></li>
<li><a href="#xiamen">厦门</a></li>
<li><a href="#hainan">海南</a></li>
<li><a href="#dalian">大连</a></li>
<li><a href="#zhengzhou">郑州</a></li>
<li><a href="#shenan">沈阳</a></li>
</ul>
</div>
<div class="wrap">
<div id="shanghai"></div>
<div id="beijing"></div>
<div id="tianjing"></div>
<div id="guangzhou"></div>
<div id="shenzhen"></div>
<div id="nanjing"></div>
<div id="suzhou"></div>
<div id="hangzhou"></div>
<div id="wuxi"></div>
<div id="wuhan"></div>
<div id="changsha"></div>
<div id="qingdao"></div>
<div id="jinan"></div>
<div id="chongqing"></div>
<div id="chengdu"></div>
<div id="xian"></div>
<div id="xiamen"></div>
<div id="hainan"></div>
<div id="dalian"></div>
<div id="zhengzhou"></div>
<div id="shenan"></div>
</div>
</div>
<script type="text/javascript" language="javascript">
/**
* str 城市名
* type 类型
*/
function tableAjax(str,htmlId,message,type){
var params = {};
params['cityname'] = str;
if(str == ''){
return ;
}
$.ajax({
url:"http://www.tieyou.com/index.php?param=/ajax/complexHotelSpecial",//AJAX地址
type:'get',//提交方式
dataType:'html', //返回数据格式
data:params,//参数以及值
timeout:1000, //超时时间
beforeSend:function(){
$('#'+htmlId).html(message);
//表单提交的过程，加载中....
},
success:function(data){
$('#'+htmlId).html(data);
//$('#beijing').html(data);
},
error:function(data) {
//错误事件处理
},
complete:function(data) {
//最后相应事件处理
}
});
}
//根据点击的事件自动加载对应的AJAX
$("#idTableAjax").idTabs(function(id,list,set){
if(id != ''){
//正则匹配id
var reg = new RegExp(/^#(.*?)$/gi);
//获取id
if(reg.test(id))
{
//获取html值
var str = this.innerHTML;
//获取过滤后的ID参数
var htmlId = RegExp.$1;
//设定message状态文本
//判断是否存在这个ID
if(htmlId != '' && str != ''){
//alert(htmlId);
tableAjax(str,htmlId);
}
}
}
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list){
//由于正则替换后，原来的选项卡数组里会产生"#"这样的字符串，过滤掉这些字符串
if(list[i] != "#"){
//console.log(list);
$(list[i]).hide();
}
}
$(id).fadeIn();
return false;
});
</script>
到此结束。