Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

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

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
相关博文
HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

分类： 其他平台

2016-11-14 16:09:17

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

一、页眉

1、添加页眉和页脚

[html] view plain copy
 
 print?
  1. <div data-role="header">  
  2.     <h1>第 1 页h1>  
  3. div>  
[html] view plain copy
 
 print?
  1. <div data-role="footer">  
  2.     <h4>页面脚注h4>  
  3. div>  

默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉

[html] view plain copy
 
 print?
  1. <div data-role="header" data-position="fixed">  
  2.     <h1>第 1 页h1>  
  3. div>  
[java] view plain copy
 
 print?
  1. "footer" data-position="fixed">  
  2.     

    页面脚注

      
  

可以使用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"

[html] view plain copy
 
 print?
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery Mobile Web 应用程序title>  
  6. <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>  
  7. <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript">script>  
  8. <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript">script>  
  9. head>   
  10. <body>   
  11.   
  12. <div data-role="page" id="page">  
  13.     <div data-role="header" data-position="fixed">  
  14.         <h1>第 1 页h1>  
  15.     div>  
  16.     <div data-role="content">   
  17.         <ul data-role="listview">  
  18.             <li><a href="#page2">第 2 页a>li>  
  19.             <li><a href="#page3">第 3 页a>li>  
  20.             <li><a href="#page4">第 4 页a>li>  
  21.             <li><a href="#page2">第 2 页a>li>  
  22.             <li><a href="#page3">第 3 页a>li>  
  23.             <li><a href="#page4">第 4 页a>li>  
  24.             <li><a href="#page2">第 2 页a>li>  
  25.             <li><a href="#page3">第 3 页a>li>  
  26.             <li><a href="#page4">第 4 页a>li>  
  27.             <li><a href="#page2">第 2 页a>li>  
  28.             <li><a href="#page3">第 3 页a>li>  
  29.             <li><a href="#page4">第 4 页a>li>  
  30.             <li><a href="#page2">第 2 页a>li>  
  31.             <li><a href="#page3">第 3 页a>li>  
  32.             <li><a href="#page4">第 4 页a>li>  
  33.             <li><a href="#page2">第 2 页a>li>  
  34.             <li><a href="#page3">第 3 页a>li>  
  35.             <li><a href="#page4">第 4 页a>li>  
  36.             <li><a href="#page2">第 2 页a>li>  
  37.             <li><a href="#page3">第 3 页a>li>  
  38.             <li><a href="#page4">第 4 页a>li>  
  39.             <li><a href="#page2">第 2 页a>li>  
  40.             <li><a href="#page3">第 3 页a>li>  
  41.             <li><a href="#page4">第 4 页a>li>  
  42.         ul>       
  43.     div>  
  44.     <div data-role="footer" data-position="fixed">  
  45.         <h4>页面脚注h4>  
  46.     div>  
  47. div>  
  48.   
  49. <div data-role="page" id="page2">  
  50.     <div data-role="header">  
  51.         <h1>第 2 页h1>  
  52.     div>  
  53.     <div data-role="content">   
  54.         内容        
  55.     div>  
  56.     <div data-role="footer">  
  57.         <h4>页面脚注h4>  
  58.     div>  
  59. div>  
  60.   
  61. <div data-role="page" id="page3">  
  62.     <div data-role="header">  
  63.         <h1>第 3 页h1>  
  64.     div>  
  65.     <div data-role="content">   
  66.         内容        
  67.     div>  
  68.     <div data-role="footer">  
  69.         <h4>页面脚注h4>  
  70.     div>  
  71. div>  
  72.   
  73. <div data-role="page" id="page4">  
  74.     <div data-role="header">  
  75.         <h1>第 4 页h1>  
  76.     div>  
  77.     <div data-role="content">   
  78.         内容        
  79.     div>  
  80.     <div data-role="footer">  
  81.         <h4>页面脚注h4>  
  82.     div>  
  83. div>  
  84.   
  85. body>  
  86. html>  


在页面容器中添加data-fullscreen="true"后点击屏幕会出现页眉页脚，再次点击会消失。

二、添加返回按钮

[html] view plain copy
 
 print?
  1. <div data-role="header" data-position="fixed">  
  2.     <a href="#" data-icon="back">返回a>  
  3.     <h1>第 1 页h1>  
  4.        <a href="#" data-icon="plus" data-iconpos="notext"/>  
  5. div>  

 

左边是文本图标按钮，右边是纯图标按钮。

三、添加分段工具栏

[html] view plain copy
 
 print?
  1. <div data-role="header" data-position="fixed">  
  2.     <a href="#" data-icon="back">返回a>  
  3.     <h1>第 1 页h1>  
  4.        <a href="#" data-icon="plus" data-iconpos="notext"/>  
  5.        <div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">  
  6.            <a href="#" data-role="button" class="ui-control-active">菜单一a>  
  7.            <a href="#" data-role="button" class="ui-control-inactive">菜单二a>  
  8.            <a href="#" data-role="button" class="ui-control-inactive">菜单三a>  
  9.        div>  
  10. div>  
[css] view plain copy
 
 print?
  1. "text/css">  
  2.     .segment-control{text-align:center;margin:0.2em;}  
  3.     .ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}  
  4.     .ui-control-active{background:#BBB;}  
  5.     .ui-control-inactive{background:#DDD;}  
  6.   

 

四、标签导航栏

[html] view plain copy
 
 print?
  1. <div data-role="footer" data-position="fixed">  
  2.     <div data-role="navbar">  
  3.         <ul>  
  4.             <li><a href="#" data-icon="arrow-l">Aa>li>  
  5.                <li><a href="#" data-icon="back">Ba>li>  
  6.                <li><a href="#" data-icon="star">Ca>li>  
  7.                <li><a href="#" data-icon="plus">Da>li>  
  8.                <li><a href="#" data-icon="arrow-r">Ea>li>  
  9.            ul>  
  10.        div>  
  11. div>  

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

上一篇：HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

下一篇：HTML5移动开发之路（44）——JqueryMobile中的按钮

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

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

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

16024965号-6