一、页眉

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页眉、工具栏和标签栏导航的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

    在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...

  8. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  9. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

  1. 微信小程序简单常见首页demo

    wxml <view class='index-contier'> <view class="index-left"> <view>电池剩余&l ...

  2. <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /> <LINK href="Xubuntu.ico" rel="shortcut icon"> <link href="Xubuntu.ico" rel="B

    <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /& ...

  3. Vue自定义组件

  4. (转）oracle 启动监听 报“监听程序不支持服务” 解决

    转自 http://www.51testing.com/html/99/478599-842622.html 今天安装了oracle后,启动监听,报错如下:    启动tnslsnr: 请稍候... ...

  5. serialport串口通讯

    在.NET Framework 2.0中提供了SerialPort类,该类主要实现串口数据通信 = System.IO.Ports.SerialPort.GetPortNames();获取电脑有哪几个 ...

  6. 【习题 6-3 UVA - 536】 Tree Recovery

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 递归题 [代码] #include <bits/stdc++.h> using namespace std; const ...

  7. hibernate 的映射文件快速生成：使用CodeSmith快速生成映射文件和映射类

    一 CodeSmith简介 本文以表自动生成NHibernate的映射文件和映射类的实例来说明一下本软件的使用方法. CodeSmith是一种基于模板的代码生成工具,其使用类似于ASP.NET的语法来 ...

  8. 为easyUI的dataGrid加入自己的查询框

    dataGrid作为easyUI的一个核心组件,其功能上是非常强大的. 可是外观上似乎就有点差强人意了,首先说一下我对dataGrid外观的2点感受 1.图标不好看,且尺寸非常小(16x16)-- 关 ...

  9. solrcloud集群搭建

    solrcloud 集群搭建 初始条件: 1. 三台服务器 IP 地址分别为 192.168.1.133 192.168.1.134 192.168.1.135 2. 使用 solr-5.3.1,zo ...

  10. BP神经网络公式推导及实现(MNIST)

    BP神经网络的基础介绍见:http://blog.csdn.net/fengbingchun/article/details/50274471,这里主要以公式推导为主. BP神经网络又称为误差反向传播 ...