2二、（转载）jQueryMobile 知识点总结

时间 2019-11-18

原文原文链接

本文转自：http://www.cnblogs.com/jxyedu

HTML5技术生态介绍

H5的现状与将来

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，如今仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特色：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它但愿可以减小浏览器对于须要插件的丰富性网络应用服务javascript

开发中选择html5理由

兼容性老版本的浏览器上也能够运行 (将来的标准)
实用性，简化了标签，细分了功能，增长了移动互联网元素
革命性，HTML再也不是简单的标签语言，增长了API、渲染等

html5有哪些特色

本地存储，离线应用
API调用，地图，位置，LBS等
链接通信，WebSocket
多媒体技术
三维、图形, canvas技术
CSS3 + JavaScript支持

Web App, Native APP,Hybird App介绍 (重要)

Web App 介绍

这个主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发. 用户无需下载，经过不一样平台的浏览器访问来实现跨平台，同时能够经过浏览器支持充分使用HTML5特性，缺点是这些基于浏览器的应用没法调用系统API来实现一些高级功能，也不适合高性能要求的场合css

Native APP介绍

就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用.使用它们的优势是能够彻底利用系统的API和平台特性，在性能上也是最好的。缺点是因为开发技术不一样，若是你要覆盖多个平台，则要针对每一个平台独立开发,无跨平台特性html

Hybird App介绍

则是为了弥补如上二者开发模式的缺陷的产物.分别继承双方的优点.首先它让为数众多的web开发人员能够几乎零成本的转型成移动应用开发者.其次,相同的代码只需针对不一样平台进行编译就能实如今多平台的分发,大大提升了多平台开发的效率；而相较于web App，开发者能够经过包装好的接口,调用大部分经常使用的系统API。PhoneGap正是Hybird APP的表明开发框架html5

移动开发所面临的问题

从应用开发的角度来讲，一样的程序逻辑却不得不在多个平台上使用不一样的语言和API 重复编码.
从代码维护的角度来讲，针对同一个项目须要同时维护多份代码，一旦程序逻辑发生变化，将致使大规模的代码修改与回归测试
从经济角度来讲，要同时开发和维护多个平台的应用程序，将花费企业巨大的人力和时间成本

Html5 移动应用软件开发框架

JqueryMobile介绍

jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile 不只会给主流移动平台带来jQuery核心库，并且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。此框架简单易用。页面开发主要使用标记，无需或仅需不多 JavaScript. 此框架简单易用。页面开发主要使用标记，无需或仅需不多 JavaScriptjava

为何要学 jQuery Mobile

为了建立 UI 部件，你只须要编写 HTML 便可，JM 为了对这些 HTML 元素进行修饰
可方便的重用已有的 HTML 代码
一些简单的应用直接用 HTML 便可实现，无需 JavaScript
JM 具备相对小的对象模型，能够快速轻松学习，特别是他是一个 jQuery 的插件
JM 对代码没有特定的要求，这多是很是灵活的，但维护难度也加大
易于和其余框架进行集利于PhoneGap
不依赖某个特定的供应商

PhoneGap介绍

在多厂商的利益竞争下，当前的智能终端平台呈现出了“百家争鸣”的现象。当前的移动终端系统呈现出较为零散的割据状态，其中, Nokia 主推的 Symbian、Apple 的iOS、和 Google 的 Android，分别占据了较大的市场份额。然而，因为当前主流的移动平台之间互不兼容，针对不一样的移动平台系统，当前并无能够兼容的应用开发接口和语言；当前，使用 C/C++ 的 Symbian、使用 Object C 的iOS和使用 Java 的 Android 应用开发技术，几乎是彻底没法融合的jquery

为何要学 Phonegap

开发成本低
对各大主流平台的兼容性很是好
采用W3C标准化技术
可以快速进行开发,迭代更新容易
轻量级和插件式架构显著下降了维护成本
开源免费，并由Adobe公司和Apache基金会共同支持

开发环境搭建

资源文件介绍web

<link href="jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>

基本的代码结构chrome

 1  <div data-role="page" id="page">
 2     <div data-role="header">
 3         <h1>第 1 页</h1>
 4     </div>
 5     <div data-role="content">    
 6         <ul data-role="listview">
 7             <li><a href="#page2">第 2 页</a></li>
 8             <li><a href="#page3">第 3 页</a></li>
 9             <li><a href="Untitled-2.html">第 4 页</a></li>
10         </ul>        
11     </div>
12     <div data-role="footer">
13         <h4>页面脚注</h4>
14     </div>
15 </div>

代码解释

data-role="page" 是显示在浏览器中的页面
data-role="header" 建立页面上方的工具栏（经常使用于标题和搜索按钮）
data-role="content" 定义页面的内容，好比文本、图像、表单和按钮，等等
data-role="footer" 建立页面底部的工具栏

本身构建jQuery Mobile开发环境

下载官方的资源

http://jquerymobile.com/
建议使用比较成熟的1.3.2功能
Copy-and-Paste snippet for jQuery CDN hosted files

1 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
2  
3 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
4 
5  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

个人第一个jQuery Mobile的案例

<div data-role="page">
        <div data-role="header">
            <h1>欢迎来到Jquery Mobile世界</h1>
        </div>
        <div data-role="content">
            <p>欢迎,这里是正文内容</p>
        </div>
        <div data-role="footer">
            <h1>页脚文本</h1>
        </div>
</div>

按钮、图标

jQuery Mobile 中建立按钮

可经过三种方法建立

使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素

 <button>button 按钮</button>
 <input type="submit" value="input 按钮" />
 <a href="#page2" data-role="button">a 标签按钮</a>

总结: jQuery Mobile 中的按钮会自动得到样式，这加强了他们在移动设备上的交互性和可用性。咱们推荐您使用 data-role="button" 的 <a> 元素来建立页面之间的连接，而 <input> 或 <button> 元素用于表单提交数据库

按钮的基本属性

默认状况下，按钮会占据屏幕的所有宽度。若是您须要按钮适应其内容，或者若是您须要两个或多个按钮并排显示，请添加 data-inline="true"canvas

<a href="#" data-inline="true" data-role="button">行内</a>

规定按钮是否有阴影 data-shadow="false|true", 按钮是否有圆角 data-corners="false|true"

1 <a href="#" data-inline="true" data-shadow="true" data-corners="true" data-role="button">行内,阴影,圆角</a>
2 <a href="#" data-inline="true" data-shadow="false" data-corners="false" data-role="button">行内,无阴影正角</a>

如需建立后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）data-rel="back"

 <!-- 默认返回到上一页,它会忽略href属性 -->
 <a href="http://www.hao123.com" data-role="button" data-rel="back">返回</a>

按钮的主题颜色. data-theme: letter (a-z)

1 <div data-role="header" data-theme="b">
2     <h1>第 1 页</h1>
3 </div>

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用

1 <!-- 默认第一个和最后一个有圆角,默认状况每一个组件都有本身的主题 -->
2 <div data-role="controlgroup" data-type="horizontal">
3     <a href="#" data-role="button" data-theme="a">首页</a>
4     <a href="#" data-role="button" data-theme="b">介绍</a>
5     <a href="#" data-role="button" data-theme="c">联系</a>
6 </div>

jQuery Mobile 中建立图标

常见的可用图标: data-icon属性

  <a href="#" data-inline="true" data-role="button" data-icon="arrow-u">上</a>
  <a href="#" data-inline="true" data-role="button" data-icon="arrow-d">下</a>
  <a href="#" data-inline="true" data-role="button" data-icon="arrow-l">左</a>
  <a href="#" data-inline="true" data-role="button" data-icon="arrow-r">右</a>

定位图标: 请使用 data-iconpos 属性来规定位置

1 <a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
2 <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
3 <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
4 <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>

1  <a href="#" data-inline="true" data-role="button" data-icon="arrow-u" data-iconpos="top">上</a>
2  <a href="#" data-inline="true" data-role="button" data-icon="arrow-d" data-iconpos="bottom">下</a>
3  <a href="#" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="left">左</a>
4  <a href="#" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="right">右</a>

注意: 若是只需显示图标，请将 data-iconpos 设置为 "notext"

 <a href="#" data-inline="true" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
 <a href="#" data-inline="true" data-role="button" data-icon="home" data-iconpos="notext">主页</a>
 <a href="#" data-inline="true" data-role="button" data-icon="info" data-iconpos="notext">消息</a>

列表

jQuery Mobile 列表视图

有序列表、无序列表

如需建立列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每一个列表项（<li>）中规定连接

建立有序列表(如需为列表添加圆角和外边距，请使用 data-inset="true" 属性)

1  <ol data-role="listview" data-inset="true">
2     <li><a href="#">列表项</a></li>
3     <li><a href="#">列表项</a></li>
4  </ol>

建立无序列表(如需为列表添加圆角和外边距，请使用 data-inset="true" 属性)

 <ul data-role="listview" data-inset="true">
    <li><a href="#">列表项</a></li>
    <li><a href="#">列表项</a></li>
 </ul>

提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）

列表分隔符

列表分隔符（List Dividers）用于把项目组织和组合为分类/节, 如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性

 <ol data-role="listview" data-inset="true">
    <li data-role="list-divider">广东</li>
    <li><a href="#">广州</a></li>
    <li><a href="#">深圳</a></li>
 </ol>

给列表添加搜索框功能: data-filter="true"

 <ol data-role="listview" data-filter="true" data-filter-placeholder="请输入姓名" data-inset="true">
     <li data-role="list-divider">广东</li>
      <li><a href="#">广州</a></li>
     <li><a href="#">深圳</a></li>
     <li><a href="#">珠海</a></li>
 </ol>

jQuery Mobile 列表内容

列表缩略图

对于大于 16x16px 的图像，请在连接中添加 <img> 元素, jQuery Mobile 将自动把图像调整至 80x80px

 <ul data-role="listview">
   <li>
     <a href="#">
     <img src="images/chrome.png">
     <h2>Google Chrome</h2>
     <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。
</p>
     </a>
   </li>
 </ul>

计数泡沫:请使用行内元素，好比 <span>设置 class "ui-li-count" 属性并添加数字

 <div data-role="content">
     <h2>个人邮箱</h2>
     <ul data-role="listview" data-inset="true">
       <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
       <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
       <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
     </ul>
   </div>

表单

效果图以下：

常见的表单控件类型

文本框
搜索框
单选框
复选框
选择菜单
滑动条
翻转切换开关

建立表单注意事项

<form> 元素必须设置 method 和 action 属性
每一个表单元素必须设置惟一的 "id" 属性。该 id 在站点的页面中必须是惟一的
每一个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id

基本的表单格式

div data-role="content">
       <form method="post" action="#">
            <!-- 容器,可选 -->
            <div data-role="fieldcontain">
                <!-- 能够隐藏label属性 -->
                <label for="name" class="ui-hidden-accessible">姓名:</label>
                <input type="text" id="name" placeholder="姓名.." />
                <button type="submit" data-inline="true">提交</button>
            </div>
       </form>
   </div>

搜索框的实现

 <div data-role="content">
     <form method="post" action="demoform.asp">
       <div data-role="fieldcontain">
         <label for="search">搜索：</label>
         <input type="search" name="search" id="search" placeholder="搜索内容...">
       </div>
       <input type="submit" data-inline="true" value="提交">
     </form> 
   </div>

表单综合案例

 1 <form method="post" action="#">
 2         <div data-role="fieldcontain">
 3             <label for="name">姓名:</label>
 4             <input type="text" id="name" name="name" placeholder="姓名" />
 5        
 6             <label for="like">介绍:</label>
 7             <textarea id="like" placeholder="请输入介绍.........."></textarea>
 8           
 9             <label for="search">搜索:</label>
10             <input type="search" name="search" id="search" />
11             
12             <legend>Choose your like:</legend>
13            <select data-inline="true" name="day" id="day">
14                     <option value="" selected>请选择日期.....</option>
15                     <option value="mon">星期一</option>
16                     <option value="tue">星期二</option>
17                     <option value="wed">星期三</option>
18             </select>
19             
20             <fieldset data-role="controlgroup" data-type="horizontal">
21                  <legend>Choose your gender:</legend>
22                 <label for="boy">boy:</label>
23                 <input type="radio" id="boy" name="sex" value="boy">
24                 <label for="gril">gril:</label>
25                 <input type="radio" checked id="gril" name="sex" value="girl">
26             </fieldset>
27             <fieldset data-role="controlgroup" data-type="horizontal">
28                 <legend>Choose your like:</legend>
29                 <label for="book">book:</label>
30                 <input type="checkbox" id="book" name="sex" value="book">
31                 <label for="sleep">sleep:</label>
32                 <input type="checkbox" id="sleep" name="sex" value="sleep">
33             </fieldset>
34             <label for="points">Points:</label>
35             <input type="range" name="points" id="points" value="50" min="0" max="100">
36             
37             <label for="switch">开关:</label>
38             <select id="switch" data-role="slider">
39                 <option value="on" selected>on</option>
40                 <option value="off">off</option>
41             </select>
42         </div>
43         <button data-icon="search" data-inline="true" data-iconpos="right">提交</button>
44 </form>

导航栏和工具栏

jQuery Mobile 导航栏

使用 data-role="navbar" 属性来定义导航栏

导航栏由一组水平排列的连接构成，一般位于页眉或页脚内部。默认地，导航栏中的连接会自动转换为按钮（无需 data-role="button"）。请使用 data-role="navbar" 属性来定义导航栏：

 1 <div data-role="header">
 2     <!-- 五个按钮内,默认平分.若是有图标默认在文字正上方 -->
 3     <div data-role="navbar">
 4         <ul>
 5             <li><a href="#" data-icon="home">首页</a></li>
 6             <li><a href="#" data-icon="search">搜索</a></li>
 7             <li><a href="#" data-icon="back">返回</a></li>
 8         </ul>
 9     </div>
10 </div>

提示:按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，若是您在导航栏中规定了五个以上的按钮，那么它会弯折为多行

页脚中的导航栏

1 <div data-role="navbar">
2       <ul>
3         <li><a href="#" data-icon="plus">更多</a></li>
4         <li><a href="#" data-icon="minus">更少</a></li>
5         <li><a href="#" data-icon="delete">删除</a></li>
6         <li><a href="#" data-icon="check">喜好</a></li>
7         <li><a href="#" data-icon="info">信息</a></li>
8       </ul>
9 </div>

jQuery Mobile 工具栏

在页眉中设置标题栏

页眉一般会包含页眉标题/LOGO 或一到两个按钮（一般是首页、选项或搜索按钮）

1 <div data-role="header">
2     <div data-role="header">
3       <a href="#" data-role="button">首页</a>
4       <h1>欢迎来到个人主页</h1>
5       <!-- 若是只有一个按钮,则默认显示在左边,除非添加样式:class="ui-btn-right"-->
6       <a href="#" data-role="button" class="ui-btn-right">搜索</a>
7     </div>
8 </div>

提示：页眉可包含一个或两个按钮，然而页脚没有限制

页脚工具栏

页脚与页眉的样式不一样（它会减去一些内边距和空白，而且按钮不会居中).若是要修正该问题，请在页脚设置类名 "ui-btn"

1 <div data-role="footer" class="ui-btn">
2     <a href="#" data-role="button">转播到新浪微博</a>
3     <a href="#" data-role="button">转播到腾讯微博</a> 
4 </div>

定位页眉和页脚

Inline - 默认.页眉和页脚与页面内容位于行内。
Fixed - 单击隐刺页脚.
Fullscreen - 与Fiex类似,可是单击后同时隐藏页眉,页脚.

1 <div data-role="header" data-position="fixed" data-fullscreen="true"></div>
2 <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

布局

Jquery Mobile常见的布局

固定布局(Fixed Layout)

使用固定宽度的包裹层(Wrapper), 内部的各个部分可使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包裹层(或称为容器)的宽度是固定不变的, 因此不论访问者的浏览器是什么分辨率, 他们看到的网页宽度都彼此相同.

什么是流式布局(Fluid Layout)

流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比来设置各个部分的宽度, 用来适应不一样的分辨率. 有时候, 对于网页中的某一部分元素(好比边界值, 侧边栏), 可使用固定宽度, 但大部分元素是使用百分比来控制的

基于流式的布局网格

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，通常不推荐在移动设备上使用列布局，这是因为移动设备的屏幕宽度所限。可是有时您须要定位更小的元素，好比按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。可以使用的布局网格有四种：

提示：在列容器中，根据不一样的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

实例 1: 对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a 和 ui-block-b。

实例 2: 对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c

案例代码以下:

<div data-role="content">    
        <div class="ui-grid-b">
          <!-- 第一行有三个按钮 -->
          <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首页</a></div>
          <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div>
          <div class="ui-block-c"><a href="#" data-role="button" data-icon="back">返回</a></div>
          <!-- 第二行有二个按钮 -->
          <div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首页</a></div>
          <div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div>
          <!-- 第三行有一个按钮 -->
          <div class="ui-block-a"><a href="#" data-role="button" data-icon="back">返回</a></div>
        </div>
    </div>