一、定义全局的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. setInterval()第一个参数带引号和不带引号的区别

    setInterval()第一个参数带引号和不带引号的区别:关于定时函数setInterval()的基本用法这里就不做介绍了,查阅相关教程即可,这里主要介绍一下setInterval()函数的第一个参 ...

  2. Python产生随机数组，测试用

    import numpy as np if __name__ == '__main__': a=np.random.randint(0,10,size=[3,3])    print(a) 输出: [ ...

  3. 【COGS1672】【SPOJ375】QTREE

    这是我的第一个边权链剖 COGS上和SPOJ有点不一样就是没有多组数据了本质还是一样的 我写的是COGS那个事实上改一改就能够去SPOJ AC了= -= (但是我如今上不去SPOJ卧槽(╯‵□′)╯︵ ...

  4. Android 快速下载 Android framework 源码

    官网 Android framework源码git地址 github: https://github.com/android/platform_frameworks_base google 官方: h ...

  5. React-Native_02:语法篇

    1.简单介绍 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式公布了.它的目标.是使得JavaScript语言能够用来编写复杂的大型应用程 ...

  6. php课程 9-33 php文件操作里面的注意事项有哪些

    php课程 9-33 php文件操作里面的注意事项有哪些 一.总结 一句话总结:文件操作其实很简单,就是几个文件操作函数需要记一下. 1.文件函数如何使用(如何找php文件函数的资料)? 查看参考手册 ...

  7. 基于bootstrap的主流框架有哪些

    基于bootstrap的主流框架有哪些 一.总结 一句话总结:其实可以直接百度bootstrap后台模板,出来一大堆,想用哪个用哪个. 二.[前端框架系列]浅谈当前基于bootstrap框架的几种主流 ...

  8. ITFriend网站内测公测感悟

    4月份做出网站Demo,就开始让用户使用了. 最初的黄色版界面,被吐槽得比较厉害. 关于界面,每个人都有自己的看法,只是喜欢和不喜欢的人比例不一样. 后来,花3400元请了个设计师,设计了一套界面,整 ...

  9. [WASM] Write to WebAssembly Memory from JavaScript

    We write a function that converts a string to lowercase in WebAssembly, demonstrating how to set the ...

  10. Dll的链接使用细节

    关于Dll Dll.Exe 都是PE格式的二进制文件. Dll相当于Linux操作系统下的so文件 1 基地址(Base Address)和相对地址(RelativeVirtual Address) ...