选项卡 – LPC影子技术分享 https://www.mudbest.com 行影不离,忘之却步. Wed, 12 Dec 2012 11:59:56 +0000 zh-Hans hourly 1 https://wordpress.org/?v=7.1.1 Jquery的idTabs使用 https://www.mudbest.com/jquery%e7%9a%84idtabs%e4%bd%bf%e7%94%a8/ Wed, 12 Dec 2012 11:19:47 +0000 http://www.mudbest.com/?p=1725 阅读更多]]> 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>

到此结束。

]]> javascript简单实现选项卡 https://www.mudbest.com/%e9%80%89%e9%a1%b9%e5%8d%a1javascript/ Tue, 18 Jan 2011 09:43:21 +0000 http://blog.mudbest.com/?p=308 阅读更多]]> javascript简单实现选项卡

JS：

<script type="text/javascript">
<!--
function setTab(name,cursel,n)
{
for(i=1;i<=n;i++)
{
var menu=document.getElementById(name+i);
if(menu)
{
var con=document.getElementById("con_"+name+"_"+i);
menu.className= i==cursel?"hover":"";
con.style.display= i==cursel?"block":"none";
}
}
}
//-->
</script>

HTML:

<div id="menus">
<ul id="menu_navs">
<!--{loop $_G['setting']['u'] $nav}-->
<LI id="navsx{$nav['i']}" onMouseOver="setTab('navsx',{$nav['i']},15)"><A id=wanggouhuisuo href="$nav[url]" target="_blank" >$nav[name]</A></LI>
<LI></LI>
<!--{/loop}-->

</ul>

<div id="menu_cons">
<div>
<ul>
<li>
<span style="float: left; line-height: 22px; color: rgb(244, 116, 35); margin-left: 12px;">推荐栏：</span>
<!--{loop $_G['setting']['u1'] $k $nav1}-->

<!--{if $nav1[val] == 1}-->
<UL style="DISPLAY: block" id="con_navsx_$nav1[val]">
<!--{else}-->
<UL style="DISPLAY: none" id="con_navsx_$nav1[val]">
<!--{/if}-->
<!--{loop  $nav1[uk]  $nav2}-->
<LI><A href="<!--{$nav2[url]}-->"  target=_blank><SPAN><!--{$nav2[name]}--></SPAN></A> </LI>

<!--{/loop}-->
</UL>
<!--{/loop}-->
</li>
</ul>
</div>
</div>
</div>
]]>