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>
到此结束。