Chinaunix首页 | 论坛 | 博客
  • 博客访问: 71557
  • 博文数量: 59
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 600
  • 用 户 组: 普通用户
  • 注册时间: 2016-08-22 10:54
文章分类
文章存档

2016年(59)

我的朋友

分类: 其他平台

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.                 <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.                 <href="#home" id='navbar_home' class='icon home'>homea>  
  32.                 <href="#sketch" id='navbar_pencil' class='icon pencil'>Sketcha>  
  33.                 <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.             <id="backButton" href="javascript:;" class="button" >Backa>  
  28.             <h1>Single Page Apph1>  
  29.         header>  
  30.         <div id="navbar">  
  31.                 <href="#home" id='navbar_home' class='icon home'>homea>  
  32.                 <href="#sketch" id='navbar_pencil' class='icon pencil'>Sketcha>  
  33.                 <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.                     <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.                 <href="#home" id='navbar_home' class='icon home'>homea>  
  32.                 <href="#sketch" id='navbar_pencil' class='icon pencil'>Sketcha>  
  33.                 <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.                 <href='#home' class='icon home'>首页a>  
  27.                 <href='#about' class='icon info'>关于我们a>  
  28.             footer>  
  29.             <nav>  
  30.                 <div class='title'>Homediv>  
  31.                 <ul>  
  32.                     <li><class="icon home mini" href="#main">Homea>li>  
  33.                 ul>  
  34.             nav>  
  35.         div>  
  36.     div>  
  37. body>  
  38. html>  

阅读(680) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~