第一章

1、页面：

<body>

<div data-role="page">

  <div data-role="header">

    <h1>欢迎来到我的主页</h1>

  </div>

  <div data-role="content">

    <p>我现在是一个移动端开发者!!</p>
    <a href="#anylink" data-transition="slide">切换到第二个页面</a>

  </div>

  <div data-role="footer">

    <h1>底部文本</h1>
　　<a href="#pagetwo" data-rel="dialog">Go to Page Two</a>

  </div>

</div>

</body>
  • data-role="page" 是在浏览器中显示的页面。
  • data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
  • data-role="content" 定义了页面的内容，比如文本， 图片，表单，按钮等。
  • data-role="footer" 用于创建页面底部工具条。
  • data-rel="dialog"  内定标识以对话框形式出现这个页面。
  • data-transition 链接切换方式。
  • 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
fade 默认。淡入到下一页

flip    从后向前翻转到下一页

flow    抛出当前页，进入下一页

pop    像弹出窗口一样进入下一页

slide    从右到左滑动到下一页

slidefade    从右到左滑动并淡入到下一页

slideup    从下到上滑动到下一页    尝试一下

slidedown    从上到下滑动到下一页

turn    翻到下一页

none    没有切换效果

2、按钮：

在 jQuery Mobile 中，按钮可通过三种方式创建：

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用带有 data-role="button" 的 <a> 元素
<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>

备注：默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"：

<div data-role="controlgroup" data-type="horizontal">

<a href="#anylink" data-role="button">按钮 1</a>

<a href="#anylink" data-role="button">按钮 2</a>

<a href="#anylink" data-role="button">按钮 3</a>

</div>

备注：请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮

<a href="#" data-role="button" data-rel="back">返回</a>

如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）

按钮的 data-* 属性

data-corners    true | false    规定按钮是否圆角

data-mini       true | false    规定按钮是否更小

data-shadow     true | false    规定按钮是否有阴影

按钮图标：

<a href="#anylink" data-role="button" data-icon="search"  class="ui-btn-right">Search</a>

备注：

1>、如需添加图标到您的按钮，请使用 data-icon 属性；

2>、如果只想显示图标，请设置 data-iconpos 为 "notext"；

3>、要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn-right"：

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"    网格

3、工具栏：

<div data-role="footer" class="ui-btn">

<div data-role="controlgroup" data-type="horizontal">

<a href="#" data-role="button" data-icon="plus">在Facebook上关注我</a>

<a href="#" data-role="button" data-icon="plus">在Twitter上关注我</a>

<a href="#" data-role="button" data-icon="plus">在Instagram上关注我</a>

</div>

</div>

备注：尾部的样式与头部不同（没有内边距和空间，且按钮不居中）。为了解决这个问题，请把 "ui-btn" 放置在尾部的 class 上；

头部和尾部可以通过三种方式进行定位：

  • Inline - 默认。头部栏和尾部栏与页面内容内联。
  • Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
  • Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。
<div data-role="footer" data-position="inline"></div>

<div data-role="footer" data-position="fixed"></div>

<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

页面导航

<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li>

<li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>

<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>

备注1：

当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。

如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：

备注2：
对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：

jQuery Mobile 基础的更多相关文章

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

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

  2. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  3. jQuery Mobile 基础(第四章）

    1.主题 jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮,工具条,内容块等等颜色都不一致,每个主题的视觉效 ...

  4. jQuery Mobile 基础(第三章)

    1.表单: 表单控件: 文本输入框 搜索输入框 单选按钮 复选框 选择菜单 滑动条 翻转拨动开关 fileld容器:如需让标签和表单元素看起来更适应宽屏,请用带有 data-role="fi ...

  5. jQuery Mobile 基础(第二章）

    1.可折叠块: <div data-role="collapsible"> <h1>点击我 - 我可以折叠!</h1> <p>我是可 ...

  6. jQuery Mobile基础

    1.安装 在<head></head>标签里边写入以下内容 jQuery Mobile CDN: <head> <meta charset="utf ...

  7. 18个jQuery Mobile开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...

  8. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  9. Android+Jquery Mobile学习系列(3)-创建Android项目

    前两章分别对开发环境和Jquery Mobile基础知识进行了介绍,本章介绍创建一个Android项目,并使用WebView控件显示HTML数据. 首先创建一个Android Application项 ...

随机推荐

  1. The Joys of Conjugate Priors

    The Joys of Conjugate Priors (Warning: this post is a bit technical.) Suppose you are a Bayesian rea ...

  2. pthread_rwlock

    读写锁   1.概述 读写锁与互斥量类似,不过读写锁允许更高的并行性.互斥量要么是锁住状态,要么是不加锁状态,而且一次只有一个线程对其加锁.读写锁可以有三种状态:读模式下加锁状态,写模式下加锁状态,不 ...

  3. php 非缓冲查询

    最近在开发一个PHP程序时遇到了下面的错误: PHP Fatal error: Allowed memory size of 268 435 456 bytes exhausted 错误信息显示允许的 ...

  4. Google搜索命令语法大全

    以下是目前所有的Google搜索命令语法,它不同于Google的帮助文档,因为这里介绍 了几个Google不推荐使用的命令语法.大多数的Google搜索命令语法有它特有的使用格式,希望大家能正确使用. ...

  5. IMEI是什么？ 怎样查手机串号IMEI

    IMEI的基本含义 IMEI(International Mobile Equipment Identity,移动设备国际识别码,又称为国际移动设备标识)是手机的唯一识别号码.我们从这个缩写的全称中来 ...

  6. Asp.net面试题

    Asp.net核心技术思想 1.概述反射和序列化 反射:程序集包含模块,而模块包含类型,类型又包含成员.反射则提供了封装程序集.模块和类型的对象.您可以使用反射动态地创建类型的实例,将类型绑定到现有对 ...

  7. Altera的几个常用的Synthesis attributes

    各厂商综合工具,对HDL综合时都定义了一些综合属性这些属性可指定a declaration,a module item,a statement, or a port connection 不同的综合方 ...

  8. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

  9. iPod怎么下载歌曲?用iTunes传文件功能!

    昨儿一小美女拿我的手机听歌,说她不知道iPod怎么下载歌曲,因为还在上学家里不肯给买智能机,怕会影响学业.她的iPod shuffle刚买没多久还不会往里传歌曲,让我帮看看怎么整,心想她应该是没装iT ...

  10. win8.1禁用和去除SkyDrive任务栏图标方法

    Win+R打开运行,输入gpedit.msc确定,打开本地组策略编辑器. 依次定位到:计算机配置-管理模板-Windows组件-OneDrive,双击阻止使用 OneDrive 执行文件储存.