一、定义全局的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定义的几种方式的更多相关文章

  1. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  2. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  3. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  4. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  5. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

    记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建 ...

  8. 小强的HTML5移动开发之路（17）——HTML5内联SVG

    来自:http://blog.csdn.net/dawanganban/article/details/18189181 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集) ...

  9. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

随机推荐

  1. 【hihocoder 1564】同步H公司的终端

    [链接]http://hihocoder.com/problemset/problem/1564 [题意] 在这里写题意 [题解] 如下图 (上图中节点旁边的红色数字为它的权值) 从叶子节点开始考虑. ...

  2. 多校连萌15-8-12#A

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...

  3. Centos NFS 简单设置

    Server 端: NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind vi ...

  4. 【Codeforces Round #433 (Div. 1) C】Boredom(树状数组)

    [链接]h在这里写链接 [题意] 给你一个n*n的矩阵. 其中每一列都有一个点. 任意两个点构成了矩形的两个对角点 ->即任意两个点确定了一个矩形. ->总共能确定n*(n-1)/2个矩形 ...

  5. OAuth2 社区通用组件

    转载:http://www.cyqdata.com/download/article-detail-54302   使用本组件,只需要几行代码,就可以在网站上集成以下效果:     相关文章及使用说明 ...

  6. ssi的使用 开启 配置等

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lsfhack/article/details/69664402ssi的定义SSI(Server Si ...

  7. Virtualizing physical memory in a virtual machine system

    A processor including a virtualization system of the processor with a memory virtualization support ...

  8. swift学习第九天：可选类型以及应用场景

    可选类型的介绍 注意: 可选类型时swift中较理解的一个知识点 暂时先了解,多利用Xcode的提示来使用 随着学习的深入,慢慢理解其中的原理和好处 概念: 在OC开发中,如果一个变量暂停不使用,可以 ...

  9. php课程 3-12 回调参数怎么用

    php课程 3-12 回调参数怎么用 一.总结 一句话总结:有时候需要在一个函数中使用另外一个函数,使用回调的话,那么那个函数的几十行代码就不用写了,其实很基础,就是函数名的字符串的替换,超级基础的. ...

  10. jquery如何实现点击标题收缩下面的内容

    jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...