皓轩的jquery mobile之路(二)
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
编写代码要注意最外层div需要添加data-role="page" ,标题需要添加data-role="header",内容需要添加data-role="content",底部需要添加data-role="footer"。
代码:
----------------------------------------------------------
<div data-role="page" >
<div data-role="header">
<h1>页面标题</h1>
</div>
<div data-role="content">
<p>页面内容</p>
</div>
<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>
----------------------------------------------------------
jQuery Mobile 页面切换效果
1. 页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交
代码:
<a href="#div2" data-transition="slide">切换到div2</a>
<a href="#div1" data-transition="slide">切换到div1</a>
data-transition的参数:
fade:默认淡入到下一页;flip:从后向前翻转到下一页;flow:前一页缩小向左抛出到下一页;pop:弹出进入下一页; slide:从右到左滑动到下一页
slidefade:从右到左滑动并淡入到下一页;slideup:从下到上滑动到下一页;slidedown:从上到下滑动到下一页;turn:翻到下一页;none:去除效果。
2. data-transition的所有效果都支持退后功能需添加data-direction="reverse"
代码:
<a href="#div2" data-transition="flow">切换到div2</a>
<a href="#div1" data-transition="flow" data-direction="reverse">切换到div1</a>
jQuery Mobile 按钮
1. 在 jQuery Mobile 中,按钮可通过三种方式创建:
- 使用 <button> 元素
- 使用<input type="button" value="按钮"> 元素
- 使用带有 <a href="#" data-role="button">按钮</a> 的 <a> 元素
在什么场景用那种按钮:
data-role="button" 用于页面之间的链接 input 和button用于表单提交
代码:
<a href="#div2" data-role="button">访问第二个页面</a>
<a href="#div1" data-role="button">访问第二个页面</a>
<div data-role="page" id="div1">
<div data-role="header">
<h1>页面标题</h1>
</div>
<div data-role="content">
<p><a href="#div2" data-role="button">访问第二个页面</a></p>
</div>
<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>
<div data-role="page" id="div2">
<div data-role="header">
<h1>页面标题</h1>
</div>
<div data-role="content">
<p><a href="#div1" data-role="button">访问第二个页面</a></p>
</div>
<div data-role="footer">
<h1>页面底部内容</h1>
</div>
</div>
2. 按钮默认情况下都是占满屏幕宽度,所以提供了data-inline="true"让按钮的宽度和字一样宽
<a href="#pagetwo" data-role="button" data-inline="true">按钮宽度和我一样</a>
3. jqmobile组合按钮,组合顾名思义是几个按钮拼接在一起,那么就有两种情况,一种是一个按钮占一行(默认),一种是几个按钮占一行;所以提供data-role="controlgroup" 属性和 data-type="horizontal|vertical"对按钮布局。
代码:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>组合按钮</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>水平组合按钮:</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div><br>
<div data-role="controlgroup" data-type="vertical">
<p>垂直组合按钮 (默认):</p>
<a href="#" data-role="button">按钮 1</a>
<a href="#" data-role="button">按钮 2</a>
<a href="#" data-role="button">按钮 3</a>
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
4. jqmobile后退按钮需要添加 data-rel="back"。
代码:
<a href="#" data-role="button" data-rel="back">返回</a>
5. 更多用于按钮的data-*属性
data-corners="true/false" 是否让按钮圆角
data-mini="true/false" 规定按钮是否最小
data-shadow="/true/false" 按钮是否有阴影
6. jqmobile按钮图标 添加 data-icon="”
data-icon="arrow-l" 左箭头
data-icon="arrow-r" 右箭头
data-icon="delete" 删除
data-icon="info" 信息
data-icon="home" 首页
data-icon="back" 后退
data-icon="search" 搜索
data-icon="grid" 网格
代码:
<a href="#anylink" data-role="button" data-icon="arrow-l">Search</a>
7. 图标定位 添加data-iconpos=""/顶部(top)、右侧(right)、底部(bottom)、左侧(left)。
代码:
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>
8. 只显示图标添加data-iconpos="notext"
代码:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
jQuery Mobile 工具栏
下面的代码,将添加一个按钮到头部标题文本的左侧,添加一个按钮到头部标题文本的右侧
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button">搜索</a>
</div>
下面的代码,将添加一个按钮到头部标题文本的左侧:
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>欢迎来到我的主页</h1>
</div>
如果您把按钮链接放置在 <h1> 元素之后,将无法显示右侧的文本。要添加一个按钮到头部标题的右侧,请指定 class 为 "ui-btn-right":
<div data-role="header">
<h1>欢迎来到我的主页</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
皓轩的jquery mobile之路(二)的更多相关文章
- jQuery插件之路(二)——轮播
还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了 ...
- Jquery学习之路(二) 实现table样式的设定
上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...
- 18个jQuery Mobile开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- (二)Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- 小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架
一.单容器页面结构 <!DOCTYPE html> <html> <head> <title>Jquery mobile 基本页面框架</titl ...
- 小强的HTML5移动开发之路(23)—— jQuery Mobile入门
一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入d ...
- jQuery Mobile学习日记(二)
首先依HTML5方式加载,DOCTYPE表示格式为HTML5:主要适用于iPhone.Android等,viewport表示适用于移动终端的适中显示,initial-scale缩放比例在1.0~1.3 ...
- jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
随机推荐
- Storm官方文档翻译之创建Storm项目
本文将讲述如何在开发环境创建一个Storm项目,下面是步骤: 1.将Storm的相关jar包添加到classpath中: 2.如果使用多语言开发,也要将多语言目录添加到classpath; 点击sto ...
- log4cxx 使用代码进行配置
(1)官网的一个例子 #include <log4cxx/logger.h> #include <log4cxx/helpers/pool.h> #include <lo ...
- C++中为什么构造函数初始化列表
已经有个构造函数负责初始化,为什么还需要构造函数初始化表呢? 在以下三种情况下需要使用初始化成员列表:一,需要初始化的数据成员是对象的情况:二,需要初始化const修饰的类成员:三,需要初始化引用成员 ...
- Entity Framework 学习中级篇2—存储过程(上)
目前,EF对存储过程的支持并不完善.存在以下问题: l EF不支持存储过程返回多表联合查询的结果集. l EF仅支持返回返回某个表的全部字段,以便转换成对应的实体.无法 ...
- white-space详解
white-space共有5种属性normal,nowrap,pre,pre-wrap,pre-line 网上的解释多半过于详细冗长,先做个简化处理,以便查询 normal 忽略空白 过长换行 ...
- 2.1 实践篇:使用ping来检测网速
1. Windows功能键+R ,打开cmd窗口 2. ping -n 200 www.baidu.com #ping网站www.baidu.com ,连续200次.验证连接. 可以ctrl+C 强制 ...
- 拓扑排序<反向拓扑+有向环的判断>
题目链接 #include <set> #include <map> #include <cmath> #include <queue> #includ ...
- ==与equals()方法的不同
==比较分为两种情况:基本数据类型比较与引用数据类型比较 1.基本数据类型,根据基本数据类型的值是否相等来判断,相等则返回true,不相等则返回false.两端数据类型可以不同,如果转换后的数值相等, ...
- 对比React Native、dcloud、LuaView三个框架技术(内部)
转载自:http://www.jianshu.com/p/ee1cdb33db8d主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开发 ...
- publish over ssh
http://stackoverflow.com/questions/22158092/jenkins-transferring-0-files-using-publish-over-ssh-plug ...