1、安装

在<head></head>标签里边写入以下内容
jQuery Mobile CDN：
 <head>

     <meta charset="utf-8">

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 </head>

下载的jQuery Mobile【下载地址：http://jquerymobile.com/download/ 】

 <head>

     <link rel=stylesheet href=jquery.mobile-1.3.2.css>

     <script src=jquery.js></script>

     <script src=jquery.mobile-1.3.2.js></script>

 </head>

2、页面

因为在<div></div>标签中已经区分了页面，所以可以在一个单独的html文件中创建多个页面了，通过唯一的id来分割每张页面，并用href属性来链接彼此。
 data-role="page" 是显示在浏览器中的页面

 data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）

 data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等

 data-role="footer" 创建页面底部的工具栏
3、过渡
过渡效果可以设置页面之间切换的效果，新版本的浏览器可能支持3D转换效果
使用方式如下：
即在<a></a>标签里面添加一个data-transition属性即可
<a href="#anylink" data-transition="slide">滑动到页面二</a>
 
注：以上所有的效果同时支持反向动作，需要的添加     data-direction="reverse"     属性即可
4、按钮
创建按钮的方法有以下几种：
<button>按钮</button>
<input type="button" value="按钮">
<a href="#" data-role="button">按钮</a>
 
按钮的分类：
  • 导航按钮
    • 默认显示的按钮，占据屏幕的整个宽度
  • 行内按钮
    • 添加属性data-inline="true"即可
  • 组合按钮
    • 添加属性data-role="controlgroup" 与属性 data-type="horizontal|vertical"即可
  • 后退按钮
    • 添加属性data-rel="back"
提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。
默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"：
其他属性：
【更多属性见：http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp】
5、图标
如需向您的按钮添加图标，请使用 data-icon 属性：
下面我们已列出 jQuery Mobile 提供的所有可用图标：
图标位置：
通过data-iconpos属性可以设置图标的位置，图标的默认位置是图标靠左显示的：
data-iconpos="top|right|bottom|left"
 
只显示图标

如果只需显示图标，设置属性"data-iconpos=notext"即可
 
6、工具栏
  • 标题栏
    • 页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）
    • 如果只设置一个按钮的话，按钮是不会显示在标题的右侧，要想显示在标题的的右侧，之需要设置class="ui-btn-right"属性即可
  • 页脚栏
    • 页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请设置属性class="ui-btn"即可
    • 也可以在页脚中选择是水平还是垂直的组合按钮
  • 定位页眉和页脚
    • 放置页眉和页脚的方式有三种：
      • Inline - 默认。页眉和页脚与页面内容位于行内。
      • Fixed - 页面和页脚会留在页面顶部和底部。
      • Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through
    • 请使用 data-position 属性来定位页眉和页脚：
7、导航栏
导航默认的链接会自动转换为按钮
 <div data-role="header">

   <div data-role="navbar">

     <ul>

       <li><a href="#anylink">首页</a></li>

       <li><a href="#anylink">页面二</a></li>

       <li><a href="#anylink">搜索</a></li>

     </ul>

   </div>

 </div>
8、可折叠
  • 可折叠的内容块
    • 你如果想创建可折叠的内容块，你需要向某个容器中设置data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：
      •  <div data-role="collapsible">
        
   <h1>点击我 - 我可以折叠！</h1>
        
   <p>我是可折叠的内容。</p>
        
 </div>
    • 默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：
  • 嵌套的可折叠块
    • 折叠内容块可根据自己的需要任意嵌套
  • 可折叠集合
    • 可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。
    • 创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：
    •  <div data-role="collapsible-set">
      
   <div data-role="collapsible">
      
     <h1>点击我 - 我可以折叠！</h1>
      
     <p>我是被展开的内容。</p>
      
   </div>
      
   <div data-role="collapsible">
      
     <h1>点击我 - 我可以折叠！</h1>
      
     <p>我是被展开的内容。</p>
      
   </div>
      
 </div>
 
 

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.页面: <body> <div data-role="page"> <div data-role="header"&g ...

  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. 2014第11周四Eclipse开发问题记

    今天开发中eclipse工具使用上又学到几点: 1.去除代码空行:在Find输入框中输入:^\s*\n然后替换为空即可: 2.eclipse插件的加载:对于单一个jar文件的插件,直接放在plugin ...

  2. iOS多线程总结（一）NSThread

    多线程,简而言之,就是提供代码的多个执行路径,对于App性能和用户体验都有着至关重要的意义.在iOS开发中,Apple提供了不同的技术支持多线程编程,主要有NSThread.NSOperationQu ...

  3. poj3100---求根问题

    题意:a的n方=b,a这个整数与b开n方的值相近,分别向上取整和向下取整,同时n方,b一定介于这两个整数之间,然后比较这两个数与b的距离,取最近的 收获:c++的cei和floor函数在c中的向上取整 ...

  4. Linux学习十七、正规表达式练习题

    情境模拟题一:透过 grep 搜寻特殊字串,并配合数据流重导向来处理大量的文件搜寻问题. 目标:正确的使用正规表示法: 前提:需要了解数据流重导向,以及透过子命令 $(command) 来处理档名的搜 ...

  5. fragment详解（官方文档）

    原作者为: 苍山.感谢他分享的内容,现在分享出来给eoeAndroid的各位同胞. 详情参考http://www.eoeandroid.com/thread-71642-1-1.html和http:/ ...

  6. SPRING 配置文件和类名

    今天写项目碰到一个很奇怪的问题,无论怎么改,还是一直包空指针 最终的问题出现在spring配置文件

  7. U3D学习使用笔记(四)

    1.Unity3D项目实战笔记(5):延时功能的几种实现 http://www.xifarm.com/invoke/ 2.动画运行出屏幕范围时消失 Animation CullingType 3.No ...

  8. jQuery treeview的简单用法

    最近的项目要用到treeview插件,刚好就自己整理一下这方面的资料. 1.文档树示例 最简单的一个例子就是文档树的实现.效果如下图所示. 在使用treeview之前,html文档中需要包含几个jqu ...

  9. Matlab插值计算各时刻磁法勘探日变观测值

    Matlab插值计算各时刻磁法勘探日变观测值 在磁法勘探中,消日变影响的改正称为日变改正.进行日变改正时必须设立日变站,观测日变情况.根据日变数据和测点观测时间,对观测数据进行改正. 在本次磁法实习中 ...

  10. cocos2d-x -------之笔记篇 动画的实现

    cocos2d-x 动画的实现 一.实现原理 动画的实现其实就是使用一个完整的动作图片集来实现动画,达到动态的效果 动画动作类(CCAnimate)是加载一个动画类来实现动作. 动画类(CCAnima ...