Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 76979
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
相关博文
HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式

分类： 其他平台

2016-11-10 10:52:46

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式

一、定义全局的header

这个header是所有panel默认的header,需要在

内部，也就是和
同一级的位置添加一个header 标签，并且id必须是header

例如：

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jqMobititle>  
  6.   
  7. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  8. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  9. <script src="appframework.js" type="text/javascript">script>  
  10. <script src="ui/appframework.ui.js" type="text/javascript">script>  
  11. head>   
  12. <body>   
  13.     <div id="afui">  
  14.         <header id="header">  
  15.                 <a id="backButton" href="javascript:;" class="button" >Backa>  
  16.                 <h1>Single Page Apph1>  
  17.         header>  
  18.         <div id="content">  
  19.             <div id="home">  
  20.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
  21.                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  22.                     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  23.                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  24.                 p>  
  25.             div>  
  26.             <div id="sketch">  
  27.                 <p>sketchp>  
  28.             div>  
  29.         div>  
  30.         <div id="navbar">  
  31.                 <a href="#home" id='navbar_home' class='icon home'>homea>  
  32.                 <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketcha>  
  33.                 <a href="#picture" id='navbar_picture' class='icon picture'>Picturea>  
  34.         div>  
  35.     div>  
  36. body>  
  37. html>  

运行效果

 

二、panel引入header标签

 

在

内部，也就是和
同一级的位置顶一个header 标签，并且命名id。 然后再需要这个header的pane添加一个属性data-header="custom_header"

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jqMobititle>  
  6. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  7. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  8. <script src="appframework.js" type="text/javascript">script>  
  9. <script src="ui/appframework.ui.js" type="text/javascript">script>  
  10. head>   
  11. <body>   
  12.     <div id="afui">  
  13.           
  14.         <div id="content">  
  15.             <div id="home" data-header="custom_header">  
  16.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
  17.                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  18.                     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  19.                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  20.                 p>  
  21.             div>  
  22.             <div id="sketch">  
  23.                 <p>sketchp>  
  24.             div>  
  25.         div>  
  26.         <header id="custom_header">  
  27.             <a id="backButton" href="javascript:;" class="button" >Backa>  
  28.             <h1>Single Page Apph1>  
  29.         header>  
  30.         <div id="navbar">  
  31.                 <a href="#home" id='navbar_home' class='icon home'>homea>  
  32.                 <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketcha>  
  33.                 <a href="#picture" id='navbar_picture' class='icon picture'>Picturea>  
  34.         div>  
  35.     div>  
  36. body>  
  37. html>  

 

三、给每个panel自定义header

在需要自定义的panel的内部定义一个header，这个header此时只属于该panel

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jqMobititle>  
  6. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  7. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  8. <script src="appframework.js" type="text/javascript">script>  
  9. <script src="ui/appframework.ui.js" type="text/javascript">script>  
  10. head>   
  11. <body>   
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" class="panel">  
  15.                 <header>  
  16.                     <a id="backButton" href="javascript:;" class="button" >Backa>  
  17.                     <h1>Single Page Apph1>  
  18.                 header>  
  19.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
  20.                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  21.                     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  22.                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  23.                 p>  
  24.             div>  
  25.             <div id="sketch">  
  26.                 <p>sketchp>  
  27.             div>  
  28.         div>  
  29.          
  30.         <div id="navbar">  
  31.                 <a href="#home" id='navbar_home' class='icon home'>homea>  
  32.                 <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketcha>  
  33.                 <a href="#picture" id='navbar_picture' class='icon picture'>Picturea>  
  34.         div>  
  35.     div>  
  36. body>  
  37. html>  

四、给相应的标签定义title属性，系统也会自动生成header

 

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jqMobititle>  
  6. <link href="css/af.ui.css" rel="stylesheet" type="text/css"/>  
  7. <link href="css/icons.css" rel="stylesheet" type="text/css"/>  
  8. <script src="appframework.js" type="text/javascript">script>  
  9. <script src="ui/appframework.ui.js" type="text/javascript">script>  
  10. head>   
  11. <body>   
  12.     <div id="afui">  
  13.         <div id="content">  
  14.             <div id="home" title="首页" class="panel" selected="true"  
  15.                 data-footer="custom_footer">  
  16.               
  17.             div>  
  18.             <div id="about" title="关于我们" class="panel"  
  19.                 data-footer="custom_footer">  
  20.                   
  21.             div>  
  22.             <header id="custom_header">  
  23.                 <h1>首页h1>  
  24.             header>  
  25.             <footer id="custom_footer">  
  26.                 <a href='#home' class='icon home'>首页a>  
  27.                 <a href='#about' class='icon info'>关于我们a>  
  28.             footer>  
  29.             <nav>  
  30.                 <div class='title'>Homediv>  
  31.                 <ul>  
  32.                     <li><a class="icon home mini" href="#main">Homea>li>  
  33.                 ul>  
  34.             nav>  
  35.         div>  
  36.     div>  
  37. body>  
  38. html>  

阅读(722) | 评论(0) | 转发(0) |
0

上一篇：HTML5移动开发之路（39）——jqMobi插件json格式ActionSheet

下一篇：HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6