小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5147字，纯文字阅读大概需要8分钟。
内容图文
一、定义全局的header这个header是所有panel默认的header,需要在<p id="afui">内部，也就是和<p 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>
<p id="afui">
<header id="header">
<a id="backButton" href="javascript:;" class="button" >Back</a>
<h1>Single Page App</h1>
</header>
<p id="content">
<p 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>
</p>
<p id="sketch">
<p>sketch</p>
</p>
</p>
<p 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>
</p>
</p>
</body>
</html>运行效果
二、panel引入header标签
在<p id="afui">内部，也就是和<p 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>
<p id="afui">
<p id="content">
<p 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>
</p>
<p id="sketch">
<p>sketch</p>
</p>
</p>
<header id="custom_header">
<a id="backButton" href="javascript:;" class="button" >Back</a>
<h1>Single Page App</h1>
</header>
<p 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>
</p>
</p>
</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>
<p id="afui">
<p id="content">
<p 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>
</p>
<p id="sketch">
<p>sketch</p>
</p>
</p>
<p 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>
</p>
</p>
</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>
<p id="afui">
<p id="content">
<p id="home" title="首页" class="panel" selected="true"
data-footer="custom_footer">
</p>
<p id="about" title="关于我们" class="panel"
data-footer="custom_footer">
</p>
<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>
<p class='title'>Home</p>
<ul>
<li><a class="icon home mini" href="#main">Home</a></li>
</ul>
</nav>
</p>
</p>
</body>
</html>
以上就是小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式 的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！
内容总结
以上是互联网集市为您收集整理的小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式全部内容，希望文章能够帮你解决小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】