导航栏部分的代码一般放置在data-role为header的div的内。

<div data-role="header">
<a href="#" data-role="button" data-icon="home">首页</a>
<h1>欢迎訪问我的主页</h1>
<a href="#" data-role="button" data-icon="search">搜索</a>
</div>

一个主要的导航栏代码如上。包括两个button和一行文字作为标题。data-icon能够定义button相应的小图标。假设希望将button放在文本右側。能够加入class=“ui-btn-right”样式。要注意的是,Jquery Mobile中的导航部分(header内)仅仅能包括两个button。(能够想象一下,一般的手机app导航内都不会有过多的button,一般都放在页脚中)

相比之下。页脚的button数量没有限制,页脚放在footer中,基本代码例如以下:

<div data-role="footer">
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
</div>

这符合一般的移动app设计模式,底部是切换到不同页面的button。切换页面的方式也非常easy,注意到这里的每个button都是用a标签定义的。当中的href就如我们上次所说,是能够进行页面转换的,仅仅要在href后面加入还有一个页面的id(即data-role为page的div)就可以完毕跳转。跳转的过程有非常多jquery mobile内置定义的动画效果。在以后介绍。

关于页眉和页脚,除了上述所说之外,还能够使用data-position属性定义它们的位置属性。包括下面三个可选值(来自:w2cschool):

Inline - 默认。页眉和页脚与页面内容位于行内。

Fixed – 页眉和页脚会留在页面顶部和底部。

Fullscreen - 与 fixed 类似;页眉和页脚会留在页面顶部和底部,but also over thepage content. It is also slightly see-through

HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚的更多相关文章

  1. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...

  2. jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

    程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...

  3. JQuery Mobile - 固定住页面和页脚

    在点击页面空白时候,页眉和页脚会隐藏,在页眉和页脚加入以下代码就可以了: data-tap-toggle ="false" 例子: <div data-role=" ...

  4. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  5. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  6. jQuery Mobile 自定义导航条图标

    1.jQuery Mobile 自定义导航条图标

  7. jquery侧边折叠导航栏制作,两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  8. 移动Web框架:jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  9. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

随机推荐

  1. shell脚本举例

    1.有时在写一些以循环方式运行的监控脚本,设置时间间隔是必不可少的,下面是一个Shell进度条的脚本演示在脚本中生成延时. #!/bin/bash b='' for ((i=0;$i<=100; ...

  2. css3盒子模型及其定位

    盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...

  3. Centos6虚拟主机的实现

    centos6上虚拟主机的实现   实现虚拟主机有三种方式:基于IP的实现.基于端口的实现.基于FQDN的实现 一.基于IP的实现 1.先创建三个站点: mkdir /app/site1 mkdir ...

  4. Educational Codeforces Round 33 (Rated for Div. 2)

    A. Chess For Three time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. DefaultActionInvocation 源码

    /** * Copyright 2002-2006,2009 The Apache Software Foundation. * * Licensed under the Apache License ...

  6. [Kubernetes]容器健康检查和恢复机制

    在Kubernetes中,可以为Pod里的容器定义一个健康检查探针(Probe),这样Kubernetes会根据这个Probe的返回值决定这个容器的状态,而不是直接以容器是否允许(来自Docker返回 ...

  7. BZOJ2337 [HNOI2011]XOR和路径 【概率dp + 高斯消元】

    题目 题解 突然get到这样路径期望的题目八成是高斯消元 因为路径上的dp往往具有后效性,这就形成了一个方程组 对于本题来说,直接对权值dp很难找到突破口 但是由于异或是位独立的,我们考虑求出每一位的 ...

  8. AtCoder Regular Contest 095E - Symmetric Grid

    $n \leq 12,m \leq 12$,$n$行$m$列小写字母,现可做无数次操作:交换两行:交换两列.问是否有可能把他变成中心对称的. 没有去想分组枚举的复杂度QAQ 行和列的操作顺序是随意的. ...

  9. EMD距离

    一.场景介绍   最近在研究一个场景:图片质量评分,给一张图片一个预测的分数.   里面提到了用 EMD(Earth Mover’s Distance)算法来评估两张图片之间的分布距离.下面主要讲解下 ...

  10. raspberrypi树莓派liunx下安装golang1.9环境(debian)

    直接安装go1.6以上版本会出现提示 Set $GOROOT_BOOTSTRAP to a working Go tree >= Go 1.4. Go1.9的构建过程需要用于引导的 Go1.4二 ...