jquery移動(dòng)端TAB觸屏切換實(shí)現(xiàn)效果
我們使用移動(dòng)端時(shí)可以通過觸屏手勢(shì)左右滑動(dòng)來切換TAB欄目,如網(wǎng)易新聞等APP欄目切換。我們說的TAB一般由導(dǎo)航條和TAB對(duì)應(yīng)的內(nèi)容組成,切換導(dǎo)航條上的標(biāo)簽同時(shí)標(biāo)簽對(duì)應(yīng)的內(nèi)容也會(huì)跟著切換。本文將結(jié)合實(shí)例給大家介紹一個(gè)移動(dòng)端TAB觸屏切換效果。
我們準(zhǔn)備一個(gè)TAB導(dǎo)航#pagenavi,里面包含TAB導(dǎo)航要切換的四個(gè)導(dǎo)航按鈕,然后是切換的主體內(nèi)容#slider,這里應(yīng)該放置四個(gè)li與導(dǎo)航按鈕對(duì)應(yīng),內(nèi)容自定義。
<div class="box-163css"> <ul id="pagenavi" class="page"> <li><a href="#">CSS3</a></li> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">PHP</a></li> <li><a href="#">HTML5</a></li> </ul> <div id="slider" class="swipe"> <ul class="box01_list"> <li class="li_list"> ... </li> ...<!--總共4個(gè)li--> </ul> </div> </div>
當(dāng)然,我們還需要給HTML加上css樣式,這塊根據(jù)自己的習(xí)慣愛好進(jìn)行設(shè)置。
由于是移動(dòng)端應(yīng)用,我們加載zepto.js,zepto就是體積小的jquery。然后需要加載觸屏滑動(dòng)插件touchslider.js。
<script type="text/javascript" src="js/zepto_min.js"></script> <script type="text/javascript" src="js/touchslider.js"></script>
接下來我們就直接調(diào)用TouchSlider,通過設(shè)置綁定tab,滑動(dòng)方向、速度、時(shí)間等信息實(shí)現(xiàn)內(nèi)容切換,請(qǐng)看詳細(xì)代碼:
<script type="text/javascript"> var page='pagenavi'; var mslide='slider'; var mtitle='emtitle'; arrdiv = 'arrdiv'; var as=document.getElementById(page).getElementsByTagName('a'); var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){ var as=document.getElementById(this.page).getElementsByTagName('a'); as[this.p].className=''; as[index].className='active'; this.p=index; var txt=as[index].innerText; $("#"+this.page).parent().find('.emtitle').text(txt); var txturl=as[index].getAttribute('href'); var turl=txturl.split('#'); $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]); }}); tt.page = page; tt.p = 0; for(var i=0;i<as.length;i++){ (function(){ var j=i; as[j].tt = tt; as[j].onclick=function(){ this.tt.slide(j); return false; } })(); } </script>
以上就是關(guān)于移動(dòng)端TAB觸屏切換效果的關(guān)鍵代碼分享給大家,希望大家喜歡。
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery版Tab標(biāo)簽切換
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡(jiǎn)單演示
- 基于jquery的tab切換 js原理
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- 基于jquery tab切換(防止頁面刷新)
- jQuery實(shí)現(xiàn)tab欄切換效果
相關(guān)文章
jQuery在iframe中無法彈出對(duì)話框的解決方法
如果在iframe中使用則彈不出對(duì)話框,而有時(shí)候我們還必須得使用iframe而不能用jQuery的load方式,下面有個(gè)不錯(cuò)的處理方法,希望對(duì)大家有所幫助2014-01-01jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效
這篇文章主要為大家詳細(xì)介紹了jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效,手動(dòng)點(diǎn)擊數(shù)字卡片實(shí)現(xiàn)圖片輪播,對(duì)圖片輪播感興趣的小伙伴們可以參考一下2015-12-12通過jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請(qǐng)求
JSON 可通過 JavaScript 進(jìn)行解析,JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸,這篇文章主要介紹了通過jsonp獲取json數(shù)據(jù)(實(shí)現(xiàn)AJAX跨域請(qǐng)求),有興趣的可以了解一下。2017-01-01淺談jQuery中對(duì)象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對(duì)象遍歷.eq().first().last().slice()方法的使用,以及他們之間的區(qū)別,jQuery源碼中的使用。2014-11-11