第一章

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. struts2基本配置

    struts.xml 放在src目录下 <?xml version="1.0" encoding="UTF-8"?> <struts> ...

  2. webexam项目杂记2

    strstr,stristr是返回匹配到的字符串,常规的字符串操作尽量避免使用正则, strstr是返回从匹配字符(串)开始(包括该匹配字符串)到结束的(或开头的)字符串 而如果仅仅只是判断是否包含匹 ...

  3. 菜鸟学习Spring Web MVC之二

    有文章从结构上详细讲解了Spring Web MVC,我个菜鸟就不引据来讲了.说说强悍的XP环境如何配置运行环境~~ 最后我配好的环境Tomcat.Spring Tool Suites.Maven目前 ...

  4. Aptana插件安装到eclipse和myeclipse的详细过程

    刚开始学习Jquery,为了搭建好的环境是很重要的,所以我尝试了很多方式,下面之一. 一.要下载好Aptana 插件 官网: http://update1.aptana.org/studio/3.2/ ...

  5. win7安装apache或者php 5.7缺少vcruntime140.dll的问题

    1.确定win7 系统是否是win7 sp1 版本.因为Visual C++ Redistributable for Visual Studio 2015 需要win7的sp1包的支持才能安装成功! ...

  6. poj3041 二分图最小顶点覆盖

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17237   td>Accepted: 9375 ...

  7. MYSQL随机抽取查询 MySQL Order By Rand()效率问题

    MYSQL随机抽取查询:MySQL Order By Rand()效率问题一直是开发人员的常见问题,俺们不是DBA,没有那么牛B,所只能慢慢研究咯,最近由于项目问题,需要大概研究了一下MYSQL的随机 ...

  8. 【Hibernate】Hibernate系列8之管理session

    管理session 更简单的,注入对象:

  9. C语言指针总结

    C语言中的精华是什么,答曰指针,这也是C语言中唯一的难点. C是对底层操作非常方便的语言,而底层操作中用到最多的就是指针,以后从事嵌入式开发的朋友们,指针将陪伴我们终身. 本文将从八个常见的方面来透视 ...

  10. Longest Consecutive Sequence

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. C ...