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第三方库收藏汇总，驱动核心源码详解和Binder超系统学习资源
m0_66684871的博客
03-04 774
这是使用CoordinatorLayout打造 打造炫酷效果的例子 https://github.com/gdutxiaoxu/CoordinatorLayoutExample LiveLayout 类似于映客，快手，等直播APP布局，直播刷礼物特效，定时清除礼物，计时器，圆形头像，横向listview等！！！ https://github.com/Qiang3570/LiveLayout TextViewExpandableAnimation Expandable TextView With Smooth
android-->tabHost
09-05
总的来说，`TabHost`是Android早期实现多标签导航的重要工具，虽然现在有了更多选择，但理解其工作原理仍对理解Android UI设计有帮助。在源码分析中，我们可以看到`TabHost`如何组织和管理选项卡，以及如何与`Intent...
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 ——《人机大战，历史的见证》 ...
补间动画 http://www.sunnyos.com/
u014748504的博客
03-22 1197
版权声明：本文为博主原创文章，未经博主允许不得转载。 http://www.360doc.com/content/16/0322/07/31855033_544211806.shtml         Tween动画是展现出旋转、渐变、移动、缩放的这么一种转换过程，即补间动画。Tween动画有两种定义方式：XML形式，编码形式。 XML定义动画，按照动画定义语法完成XML，置
RXJava
ppo的博客
03-03 2220
摘要视图订阅 Unity3D中基于订阅者模式实现事件机制     云计算行业圆桌论坛     【征文】Hadoop十周年特别策划——我与Hadoop不得不说的故事   给 Android 开发者的 RxJava 详解 2015-10-15 18:10 12378人阅读 评论(19) 收藏 举报  分类：   An
Android第三方库收藏汇总
zhaokai621的博客
07-18 1273
AndroidUtils 原文：原文 个人在Github上收藏的一些第三方库，做一个说明记录，方便自己查找。 文章目录开发规范：图片剪裁/编辑：图片压缩：汉字转拼音：JS与Native交互：视频播放器：录音：录制视频：数据库：二维码：网络请求库：Adapter：图片选择器：文件选择器：日历/时间选择：路由跳转：事件总线：UI控件：ImageView：Rangebar/Seekbar：Vi...
Android ViewPager放入多个XML如何监听其的控件
Leaning_wk的专栏
07-13 1358
aiqing0119的专栏 目录视图摘要视图订阅 新版极客头条上线，每天一大波干货     任玉刚：Android开发者的职场规划     从零练就iOS高手实战班震撼来袭     新型数据库利弊谈       分类： android 项目进阶2012-11-20 16:30 2038人阅读 评论(
二，android开发经典实例系列----TabHost、Gallery
03-26
在Android开发中，TabHost和Gallery是两个非常重要的组件，它们分别用于实现多标签页的切换和图片轮播效果。本文将深入解析这两个组件的使用方法，并通过一个经典的实例来展示它们如何协同工作。 首先，TabHost是...
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 1179
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 171
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 212
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 251
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
tabhost实现左侧选项卡
06-08
TabHost 是 Android 中常用的一个布局控件，可以用于实现选项卡的效果。要实现左侧选项卡，可以通过以下步骤： 1. 在布局文件中，使用 TabHost 控件，并设置其高度和宽度为 match_parent。 2. 在 TabHost 中添加一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值