小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

一、页眉

1、添加页眉和页脚

	<div data-role="header">

		<h1>第 1 页</h1>

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉

	<div data-role="header" data-position="fixed">

		<h1>第 1 页</h1>

	</div>

	<div data-role="footer" data-position="fixed">

		<h4>页面脚注</h4>

	</div>

可以使用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Mobile Web 应用程序</title>

<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

</head>

<body> 

<div data-role="page" id="page">

	<div data-role="header" data-position="fixed">

		<h1>第 1 页</h1>

	</div>

	<div data-role="content">

		<ul data-role="listview">

			<li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

            <li><a href="#page2">第 2 页</a></li>

            <li><a href="#page3">第 3 页</a></li>

			<li><a href="#page4">第 4 页</a></li>

		</ul>

	</div>

	<div data-role="footer" data-position="fixed">

		<h4>页面脚注</h4>

	</div>

</div>

<div data-role="page" id="page2">

	<div data-role="header">

		<h1>第 2 页</h1>

	</div>

	<div data-role="content">

		内容

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

<div data-role="page" id="page3">

	<div data-role="header">

		<h1>第 3 页</h1>

	</div>

	<div data-role="content">

		内容

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

<div data-role="page" id="page4">

	<div data-role="header">

		<h1>第 4 页</h1>

	</div>

	<div data-role="content">

		内容

	</div>

	<div data-role="footer">

		<h4>页面脚注</h4>

	</div>

</div>

</body>

</html>

在页面容器中添加data-fullscreen="true"后点击屏幕会出现页眉页脚，再次点击会消失。

二、添加返回按钮

	<div data-role="header" data-position="fixed">

    	<a href="#" data-icon="back">返回</a>

		<h1>第 1 页</h1>

        <a href="#" data-icon="plus" data-iconpos="notext"/>

	</div>

左边是文本图标按钮，右边是纯图标按钮。

三、添加分段工具栏

	<div data-role="header" data-position="fixed">

    	<a href="#" data-icon="back">返回</a>

		<h1>第 1 页</h1>

        <a href="#" data-icon="plus" data-iconpos="notext"/>

        <div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">

            <a href="#" data-role="button" class="ui-control-active">菜单一</a>

            <a href="#" data-role="button" class="ui-control-inactive">菜单二</a>

            <a href="#" data-role="button" class="ui-control-inactive">菜单三</a>

        </div>

	</div>

<style style="text/css">

	.segment-control{text-align:center;margin:0.2em;}

	.ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}

	.ui-control-active{background:#BBB;}

	.ui-control-inactive{background:#DDD;}

</style>

四、标签导航栏

	<div data-role="footer" data-position="fixed">

		<div data-role="navbar">

        	<ul>

            	<li><a href="#" data-icon="arrow-l">A</a></li>

                <li><a href="#" data-icon="back">B</a></li>

                <li><a href="#" data-icon="star">C</a></li>

                <li><a href="#" data-icon="plus">D</a></li>

                <li><a href="#" data-icon="arrow-r">E</a></li>

            </ul>

        </div>

	</div>

小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航的更多相关文章

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

Appium_pytest fixture的使用
一.定义fixture方法 # -*- coding:utf-8 -*-import pytestfrom baseutil.DriverUtil import DriverConfig @pytes ...
一个理性战胜感性的成功案例：P2P投资和活期理财，纠结中提炼出来的1个数学问题
我经常是投资了P2P,然后用钱,因而损失了一部分收益. 这是一个让我纠结的问题,为了解决这个问题,我不再凭感觉,而是从现实情况,提炼出来1个数学题,解答我的疑惑. 这是一个理性战胜感性的成功案例~ P ...
【转载】使用logstash+elasticsearch+kibana快速搭建日志平台
原文链接:http://www.cnblogs.com/buzzlight/p/logstash_elasticsearch_kibana_log.html 日志的分析和监控在系统开发中占非常重要的地 ...
.net core 分布式性能计数器的实现
1.特别鸣谢张善友老师的指点; 2.分布式性能计数器链接地址:https://mp.weixin.qq.com/s/hPV_bNZD4XmjP0QTE54pWA
ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
摘要本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证.而后,将分别结合ASP. ...
【习题 6-6 UVA - 12166 】Equilibrium Mobile
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举一个秤砣的重量不变. 某一个秤砣的重量不变之后. 所有秤砣的重量就固定了. 因为它的兄弟节点的重量要和它一样. 则父亲节点的重量 ...
Oracle动态SQL语句
动态SQL返回游标: create or replace procedure proc_ValidityDueQuery( p_regioncode in number, p_pscode in nu ...
Codeforces #144 (Div. 1) B. Table (组合数学+dp)
题目链接: B.Table 题意: \(n*m\)的矩阵使每个\(n*n\)矩阵里面准确包含\(k\)个点,问你有多少种放法. \((1 ≤ n ≤ 100; n ≤ m ≤ 10^{18}; 0 ≤ ...
ubuntu, 修改hosts文件
介绍下ubuntu下修改host实现域名指向本地的方法. Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结 ...
Android 中AIDL的使用与理解
AIDL的使用: 最常见的aidl的使用就是Service的跨进程通信了,那么我们就写一个Activity和Service的跨进程通信吧. 首先,我们就在AS里面新建一个aidl文件(ps:现在AS建 ...

小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航的更多相关文章

随机推荐

热门专题