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

随机推荐

SQL分页的几种方式
1.使用Row_number() over(order by columnName)函数来作为标示分页(下面的例子都是以last_seen来排序的,要求取顺序为20-30行的数据) SELECT Us ...
mysql集群搭建教程-基础篇
计算机一级考试系统要用集群,目标是把集群搭建起来,保证一个库dang了,不会影响程序的运行.于是在孟海滨师哥的带领下开始了我的第一次搭建mysql集群,首先看了一些关于集群的资料,然后根 ...
java位运算应用
位移动运算符: <<表示左移, 左移一位表示原来的值乘2. 比如:3 <<2(3为int型) 1)把3转换为二进制数字0000 0000 0000 0000 0000 000 ...
Android怎样实现毛玻璃效果之Android高级模糊技术
自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果.磨砂效果.各大系统就開始竞相模仿,这是如何的一个效果呢,我们先来看一下,如以下的图片: 效果我们知道了,怎样在Android中实现呢. ...
kindle paperwhite 简单笔记按名称分类
已更新python,见新博客 http://www.hrwhisper.me/archives/708 写作背景: 南京决赛比赛完那天晚上写的. 使用方法: 将My Clippings.txt 放在 ...
【干货】前端开发者最常用的六款IDE
一.Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual ...
php字符串函数分类总结
php字符串函数分类总结一.总结 explode str_split str_word_count strtolower 二.php字符串函数分类总结 php内置了98个字符串函数(除了基于正 ...
Webpack学习手册
多端阅读<Webpack官方文档>: 在PC/MAC上查看:下载w3cschool客户端,进入客户端后通过搜索当前教程手册的名称并下载,就可以查看当前离线教程文档.下载Webpack官方文 ...
Oracle 12CR2 中alert.log出现大量的 WARNING: too many parse errors 告警
Oracle 12CR2 中alert.log出现大量的 WARNING: too many parse errors 告警日志如下: 2018-06-24T17:16:21.024586+08 ...
python3中sum
摘自https://blog.csdn.net/ikerpeng/article/details/17026011 其实python中sum有两种一种是python自己的sum 另一种是python ...

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

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

随机推荐

热门专题