jquery mobile -> tabhost实现

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量81 收藏
点赞数
分类专栏： jquery mobiles 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mft8899/article/details/84689814
版权

 

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>

 

 

 

 

 

 

 

 

 

mft8899
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android-->tabHost
09-05
总的来说，`TabHost`是Android早期实现多标签导航的重要工具，虽然现在有了更多选择，但理解其工作原理仍对理解Android UI设计有帮助。在源码分析中，我们可以看到`TabHost`如何组织和管理选项卡，以及如何与`Intent...
二，android开发经典实例系列----TabHost、Gallery
03-26
在Android开发中，TabHost和Gallery是两个非常重要的组件，它们分别用于实现多标签页的切换和图片轮播效果。本文将深入解析这两个组件的使用方法，并通过一个经典的实例来展示它们如何协同工作。 首先，TabHost是...
jQuery UI数据渲染插件开发 jquery-render插件
TA远方
10-31 535
此插件主要是处理模板UI渲染的，附带了本地存储取值的方法 jQuery.extend({ format: function (text,args) { if (Array.isArray(args)==false) args = [args]; for(var i=0; i<args.length; i++) text = text.replaceAll('{'+i+'}',args[i]); return text; }, storage: fun
php theme_path,PHP_Yii2主题(Theme)用法详解，本文实例讲述了Yii2主题(Theme) - phpStudy
weixin_35496861的博客
03-24 199
Yii2主题(Theme)用法详解本文实例讲述了Yii2主题(Theme)用法。分享给大家供大家参考，具体如下：首先看看主要的配置方式：'components' => ['view' => ['theme' => ['pathMap' => ['@app/views' => '@app/themes/basic'],'baseUrl' => '@web/them...
android 浏览器开发实例
weixin_30279671的博客
07-22 47
android app需要通过手机显示网页信息还是比较常用的，比如我最近业余开发的 抢商铺游戏，需要对游戏规则做说明，规则会比较多，而且要经常变动，就想到用网页来展示，更新起来方便，不像应用，一旦发布出去，就很难更改。 言归正传，下面介绍下我对系统webview的使用，做的一个简单浏览器，无图无真像，先看看图（博客园不能传图片，等图片功能恢复了再传）： 首先是布局文件的编辑acti...
dtree详细资料
weixin_30736301的博客
05-27 178
登录|注册 xufaxi的专栏 目录视图 摘要视图 订阅 【活动】2017 CSDN博客专栏评选 【评论送书】SQL优化、深度学习、数据科学家 CSDN日报20170527 ——《人机大战，历史的见证》 ...
Android参考源码-嵌套TabHost示例.zip
03-08
本示例"Android参考源码-嵌套TabHost示例.zip"提供了如何在Android应用中实现嵌套TabHost的方法。嵌套TabHost意味着在一个TabHost内嵌套另一个TabHost，这样可以创建更为复杂和层次化的用户界面。 首先，我们需要...
Android-radiogroupx实现tabhost小红点
08-13
这个"Android-radiogroupx实现tabhost小红点"项目就是针对这一需求而设计的。 首先，让我们理解RadioGroup的作用。RadioGroup是Android SDK提供的一种布局容器，用于管理一组RadioButton组件。在这个容器中，同一...
android--自定义TabHost
10-18
下面我们将详细探讨如何自定义Android的TabHost，并通过具体的实现案例进行讲解。 首先，理解TabHost的基本结构是关键。TabHost通常由两部分组成：TabWidget和FrameLayout。TabWidget用于显示和管理各个标签，而...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1195
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1050
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 213
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 173
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 255
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 616
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 756
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
让开发者生活更轻松的 JavaScript 字符串方法
粉丝们务必加入微信粉丝群
07-27 164
前端岗位内推来了JavaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。ECMAScript 标准通过提供许多语言特性来...
爬虫基本原理入门
RHeng的博客
07-25 1080
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
tabhost实现左侧选项卡
06-08
TabHost 是 Android 中常用的一个布局控件，可以用于实现选项卡的效果。要实现左侧选项卡，可以通过以下步骤： 1. 在布局文件中，使用 TabHost 控件，并设置其高度和宽度为 match_parent。 2. 在 TabHost 中添加一个 TabWidget 控件，用于显示选项卡标签。 3. 在 TabHost 中添加一个 FrameLayout 控件，用于显示选项卡内容。 4. 在代码中，使用 TabHost.newTabSpec() 方法创建一个新的选项卡，设置其标签和内容，并将其添加到 TabHost 中。 5. 在 TabWidget 中设置选项卡标签的样式，例如设置背景颜色、文字颜色等等。 6. 在 TabHost 中设置选项卡的切换方式，例如设置为点击切换或滑动切换。 以下是一个简单的示例代码，演示如何实现左侧选项卡： ``` <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="#f0f0f0" android:orientation="vertical" android:layout_alignLeft="@android:id/tabcontent" android:layout_alignStart="@android:id/tabcontent"> </TabWidget> ``` Java 代码： ``` TabHost tabHost = findViewById(android.R.id.tabhost); tabHost.setup(); // 创建一个新的选项卡 TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1"); spec1.setIndicator("选项卡1"); spec1.setContent(R.id.tab1); tabHost.addTab(spec1); // 创建另一个选项卡 TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2"); spec2.setIndicator("选项卡2"); spec2.setContent(R.id.tab2); tabHost.addTab(spec2); // 设置选项卡的切换方式 tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // 处理选项卡切换事件 } }); // 设置选项卡标签的样式 TabWidget tabWidget = tabHost.getTabWidget(); for (int i = 0; i < tabWidget.getChildCount(); i++) { View view = tabWidget.getChildAt(i); view.setBackgroundColor(Color.parseColor("#ffffff")); TextView textView = view.findViewById(android.R.id.title); textView.setTextColor(Color.parseColor("#000000")); } ``` 以上代码中，通过添加两个选项卡实现左侧选项卡的效果。您可以根据需要添加更多的选项卡，并自定义选项卡标签的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值