index.html 先新建一个首页 里面 包括了 footer 的 navbar ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<link rel="stylesheet" href="./css/jquery.mobile-1.4.3.min.css" type="text/css" />
<script type="text/javascript" src="./js/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<style type="text/css">
#tabmain{
margin:0px;
padding:0px;
}
#tabmain_home{
padding:0px;
margin:0px;
line-height:0px;
overflow:hidden;
}
</style>
<script language="javascript">
<!--
$(document).ready(function(){
var h = $(window).height()-$("#footer_bar").height()-3;
$('#tabmain').height(h);
$('#tabmain_home').height(h);
$.extend({
trun:function(p){
$("#tabmain")[0].contentWindow.$.trun(p);
}
});
$("#tab1").on("tap",function(){
$.trun(1);
});
$("#tab2").on("tap",function(){
$.trun(2);
});
$("#tab3").on("tap",function(){
$.trun(3);
});
$("#tab4").on("tap",function(){
$.trun(4);
});
});
$(document).change(function(){
var h = $(window).height()-$("#footer_bar").height()-3;
$('#tabmain').height(h);
$('#tabmain_home').height(h);
});
//-->
</script>
</head>
<body>
<body style="overflow:hidden">
<div data-role="page" >
<div data-role="content" id="tabmain_home" >
<iframe src="./tabmain.html" id="tabmain" scrolling="auto" frameborder="0" width="100%" ></iframe>
</div>
<div data-role="footer" data-position="fixed" id="footer_bar">
<div data-role="navbar">
<ul>
<li><a href="#" id="tab1" data-icon="custom" class="ui-btn-active ui-nodisc-icon icon_zixuangu no_corner" >自选股</a></li>
<li><a href="#" id="tab2" data-icon="custom" class="ui-nodisc-icon icon_zhiwufu no_corner">智服务</a></li>
<li><a href="#" id="tab3" data-icon="custom" class="ui-nodisc-icon icon_gushebang no_corner">股神帮</a></li>
<li><a href="#" id="tab4" data-icon="custom" class="ui-nodisc-icon icon_yiqiying no_corner">一起赢</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
tabhost.html 新建 包含 许多 page 的 页面,
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<link rel="stylesheet" href="./css/jquery.mobile-1.4.3.min.css" type="text/css" />
<script type="text/javascript" src="./js/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script language="javascript">
<!--
var totalPage = 4;
var crtPage = 1;
$(document).ready(function(){
$.extend({
trun:function(p){
if(p < crtPage){
$.mobile.changePage("#p"+p, { transition: "slide",reverse:"true"});
}else{
$.mobile.changePage("#p"+p, { transition: "slide"});
}
crtPage = p;
}
});
});
$(document).on("swipeleft",function(){
var nextPage = crtPage+1;
if(nextPage > totalPage){
nextPage=1;
}
$.trun(nextPage);
});
$(document).on("swiperight",function(){
var nextPage = crtPage-1;
if(nextPage < 1){
nextPage=totalPage;
}
$.trun(nextPage);
});
//-->
</script>
</head>
<body>
<body >
<div data-role="page" id="p1" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>自选股</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
<li>aaaaaaaaa</li>
</ul>
</div>
</div>
<div data-role="page" id="p2" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>智服务</h1>
</div>
<div data-role="content">
<p>Coming soon...</p>
</div>
</div>
<div data-role="page" id="p3" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>股神帮</h1>
</div>
<div data-role="content">
<p><a href="#p1">a</a></p>
</div>
</div>
<div data-role="page" id="p4">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>一起赢</h1>
</div>
<div data-role="content">
<p>coming soon...</p>
</div>
</div>
</div>
</body>
</html>