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>
相关推荐
总的来说，`TabHost`是Android早期实现多标签导航的重要工具，虽然现在有了更多选择，但理解其工作原理仍对理解Android UI设计有帮助。在源码分析中，我们可以看到`TabHost`如何组织和管理选项卡，以及如何与`Intent...
这个例子中涉及到ListView、各个界面UI控件的使用、TabHost、跑马灯字符串、获取经纬度、Spinner内容适配器、气球图片、全屏显示、标题栏跑马灯的实现、捕获和打印异常、从TabActivity上面获取放置Tab的TabHost、...
在Android开发中，TabHost和Gallery是两个非常重要的组件，它们分别用于实现多标签页的切换和图片轮播效果。本文将深入解析这两个组件的使用方法，并通过一个经典的实例来展示它们如何协同工作。 首先，TabHost是...
下面我们将详细探讨如何自定义Android的TabHost，并通过具体的实现案例进行讲解。 首先，理解TabHost的基本结构是关键。TabHost通常由两部分组成：TabWidget和FrameLayout。TabWidget用于显示和管理各个标签，而...
Android安卓项目源码-嵌套TabHost示例.zip
本示例"Android参考源码-嵌套TabHost示例.zip"提供了如何在Android应用中实现嵌套TabHost的方法。嵌套TabHost意味着在一个TabHost内嵌套另一个TabHost，这样可以创建更为复杂和层次化的用户界面。 首先，我们需要...
-- 在layout.xml中 --> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent"> ...
本资源“tabhost--UI源码.zip”显然是一个包含有关如何使用TabHost实现用户界面的源代码示例。通过分析这个压缩包中的源码，我们可以深入理解TabHost的工作原理以及如何在实际项目中应用。 TabHost是Android SDK...
本示例将探讨如何在Android应用中实现嵌套的TabHost，即在一个TabHost中包含另一个TabHost，以提供更复杂的导航结构。 一、TabHost简介 TabHost是Android提供的一个容器，可以容纳多个TabWidget（标签页）和一个...
百度用一个CustomTabHost.java来实现底部TabHost点击效果的，很漂亮，点击Tab的时候文字会上跑，图片会从底部跑出来的一个小动画。 我用自己的方法逆袭了他的CustomTabHost，感觉用起来比它的好用，而且简单不少！
-- 第二个Tab的内容 --> android:id="@+id/widget_layout_red" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 内容组件 --> ...
这个压缩包“Android高级应用源码-Fragment实现TabHost效果.zip”包含了一个使用Fragment来实现传统TabHost功能的示例。TabHost通常用于在多个相关视图之间切换，而Fragment的引入则为这一任务提供了更现代、更灵活...
在移动应用开发中，原生安卓（Native Android）与jQuery Mobile的结合使用是一种常见的技术实践，旨在实现跨平台的高效开发。本项目标题提到的是利用原生安卓与jQuery Mobile共同构建Tab选项卡功能，这是一种常见于...
TabHost实现底部菜单， 底部菜单选项卡主要是通过TabHost和RadioGroup实现
-- 在Tab1的布局文件中 --> <TabHost android:id="@+id/nested_tabhost" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 同样的TabWidget和FrameLayout结构... --> </...
在Android开发中，TabHost和TabWidget是两个重要的组件，它们用于实现标签栏（Tab）的布局和交互。TabHost可以看作是一个容器，它管理多个小窗口（FrameLayout），每个窗口对应一个Tab，而TabWidget则负责显示这些...
这个"Android-radiogroupx实现tabhost小红点"项目就是针对这一需求而设计的。 首先，让我们理解RadioGroup的作用。RadioGroup是Android SDK提供的一种布局容器，用于管理一组RadioButton组件。在这个容器中，同一...
本教程将通过一个名为"WeiXinTabDemo"的项目，教你如何使用TabHost来实现类似微信底部Tab的界面，并动态显示未读信息条数。 首先，我们要了解TabHost是什么。TabHost是Android SDK提供的一种容器组件，用于创建带有...
-- FrameLayout 用于填充每个选项卡的内容 --> android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 第一个选项卡的布局 --> android...
`TabHost`是Android SDK提供的一种组件，用于实现这种多标签页的布局，它可以帮助开发者轻松地创建一个带有多个选项卡的应用界面，每个选项卡对应一个不同的活动或视图。下面将详细介绍如何使用`TabHost`来实现底部...