溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jquery.mobile如何實現手機滾動，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet"
href="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="../../../ui/jquery.mobile-1.4.5/js/jquery.js"></script>
<script src="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body> -->
<div data-role="page" id="mytabs"
>
<script type="text/javascript">
if (!$.mobile.data) {
$.mobile.data = {};
}
if (!$.mobile.data.tabNames) {
$.mobile.data.tabNames = [ '健康體檢', '美容抗衰', '口腔健康', '功能醫學', '康復療養' ];
$.mobile.data.clickTab = function(tab) {
var index = $(tab).attr('data-tab-index');
$('#mytabs .fragments').hide();
$('#fragment-' + index).show();
}
$.mobile.data.moveToPrevTab = function() {
var $Navbar = $('#mytabs-navbar');
var index = parseInt($Navbar.attr('data-tab-index'));
if (index > 0) {
$Navbar.find('a').each(
function(i, e) {
var no = index - 1 + i;
$(e).text($.mobile.data.tabNames[no]).attr(
'data-tab-index', no);
}).filter('.ui-btn-active').click();
$Navbar.attr('data-tab-index', --index);
if (index == 0) {
$('#mytabs-prev').css('color', '#ccc');
} else {
$('#mytabs-next').css('color', '#000');
}
}
};
$.mobile.data.moveToNextTab = function() {
var $Navbar = $('#mytabs-navbar');
var index = parseInt($Navbar.attr('data-tab-index'));
if (index < 2) {
$Navbar.find('a').each(
function(i, e) {
var no = index + 1 + i;
$(e).text($.mobile.data.tabNames[no]).attr(
'data-tab-index', no);
}).filter('.ui-btn-active').click();
$Navbar.attr('data-tab-index', ++index);
if (index == 2) {
$('#mytabs-next').css('color', '#ccc');
} else {
$('#mytabs-prev').css('color', '#000');
}
}
};
}
</script>
<div data-role="header" data-position="fixed" data-theme="b"
>
<h2>健康中心</h2>
<a href="../../app/main.html" data-icon="back" data-iconpos="notext">Back</a>
<a href="#opt-panel" data-icon="gear" data-iconpos="notext"
>Options</a>
</div>
<div class="ui-content" role="main">
<div
>
<div
>
<a id="mytabs-prev" href="#" class="ui-btn ui-mini"
onclick="$.mobile.data.moveToPrevTab();"><</a>
</div>
<div id="mytabs-navbar" data-role="navbar" data-tab-index="0">
<ul>
<li><a href="#" data-tab-index="0" class="ui-btn-active"
onclick="$.mobile.data.clickTab(this);">健康體檢</a></li>
<li><a href="#" data-tab-index="1"
onclick="$.mobile.data.clickTab(this);">美容抗衰</a></li>
<li><a href="#" data-tab-index="2"
onclick="$.mobile.data.clickTab(this);">口腔健康</a></li>
</ul>
</div>
<div
>
<a id="mytabs-next" href="#" class="ui-btn ui-mini"
onclick="$.mobile.data.moveToNextTab();">></a>
</div>
</div>
<div id="fragment-0" class="fragments">
<div >
<ul data-role="listview" class="ul">
<li class="li"><a
href="../health/detail.html"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div> 體檢套餐</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>健康之旅</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>健康管理計劃</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>基因檢測</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>中醫檢測</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>體能檢測</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>心里檢測</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>營養評估</a></li>
</ul>
</div>
</div>
<div id="fragment-1" class="fragments" >
<div >
<ul data-role="listview" class="ul">
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>光子嫩膚</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>冰點脫毛</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>果酸換膚</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>玻糖酸</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>保妥適</a></li>
</ul>
</div>
</div>
<div id="fragment-2" class="fragments" >
<div >
<ul data-role="listview" class="ul">
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>口腔種植</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>超薄貼面</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>無痛潔牙</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>牙齒矯正</a></li>
</ul>
</div>
</div>
<div id="fragment-3" class="fragments" >
<div >
<ul data-role="listview" class="ul">
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>功能醫學</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>荷爾蒙療法</a>
</ul>
</div>
</div>
<div id="fragment-4" class="fragments" >
<div >
<ul data-role="listview" class="ul">
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>運動康復</a></li>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>度假療養</a>
<li class="li"><a
href="#"><div
>
<img src="../../../Image/App/hb_20.jpg"
>
</div>康復套餐</a>
</ul>
</div>
</div>
</div>
</div>
<!-- </body></html> -->
以上是“jquery.mobile如何實現手機滾動”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
