HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在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)-导航栏和页脚的更多相关文章
- HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...
- JQuery Mobile - 固定住页面和页脚
在点击页面空白时候,页眉和页脚会隐藏,在页眉和页脚加入以下代码就可以了: data-tap-toggle ="false" 例子: <div data-role=" ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jQuery Mobile 自定义导航条图标
1.jQuery Mobile 自定义导航条图标
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- 移动Web框架:jQuery Mobile VS Sencha Touch
最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...
- 【1-4】jQuery代码风格-导航栏
实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...
随机推荐
- shell脚本举例
1.有时在写一些以循环方式运行的监控脚本,设置时间间隔是必不可少的,下面是一个Shell进度条的脚本演示在脚本中生成延时. #!/bin/bash b='' for ((i=0;$i<=100; ...
- css3盒子模型及其定位
盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...
- Centos6虚拟主机的实现
centos6上虚拟主机的实现 实现虚拟主机有三种方式:基于IP的实现.基于端口的实现.基于FQDN的实现 一.基于IP的实现 1.先创建三个站点: mkdir /app/site1 mkdir ...
- 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 ...
- DefaultActionInvocation 源码
/** * Copyright 2002-2006,2009 The Apache Software Foundation. * * Licensed under the Apache License ...
- [Kubernetes]容器健康检查和恢复机制
在Kubernetes中,可以为Pod里的容器定义一个健康检查探针(Probe),这样Kubernetes会根据这个Probe的返回值决定这个容器的状态,而不是直接以容器是否允许(来自Docker返回 ...
- BZOJ2337 [HNOI2011]XOR和路径 【概率dp + 高斯消元】
题目 题解 突然get到这样路径期望的题目八成是高斯消元 因为路径上的dp往往具有后效性,这就形成了一个方程组 对于本题来说,直接对权值dp很难找到突破口 但是由于异或是位独立的,我们考虑求出每一位的 ...
- AtCoder Regular Contest 095E - Symmetric Grid
$n \leq 12,m \leq 12$,$n$行$m$列小写字母,现可做无数次操作:交换两行:交换两列.问是否有可能把他变成中心对称的. 没有去想分组枚举的复杂度QAQ 行和列的操作顺序是随意的. ...
- EMD距离
一.场景介绍 最近在研究一个场景:图片质量评分,给一张图片一个预测的分数. 里面提到了用 EMD(Earth Mover’s Distance)算法来评估两张图片之间的分布距离.下面主要讲解下 ...
- raspberrypi树莓派liunx下安装golang1.9环境(debian)
直接安装go1.6以上版本会出现提示 Set $GOROOT_BOOTSTRAP to a working Go tree >= Go 1.4. Go1.9的构建过程需要用于引导的 Go1.4二 ...