Jquery的idTabs使用

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>

到此结束。

Leave a Reply

(will not be published)