第一章

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. java 打包jar文件以在没有安装JDK或JRE的机子上运行

    前言: java号称“一次编译,到处运行”,但这有个前提,那就是你的机子上得安装java环境.对于开发人员或其他一些比较懂计算机的人来说这没什么,但是对于一些不懂计算机的人来说这会很麻烦,他们更希望的 ...

  2. 斯坦福大学CS224d基础1：线性代数回顾

    转自 http://blog.csdn.net/han_xiaoyang/article/details/51629242 斯坦福大学CS224d基础1:线性代数知识 作者:Zico Kolter ( ...

  3. ls -alrth 及ls 详解

    idcdpi  抓包过程中 用了命令  ls   - alrth :命令,所以回头重新学习 ls命令 linux ls和 ll 命令 标签: linuxsocketssolarisbash出版扩展 2 ...

  4. [COJ0989]WZJ的数据结构（负十一）

    [COJ0989]WZJ的数据结构(负十一) 试题描述 给出以下定义: 1.若子序列[L,R]的极差(最大值-最小值)<=M,则子序列[L,R]为一个均匀序列. 2.均匀序列[L,R]的权值为S ...

  5. 他们在军训，我在搞 OI（二）

    Day 2 7:26 2016/8/25 新的一天又开始了! 走在上学的路上,抬头看看北京少有的蓝天,太阳的威力不再那么明显,甚至输给了挡住它的云朵.迎面吹来了凉爽的风,夏天的燥热,早已无影无踪. 许 ...

  6. PHP无限极分类实现

    简单版的PHP生成无限极分类代码.其中包括了数据库设计.以及输出分类HTML代码. SQL代码 CREATE TABLE `district` ( `id` int(10) unsigned NOT ...

  7. HDU 1713 最小公倍数与最大公约数的问题 相遇周期

    欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) 相遇周期 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/ ...

  8. hdu4255筛素数+广搜

    Mr. B has recently discovered the grid named "spiral grid".Construct the grid like the fol ...

  9. Linux SUID SGID 讲解

    SUID属性 UNIX的内核是根据什么来确定一个进程对资源的访问权限的呢? 是这个进程的运行用户的(有效)ID,包括user id和group id.用户可以用id命令来查到自己的或其他用户的user ...

  10. python 异步线程简单实现

    import threading def foo(): with open(r'./result.log','wb') as f: f.write('=some logs here ==') t = ...