小强的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 ...

随机推荐

洛谷 P1308 统计单词数
P1308 统计单词数题目描述一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定 ...
Moodle 中文 API 之文件管理API
File API 文件管理文件夹 1. 概述 2. 文件域 2.1 命名文件域 3. 提供文件给用户 4. 从用户那获取文件 5. 样例 5.1 浏览文件 5.2 移动文件 5.3 文件列表 5. ...
Android基于xmpp的即时通讯应用
xmpp是一个通信协议.因为这是个开放的协议,为了节俭开发成本,很多即时应用都采用了这个协议.Android上最常用的组合asmack +openfire.Asmack是smack的android版, ...
使用Invoke解决多线程间的控件访问出错
// 按钮点击事件处理程序private void button1_Click(object sender, EventArgs e){ //创建新线程 Thread processorT ...
[Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall
In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...
NVL与NVL2
一.NVL函数是一个空值转换函数 NVL(表达式1,表达式2) 如果表达式1为空值,NVL返回值为表达式2的值,否则返回表达式1的值. 该函数的目的是把一个空值(null)转换成一个实际的 ...
iOS图片加载－SDWebImage
一.SDWebImage内部实现过程 1, 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWeb ...
[PReact] Integrate Redux with Preact
Redux is one of the most popular state-management libraries and although not specific to React, it i ...
如何使stm32程序更好移植, 结构体相当于define
原创:转载请标注引用地址如何定义 led1对应于PA8 呢 :对于我一开始学习的方法:: #include "main.h" #define led1 GPIO_Pi ...
ANSCII码和BCD码互转
bool AtoBCD(unsigned char* Asc,unsigned char* BCD,int len) { int i; unsigned char ch; //高位 unsigned ...

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

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

随机推荐

热门专题