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"
style="background-image: url('../../../Image/App/hb_main3.jpg'); background-size: 100% 100%;">
<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"
style="overflow: hidden; background-color: #333333;">
<h1>健康中心</h1>
<a href="../../app/main.html" data-icon="back" data-iconpos="notext">Back</a>
<a href="#opt-panel" data-icon="gear" data-iconpos="notext"
style="display: none;">Options</a>
</div>
<div class="ui-content" role="main">
<div
style="margin: -16px -16px 0 -16px; padding: 0 31px; position: relative;">
<div
style="position: absolute; top: 0; left: 0; width: 32px; height: 100%;">
<a id="mytabs-prev" href="#" class="ui-btn ui-mini"
style="margin: 0; color: #ccc; background-color: #2A670D;"
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
style="position: absolute; top: 0; right: 0; background-color: red; width: 32px;; height: 100%;">
<a id="mytabs-next" href="#" class="ui-btn ui-mini"
style="margin: 0; background-color: #2A670D;"
onclick="$.mobile.data.moveToNextTab();">></a>
</div>
</div>
<div id="fragment-0" class="fragments">
<div style="margin-top: 20px;">
<ul data-role="listview" class="ul">
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;"
href="../health/detail.html"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div> 体检套餐</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>健康之旅</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>健康管理计划</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>基因检测</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>中医检测</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>体能检测</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>心里检测</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>营养评估</a></li>
</ul>
</div>
</div>
<div id="fragment-1" class="fragments" style="display: none;">
<div style="margin-top: 20px;">
<ul data-role="listview" class="ul">
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>光子嫩肤</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>冰点脱毛</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>果酸换肤</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>玻糖酸</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>保妥适</a></li>
</ul>
</div>
</div>
<div id="fragment-2" class="fragments" style="display: none;">
<div style="margin-top: 20px;">
<ul data-role="listview" class="ul">
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>口腔种植</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>超薄贴面</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>无痛洁牙</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>牙齿矫正</a></li>
</ul>
</div>
</div>
<div id="fragment-3" class="fragments" style="display: none;">
<div style="margin-top: 20px;">
<ul data-role="listview" class="ul">
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>功能医学</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>荷尔蒙疗法</a>
</ul>
</div>
</div>
<div id="fragment-4" class="fragments" style="display: none;">
<div style="margin-top: 20px;">
<ul data-role="listview" class="ul">
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>运动康复</a></li>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>度假疗养</a>
<li class="li"><a
style="padding-left: 30px; background-color: #97E88F;" href="#"><div
style="float: left; width: 60px;">
<img src="../../../Image/App/hb_20.jpg"
style="max-width: 100%; height: 30px; margin: auto;">
</div>康复套餐</a>
</ul>
</div>
</div>
</div>
</div>
<!-- </body></html> -->