第一章

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. std::shared_ptr

    在std::shared_ptr被引入之前,C++标准库中实现的用于管理资源的智能指针只有std::auto_ptr一个而已.std::auto_ptr的作用非常有限,因为它存在被管理资源的所有权转移 ...

  2. thinkphp空控制器的处理

    <?php namespace Admin\Controller; use Think\Controller; class DengLuController extends Controller ...

  3. eq相等 ne、neq不相等， gt大于， lt小于 gte、ge大于等于 lte、le 小于等于 not非 mod求模 等

    eq相等   ne.neq不相等,   gt大于, lt小于 gte.ge大于等于   lte.le 小于等于   not非   mod求模   is [not] div by是否能被某数整除   i ...

  4. linux 下安装开发组件包

    最初安装redhat 时, 系统自己装的,只安装了base 包,在开发过程中,需要不停的安装某个需求包,   图省事,安装光盘下的开发组件包: 在安装光盘下,,,用命令: yum grouplist ...

  5. linux c程序中获取shell脚本输出的实现方法

    linux c程序中获取shell脚本输出的实现方法 1. 前言Unix界有一句名言:“一行shell脚本胜过万行C程序”,虽然这句话有些夸张,但不可否认的是,借助脚本确实能够极大的简化一些编程工作. ...

  6. C#中的volatile用法

    volatile 影响编译器编译的结果,指出,volatile 变量是随时可能发生变化的,与volatile变量有关的运算,不要进行编译优化,以免出错,(VC++ 在产生release版可执行码时会进 ...

  7. linux下Nginx服务器安装教程

    序:Nginx服务器安装总结而已,不是教程. 安装的过程中出现了一些问题,原因我的云主机是纯净版,所以很多依赖包都没有.其中安装过程中就发现perl库缺少和openssl库缺少,因此我手动安装的这两款 ...

  8. TableInputFormat分片及分片数据读取源码级分析

    我们在MapReduce中TextInputFormat分片和读取分片数据源码级分析 这篇中以TextInputFormat为例讲解了InputFormat的分片过程以及RecordReader读取分 ...

  9. BI就是报表？

    实际上,报表只是BI的一部分,虽然BI应用的结果通常需要通过报表来展示,但是,BI绝对不仅仅是报表.其实,大家对这些概念的理解,如同15年前的ERP一样.1998年,国内两大巨头金蝶与用友都开始宣称从 ...

  10. detours安装和使用

    http://blog.csdn.net/evi10r/article/details/6659354 http://blog.csdn.net/donglinshengan/article/deta ...