一、定义全局的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. rhel5安装 oracle10

    readhat 安装11gr2文档 需要注意的地方:必须关掉的 1,防火墙:2,SElinux . root 用户运行  setup  命令可关防火墙与SElinux 修改网络配置文件,一定要重启此文 ...

  2. 【Codeforces Round #450 (Div. 2) B】Position in Fraction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找循环节就好. ->其实可以不用找出来整个循环节. 有找到c就直接输出. 找到了循环节还没找到的话,直接输出无解. [代码] ...

  3. h5做app和原生app有什么区别？

    h5做app和原生app有什么区别? 一.总结 一句话总结: 二.h5做app和原生app有什么区别? 普通的HTML5技术与原生技术相比,有跨平台.动态.开放.直达二级内容页面等特点,但却在性能.工 ...

  4. Codeforces Beta Round #17 D. Notepad (数论 + 广义欧拉定理降幂)

    Codeforces Beta Round #17 题目链接:点击我打开题目链接 大概题意: 给你 \(b\),\(n\),\(c\). 让你求:\((b)^{n-1}*(b-1)\%c\). \(2 ...

  5. Day2：购物车小程序

    一.购物车小程序第一版 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan product_list = [ (&quo ...

  6. .NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来（一）

    原文:.NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来(一) 写下此文章只为了记录Surging微服务学习过程,并且分享给广大想学习surging的基友,方便广大 ...

  7. JS数据结构第二篇---链表

    一.什么是链表 链表是一种链式存储的线性表,是由一组节点组成的集合,每一个节点都存储了下一个节点的地址:指向另一个节点的引用叫链:和数组中的元素内存地址是连续的相比,链表中的所有元素的内存地址不一定是 ...

  8. Android5.0(Lollipop) BLE蓝牙4.0+浅析概念（四）

    作者:Bgwan链接:https://zhuanlan.zhihu.com/p/23679793来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 置顶:此文转载CSDN博 ...

  9. php websocket-网页实时聊天之PHP实现websocket（ajax长轮询和websocket都可以时间网络聊天室）

    php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...

  10. 【a903】石子归并

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 在一个圆形操场的四周摆放着N堆石子(N<= 100),现要将石子有次序地合并成一堆.规定每次只能选取相 ...