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





转载于:https://www.cnblogs.com/lanzhi/p/6469105.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401869.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

交换机开发（二）—— 三层交换机报文转发过程

交换机开发（二）—— 三层交换机报文转发过程

如图所示&#xff0c;假如主机A想访问主机B&#xff0c;首先主机A会将自己的IP地址和子网掩码做与操作,得出网路地址(如:Host-A的IP地址100.1.1.2与自身掩码255.255.255.0做与操作后,得到的网络号是100.1.1.0).然后判断目的IP地址(即Host-B的IP地址)与自己的网络地址是不是在同…
阅读更多...
分布式搜索elasticsearch配置文件详解

分布式搜索elasticsearch配置文件详解

2019独角兽企业重金招聘Python工程师标准>>> elasticsearch的config文件夹里面有两个配置文件&#xff1a;elasticsearch.yml和logging.yml&#xff0c;第一个是es的基本配置文件&#xff0c;第二个是日志配置文件&#xff0c;es也是使用log4j来记录日志的&#xff…
阅读更多...
交换机开发（三）—— 深入分析三层网络交换机的原理和设计

交换机开发（三）—— 深入分析三层网络交换机的原理和设计

引言传统路由器在网络中起到隔离网络、隔离广播、路由转发以及防火墙的作业&#xff0c;并且随着网络的不断发展&#xff0c;路由器的负荷也在迅速增长。其中一个重要原因是出于安全和管理方便等方面的考虑&#xff0c;VLAN(虚拟局域网)技术在网络中大量应用。VLAN技术可以逻辑…
阅读更多...
XML 命名空间（XML Namespaces）

XML 命名空间（XML Namespaces）

为什么80%的码农都做不了架构师&#xff1f;>>> XML 应用程序 XML CDATA XML 命名空间提供避免元素命名冲突的方法。 命名冲突 在 XML 中&#xff0c;元素名称是由开发者定义的&#xff0c;当两个不同的文档使用相同的元素名时&#xff0c;就会发生命名冲突。 这个…
阅读更多...
交换机开发（四）—— ARP 基础知识解析

交换机开发（四）—— ARP 基础知识解析

一、ARP协议简介 Internet是由各种各样的物理网络通过使用诸如路由器之类的设备连接在一起组成的。当主机发送一个数据包到另一台主机的过程中 可能要经过多种不同的物理网络。主机和路由器都是在网络层通过IP地址来识别的&#xff0c;这个地址是在全世界内唯一的。 然而&…
阅读更多...
VRP网络操作系统简介

VRP网络操作系统简介

VRP (Versatile Routing Platform)即通用路由平台&#xff0c;是华为在通信领域多年的研究经验结晶&#xff0c;是华为所有基于IP/ATM构架的数据通信产品操作系统平台。运行VRP操作系统的华为产品包括路由器、局域网交换机、ATM交换机、拨号访问服务器、IP电话网关、电信级综合…
阅读更多...
Type mismatch:

Type mismatch:

Type mismatch: cannot convert from java.sql.PreparedStatement to com.mysql.jdbc.PreparedStatement import java.sql.PreparedStatement; java连接数据库的问题&#xff1a;Type mismatch: cannot convert from ResultSet to ResultSet 包导入错了,你要导入的是import jav…
阅读更多...
Linux 下挂载新硬盘方法

Linux 下挂载新硬盘方法

Linux的硬盘识别: 一般使用”fdisk -l”命令可以列出系统中当前连接的硬盘 设备和分区信息.新硬盘没有分区信息,则只显示硬盘大小信息. 1.关闭服务器加上新硬盘 2.启动服务器&#xff0c;以root用户登录 3.查看硬盘信息 #fdisk -l [cpp] view plaincopy Disk /dev/sda: 42.9 GB…
阅读更多...
php面向对象之单表操作类

php面向对象之单表操作类

<?php //数据库单表操作类 define("HOST","localhost"); define("USER","root"); define("PASS",""); define("DBNAME","lamp78"); class Db {protected $link; //连接资源protected $…
阅读更多...
C++ 学习基础篇（一）—— C++与C 的区别

C++ 学习基础篇（一）—— C++与C 的区别

编程的学习学无止境&#xff0c;只掌握一门语言是远远不够的&#xff0c;现在我们开始C的学习之路&#xff0c;下面先看下C 与C 的区别 一、C概述 1、发展历史 1980年&#xff0c;Bjarne Stroustrup博士开始着手创建一种模拟语言&#xff0c;能够具有面向对象的程序设计特色。在…
阅读更多...
C++学习基础篇 —— 引用（）的用法和应用

C++学习基础篇 —— 引用（）的用法和应用

一、引用简介 引用就是某一变量&#xff08;目标&#xff09;的一个别名&#xff0c;对引用的操作与对变量直接操作完全一样。 引用的声明方法&#xff1a;类型标识符&引用名目标变量名&#xff1b; 【例1】&#xff1a; [cpp] view plaincopy int a; int &raa; //定义…
阅读更多...
js 数组遍历for..in弊端

js 数组遍历for..in弊端

//for..in在数组中的弊端 原则上数组Array对象是不能操作的&#xff0c;但是有些程序员开始不注意把Array的原型链上添加了方法就会出现意想不到的bug//例如var arr [1,2,3];Array.prototype.test function() { }for(var i in arr) { //。。。。操作 }就会把test遍历出来 会出…
阅读更多...
C++基础知识（一）—— C++程序结构

C++基础知识（一）—— C++程序结构

下面我们从一个最简单的程序入手看一个C程序的组成结构。 // my first program in C #include <iostream.h> using namespace std; int main() { cout << “Hello World!”; return 0; } Hello World! 上面左侧显示了我们的第一个程序的源代码&#xff0c…
阅读更多...
给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js

给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js

经常在一些大神博客里面看到非常好看的高亮代码&#xff0c;有sublime风格&#xff0c;GitHub风格等等。毫无疑问&#xff0c;好的高亮代码插件可以不仅仅让你的博文显得更高大上&#xff0c;更重要的是舒适的阅读体验。经过我在网上的一番搜罗&#xff0c;终于找到了一款非常赞…
阅读更多...
C++基础知识（二）—— 变量和数据类型

C++基础知识（二）—— 变量和数据类型

你可能觉得这个“Hellow World”程序用处不大。我们写了好几行代码&#xff0c;编译&#xff0c;然后执行生成的程序只是为了在屏幕上看到一句话。的确&#xff0c;我们直接在屏幕上打出这句话会更快。但是编程并不仅限于在屏幕上打出文字这么简单的工作。为了能够进一步写出可…
阅读更多...
WCF

WCF

http://www.cnblogs.com/wintersun/archive/2011/02/17/1956832.html
阅读更多...
C++基础知识（三）—— 常量

C++基础知识（三）—— 常量

一个常量&#xff08;constant&#xff09;是一个有固定值的表达式。 字&#xff08;Literals&#xff09; 字是用来在程序源码中表达特定的值。在前面的内容中我们已经用了很多的字来给变量赋予特定的值。例如&#xff1a; a 5;这句代码中5就是一个字常量。 字常量(literal…
阅读更多...
Android获取本机号码及运营商

Android获取本机号码及运营商

import android.content.Context; import android.telephony.TelephonyManager; import android.util.Log;public class SIMCardInfo {/*** TelephonyManager提供设备上获取通讯服务信息的入口。 应用程序可以使用这个类方法确定的电信服务商和国家 以及某些类型的用户访问信息…
阅读更多...
C++基础知识（四）—— 操作符/运算符

C++基础知识（四）—— 操作符/运算符

前面已经学习了变量和常量&#xff0c;我们可以开始对它们进行操作&#xff0c;这就要用到C的操作符。有些语言&#xff0c;很多操作符都是一些关键字&#xff0c; 比如add, equals等等。C的操作符主要是由符号组成的。这些符号不在字母表中&#xff0c;但是在所有键盘上都可以…
阅读更多...
Java中如何克隆集合——ArrayList和HashSet深拷贝

Java中如何克隆集合——ArrayList和HashSet深拷贝

2019独角兽企业重金招聘Python工程师标准>>> 编程人员经常误用各个集合类提供的拷贝构造函数作为克隆List&#xff0c;Set&#xff0c;ArrayList&#xff0c;HashSet或者其他集合实现的方法。需要记住的是&#xff0c;Java集合的拷贝构造函数只提供浅拷贝而不是深拷…
阅读更多...
最新文章

Copyright @ 2022~2023