一、页眉

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. spring基础内容

      关注和收藏在这里   深入理解Spring框架的作用 纵览Spring , 读者会发现Spring 可以做非常多的事情. 但归根结底, 支撑Spring的仅仅是少许的基本理念, 所有的理念都可以追 ...

  2. 全新linux中通过编译方式安装nginx

    先去官网下载linux.tar.gz包 http://nginx.org/en/download.html   传到linxu中 解压tar包 在软件包nginx-1.15.9目录下对NGINX进行配 ...

  3. 【LightOJ - 1205】Palindromic Numbers

    [链接]https://cn.vjudge.net/problem/LightOJ-1205 [题意] 求出L..R范围内的回文个数 [题解] 数位DP; 先求出1..x里面的回文串个数.则做一下前缀 ...

  4. xml数据文件上传至数据库

    上传xml文件数据到数据库思路:首先上传需要建校验xml字段的校验文件,然后程序根据后台写好的xml数据文件路径自动读取数据文件,再上传数据文件到数据库之前先根据校验文件校验上传的数据文件的字段是否合 ...

  5. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  6. django 简单会议室预约（1）

    django 是python的一个web框架,为什么要用django,作者之前用过另一个框架flask,虽然flask比较简单很容易让人学,但是flask没有整体感,会让初学着茫然. 这里我们用dja ...

  7. 00087_File

    1.IO概述 (1)要把数据持久化存储,就需要把内存中的数据存储到内存以外的其他持久化设备(硬盘.光盘.U盘等)上: (2)当需要把内存中的数据存储到持久化设备上这个动作称为输出(写)Output操作 ...

  8. Project Euler 613 Pythagorean Ant（概率+积分）

    题目链接:点击我打开题目链接 题目大意: 给你一只蚂蚁,它在一个 边长为 \(30-40-50\) 的直角三角形\((x,y)\)上,并且它在直角三角形中选择的位置和移动方向的概率都是相等的.问你这只 ...

  9. Altium Designer画异型焊盘的步骤

    注:如果要画的是过孔,就需要加入底层的

  10. （转）bat批处理的注释语句

    在批处理中,段注释有一种比较常用的方法: goto start = 可以是多行文本,可以是命令 = 可以包含重定向符号和其他特殊字符 = 只要不包含 :start 这一行,就都是注释 :start 另 ...