小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式
一、定义全局的header
这个header是所有panel默认的header,需要在<div id="afui">内部，也就是和<div id="content">同一级的位置添加一个header 标签，并且id必须是header
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqMobi</title> <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>
<body>
<div id="afui">
<header id="header">
<a id="backButton" href="javascript:;" class="button" >Back</a>
<h1>Single Page App</h1>
</header>
<div id="content">
<div id="home">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="sketch">
<p>sketch</p>
</div>
</div>
<div id="navbar">
<a href="#home" id='navbar_home' class='icon home'>home</a>
<a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
<a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
</div>
</div>
</body>
</html>
运行效果
二、panel引入header标签
在<div id="afui">内部，也就是和<div id="content">同一级的位置顶一个header 标签，并且命名id。 然后再需要这个header的pane添加一个属性data-header="custom_header"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqMobi</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>
<body>
<div id="afui"> <div id="content">
<div id="home" data-header="custom_header">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="sketch">
<p>sketch</p>
</div>
</div>
<header id="custom_header">
<a id="backButton" href="javascript:;" class="button" >Back</a>
<h1>Single Page App</h1>
</header>
<div id="navbar">
<a href="#home" id='navbar_home' class='icon home'>home</a>
<a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
<a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
</div>
</div>
</body>
</html>
三、给每个panel自定义header
在需要自定义的panel的内部定义一个header，这个header此时只属于该panel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqMobi</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>
<body>
<div id="afui">
<div id="content">
<div id="home" class="panel">
<header>
<a id="backButton" href="javascript:;" class="button" >Back</a>
<h1>Single Page App</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="sketch">
<p>sketch</p>
</div>
</div> <div id="navbar">
<a href="#home" id='navbar_home' class='icon home'>home</a>
<a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
<a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
</div>
</div>
</body>
</html>
四、给相应的标签定义title属性，系统也会自动生成header
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqMobi</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>
<body>
<div id="afui">
<div id="content">
<div id="home" title="首页" class="panel" selected="true"
data-footer="custom_footer"> </div>
<div id="about" title="关于我们" class="panel"
data-footer="custom_footer"> </div>
<header id="custom_header">
<h1>首页</h1>
</header>
<footer id="custom_footer">
<a href='#home' class='icon home'>首页</a>
<a href='#about' class='icon info'>关于我们</a>
</footer>
<nav>
<div class='title'>Home</div>
<ul>
<li><a class="icon home mini" href="#main">Home</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式的更多相关文章
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的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移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）
记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建 ...
- 小强的HTML5移动开发之路（17）——HTML5内联SVG
来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
随机推荐
- sqlite3-查看数据库
在做android开发的时候,有时候我们需要查看系统下的数据库,这时候我们可以使用下面的方法 1.数据库存放位置 data/data/package/databases/abc.db 2.导出数据库 ...
- Matrix学习——基础知识
以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GDI+的时候再次学习如何使用矩阵来变化图像,看了之后在这里总结说明. 首先大家看看下面这个3 x 3的矩阵,这个矩阵被分割成4部 ...
- 10. Spring Boot JDBC 连接数据库
转自:https://blog.csdn.net/catoop/article/details/50507516
- 106.TCP传文件
客户端 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include < ...
- 关于VUE的一些指令的介绍
V-cloak 这是一个不常用的指令,出现这个指令的原因是因为有时候网络速度慢,还没加载完vue,代码就开始编译了,这个时候渲染出来的内容就可想而知了 <!DOCTYPE html> &l ...
- 【CS Round #43 E】Coprime Pairs
[链接]点击打开链接 [题意] 让你选择n个数字,组成一个数组,使得这n个数字中恰好有k对,它们是互质的. [题解] 我们可以先找出前n个质数,那么接下来的问题就转化为,凑出rest = n*(n-1 ...
- （转）如何启动或关闭数据库的归档(ARCHIVELOG)模式
转自:http://www.eygle.com/archives/2004/10/oracle_howtoeci.html Oracle数据库可以运行在2种模式下:归档模式(archivelog)和非 ...
- (转) 设置sqlplus中的退格键
转自:http://blog.itpub.net/26110315/viewspace-717249/ 有些时候当你使用sqlplus登录到数据库中的时候,敲错了命令想要删除修改的时候,发现以前敲入的 ...
- AMBA标准
AMBA标准定义了三种不同的总线 高级高性能总线(AHB): 高级系统总线(ASB):-----用的比较少 高级外设总线(APB). 基于AMBA的典型微控制器: 典型的AMBA AHB系统设计包含以 ...
- GO语言学习（三）GO语言学习API文档
一:GoLang标准库API文档 https://studygolang.com/pkgdoc