第一章

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. dll劫持技术

    DLL劫持技术当一个可执行文件运行时,Windows加载器将可执行模块映射到进程的地址空间中,加载器分析可执行模块的输入表,并设法找出任何需要的DLL,并将它们映射到进程的地址空间中. DLL劫持原理 ...

  2. 你无法修改 Git 的历史记录

    转自:http://www.oschina.net/news/26241/you-can-not-change-git-history 有时候使用Git工作得小心翼翼,特别是涉及到一些高级操作,例如 ...

  3. 理解javascript中的策略模式

    理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...

  4. IE下的haslayout特性

    什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织 ...

  5. [Android教程]EditText怎样限制用户的输入?数字/字母/邮箱

    有输入必有验证.为了防止用户随便输入确保提交数据的合法性,程序不得不在文本输入框(EditText)中增加限制或验证. 关于输入类型有数字.字母.邮箱.电话等形式,这些具体得根据业务来.那么Andro ...

  6. 不同版本的name可以重复

    - validates :name, presence: true, uniqueness: { conditions: -> { where(:state.ne => 2) } }, l ...

  7. django程序报错CSRF verification failed. Request aborted.

    django程序的html页面中form的method='post'的时候报错 Forbidden (403) CSRF verification failed. Request aborted.He ...

  8. [BZOJ1220][POJ1091][HNOI2002]跳蚤

    [BZOJ1220][POJ1091][HNOI2002]跳蚤 试题描述 Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长. ...

  9. ASP注入靶机

     ASP:   <%  Dim Db,MyDbPath dim conn '可修改设置一:========================定义数据库类别,1为SQL数据库,0为Access数据库 ...

  10. Coursera台大机器学习课程笔记13 -- Regularization

    这一节讲的是正则化,在优化中一直会用到正则化项,上课的时候老师一句话代过,没有作过多的解释.听完这节课后, 才明白好大学和野鸡大学的区别有多大.总之,这是很有收获的一节课. 首先介绍了为什么要正则化, ...