2016-08-16 jQuery Mobile

作者: 依惜在昨天 | 来源:发表于2016-08-17 09:31 被阅读0次

2016-08-16 jQuery Mobile
XDH_LESSON9
兄弟会精英班 - 学习笔记（九）
jquery常用cdn
jQuery Mobile初识
jQuery mobile
XDL_NO.9 jQuery Mobile
JQuery mobile（0816）
jQuery Mobile 构建手机 Web 网站介绍
学习笔记-0816-jquerymobile前端框架

jQuery Mobile

简介

 简介：jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。

jQuery Msobile 都能做什么

1. jQuery Mobile为开发移动应用程序提供了非常简单的用户接口

2. 这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码

3. 提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold（点击并按住）、swipe、orientation change

4. 使用一些加强的功能时需要参照一下设备浏览器支持列表

5. 使用预设主题可以轻松定制应用程序外观

jQuery Mobile 基本页面结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery Mobile基本页面结构</title>

        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div data-role="content">
                <p>Content goes here</p>
            </div>
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
        </div>
    </body>
</html>

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js

<div dat-role=”header”></div>

在页面的顶部建立导航工具栏，用于放置标题和按钮
（典型的至少要放一个“返回”按钮，用于返回前一页）。
通过添加额外的属性data-position=”fixed”，
可以保证头部始终保持屏幕的顶部

<div dat-role=”content”></div>   

包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等

<div dat-role=”footer”></div>

在页面的底建立工具栏，添加一些功能按钮
为了确保它始终保持在页面的底部，
可以给其加上data-position=”fixed” 属性

多个页面在同一个页面中

 有一种建立在一个 HTML页面基础之上的页面结构，
 即在一个页面中添加多个data-role=”page”。
 这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。

  <body>
        <div data-role="page" id="home">
            <div data-role="header"><h1>Home</h1></div>
            <div data-role="content"><p><a href="#about">About this app</a></p></div>
        </div>

        <div data-role="page" id="about">
            <div data-role="header"><h1>About This App</h1></div>
            <div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div>
        </div>
  </body>

AJAX 导航

 为了实现在移动设备上的无缝客户体验，
 jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。
 因此，当在浏览器中点击一个链接打一个新的页面时，
 jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，
 并把请求得到的内容注入到当前页面的DOM里。
 另外还需要确保请求的页面url唯一标识的。

页面切换效果

    你可以使用多种不同的切换效果来显示新页面内容，
    只需要在链接里添加data-transition属性即可。可能的值如下

属性	含义
slide	从右到左切换（默认）
slideup	从下到上切换
slidedown	从上到下切换
pop	以弹出的形式打开一个页面
fade	渐变退色的方式切换
flip	旧页面翻转飞出，新页面飞入

对话框

 通过在链接中添加data-rel=”dialog”的属性，
 可以使链接页面的显示方式变为对话框。
 给显示的对话框加入切换的效果也是一个不错的选择

<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

按钮

 在jQuery Mobile中把一个链接变成button的效果，
 只需要在标签中添加data-role=”button属性即可”。例如：

 <div data-role="content">
    <p><a href="#about" data-role="button">About this app</a></p>    
  </div>
  ...

  <div data-role="content">
      <p>This app rocks!</p>
      <a href="#home" data-role="button">Go home</a>
  </div>

格式化文本

为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。
加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块

布局表格：组织内容以列的形式显示，有两列表格，和三列表格
可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来

下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。

<!DOCTYPE html>

<html>

    <head>
        <title>Collapsible Content Demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Home</h1>
            </div>
            <div data-role="content">
                <div data-role="collapsible" data-state="collapsed">
                    <h3>About this app</h3>
                    <p>This app rocks!</p>
                </div>
            </div>
        </div>
    </body>

</html>

主题

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮，但是如果你的整个应用都使用这样的样式，将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如：

Font family
Drop shadows
按钮和盒状元素的边框圆角半径
图标组件

另外，每一个主题包含26种不同颜色的切换（标记从a 到z），可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如：

<!DOCTYPE html>

<html>

  <head>

  <title>Page Title</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

<body>
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" data-theme="a">About this app</a>
    <a href="#" data-role="button" data-theme="b">About this app</a>
    <a href="#" data-role="button" data-theme="c">About this app</a>
    <a href="#" data-role="button" data-theme="d">About this app</a>
    <a href="#" data-role="button" data-theme="e">About this app</a>
  </div>
</div>

</body>
</html>

事件

框架还提供了简单的用户接口，并添加了移动设备支持的特殊事件。

<!DOCTYPE html>

<html>

<head>

<title>jQuery Mobile Events</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">



$( function() {
  $('body').bind( 'taphold', function( e ) {
    alert( 'You tapped and held!' );
    e.stopImmediatePropagation();
    return false;
  } );  

  $('body').bind( 'swipe', function( e ) {
    alert( 'You swiped!' );
    e.stopImmediatePropagation();
    return false;
  } );  

} );

</script>  
</head>

<body>
<div data-role="page" id="home">
  <div data-role="header">
    <h1>jQuery Mobile Events</h1>
  </div>
  <div data-role="content">
    <p>Try:</p>
    <ul>
      <li>Tapping and holding</li>
      <li>Swiping</li>
    </ul>
  </div>
</div>
</body>
</html>

触摸选择的表单元素

jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。

例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，

另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。

下面是一个jQuery Mobile版的表单元素

<!DOCTYPE html>

<html>

<head>

    <title>jQuery Mobile Form Demo</title>

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

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

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

</head>

<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>
                Ice Cream Order Form
            </h1>
        </div>
        <div data-role="content">
            <form action="#" method="get">
                <div data-role="fieldcontain">
                    <label for="name">
                        Your Name:
                    </label>
                    <input type="text" name="name" id="name" value="" />
                </div>
                <div data-role="controlgroup">
                    <legend>
                        Which flavour(s) would you like?
                    </legend>
                    <input type="checkbox" name="vanilla" id="vanilla" class="custom" />
                    <label for="vanilla">
                        Vanilla
                    </label>
                    <input type="checkbox" name="chocolate" id="chocolate"
                        class="custom" />

                    <label for="chocolate">
                        Chocolate
                    </label>
                    <input type="checkbox" name="strawberry" id="strawberry"
                        class="custom" />
                    <label for="strawberry">
                        Strawberry
                    </label>
                </div>
                <div data-role="fieldcontain">
                    <label for="quantity">
                        Number of Cones:
                    </label>
                    <input type="range" name="quantity" id="quantity" value="1"
                        min="1" max="10" />
                </div>
                <div data-role="fieldcontain">
                    <label for="sprinkles">
                        Sprinkles:
                    </label>
                    <select name="sprinkles" id="sprinkles" data-role="slider">
                        <option value="off">
                            No
                        </option>
                        <option value="on">
                            Yes
                        </option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="store">
                        Collect from Store:
                    </label>
                    <select name="store" id="store">
                        <option value="mainStreet">
                            Main Street
                        </option>
                        <option value="libertyAvenue">
                            Liberty Avenue
                        </option>
                        <option value="circleSquare">
                            Circle Square
                        </option>
                        <option value="angelRoad">
                            Angel Road
                        </option>
                    </select>
                </div>
                <div class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a">
                            <button type="submit" data-theme="d">
                                Cancel
                            </button>
                        </div>
                        <div class="ui-block-b">
                            <button type="submit" data-theme="a">
                                Order Ice Cream
                            </button>
                        </div>
                    </fieldset>
                </div>
        </div>
    </div>
</body>
</html>

列表视图

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到创建列表视图

简单的文件列表项

简单的文件列表，会有一个好看的盒环绕着每一个列表项
链接列表，框架会自动为每一个链接加一个箭头”>”，显示在链接按钮的右侧
嵌套列表，如果你在一个li中嵌套另一个ul，jQuery Mobile会为这个嵌套列表自动建立一个”page”，并为它的父li自动加一个链接，这样很容易实现树状菜单选项，设置功能等等。
分隔线的按钮列表，在一个li中存放2个链接，你可以建立一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展现不同的内容
记数气泡如果你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数
查找过滤在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面，允许用户根据条件来将一个大的列表项变小（过滤显示）
列表分隔将列表项分割，可以在任意列表项上添加属性data-role=”list-divider
列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展现，图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标

以下是一个列表项的实例

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery Mobile Lists Demo</title>
        <link rel="stylesheet"
            href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script
            src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>
    <body>

        <div data-role="page" id="home">
            <div data-role="header">
                <h1>
                    Lists Demo
                </h1>
            </div>
            <div data-role="content">
                <h2 style="padding: 1em 0;">
                    A list view
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        Cat
                    </li>
                    <li>
                        Dog
                    </li>
                    <li>
                        Mouse
                    </li>
                    <li>
                        Squirrel
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    A list of links
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#">About this app</a>
                    </li>
                    <li>
                        <a href="#">Buy ice cream</a>
                    </li>
                    <li>
                        <a href="#">Find a store</a>
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    Nested lists
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        Play
                        <ul>
                            <li>
                                <a href="#">Easy</a>
                            </li>
                            <li>
                                <a href="#">Medium</a>
                            </li>
                            <li>
                                <a href="#">Hard</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Settings
                        <ul>
                            <li>
                                <a href="#">Graphics</a>
                            </li>
                            <li>
                                <a href="#">Sound</a>
                            </li>
                            <li>
                                <a href="#">Device</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Highscores
                        <ul>
                            <li>
                                <a href="#">View</a>
                            </li>
                            <li>
                                <a href="#">Submit</a>
                            </li>
                            <li>
                                <a href="#">Reset</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    A split button list with filter
                </h2>
                <ul data-role="listview" data-inset="true" data-filter="true">
                    <li>
                        <a href="#">The Grapes of Wrath</a>
                        <a href="#">Buy This Book</a>
                    </li>
                    <li>
                        <a href="#">The Trial</a>
                        <a href="#">Buy This Book</a>
                    </li>
                    <li>
                        <a href="#">A Tale of Two Cities</a>
                        <a href="#">Buy This Book</a>
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    A list with count bubbles
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#">SuperWidgets</a>
                        <span class="ui-li-count">14</span>
                    </li>
                    <li>
                        <a href="#">MegaWidgets</a>
                        <span class="ui-li-count">0</span>
                    </li>
                    <li>
                        <a href="#">WonderWidgets</a>
                        <span class="ui-li-count">327</span>
                    </li>
                </ul>
            </div>
        </div>
    </body>

  </html>

2016-08-16 jQuery Mobile
jQuery Mobile 简介 jQuery Msobile 都能做什么 jQuery Mobile 基本页面结...
XDH_LESSON9
jQuery Mobile1.什么叫jQuery Mobile。 jQuery Mobile（jQueryMobi...
兄弟会精英班 - 学习笔记（九）
jQuery Mobile 前端架构 jQuery Mobile 安装 jQuery Mobile 官网下载稳...
jquery常用cdn
jQuery： jQuery mobile： jQuery UI：
jQuery Mobile初识
jQuery Mobile jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mo...
jQuery mobile
JQuery mobile jQuery Mobile 是创建移动 web 应用程序的框架 jQuery Mobi...
XDL_NO.9 jQuery Mobile
jQuery Mobile jQuery Mobile 是创建移动 web 应用程序的框架。 jQuery Mob...
JQuery mobile（0816）
JQuery mobile jQuery Mobile 是创建移动 web 应用程序的框架 jQuery Mobi...
jQuery Mobile 构建手机 Web 网站介绍
jQuery Mobile 构建手机 Web 网站介绍 jQuery Mobile 认知 jQueryMobile...
学习笔记-0816-jquerymobile前端框架
jquery mobile前端框架 Query Mobile 是创建移动 web 应用程序的框架。 jQuery ...

2016-08-16 jQuery Mobile

jQuery Mobile

简介

jQuery Msobile 都能做什么

jQuery Mobile 基本页面结构

多个页面在同一个页面中

AJAX 导航

页面切换效果

对话框

按钮

格式化文本

主题

事件

触摸选择的表单元素

列表视图

相关文章

2016-08-16 jQuery Mobile

XDH_LESSON9

兄弟会精英班 - 学习笔记（九）

jquery常用cdn

jQuery Mobile初识

jQuery mobile

XDL_NO.9 jQuery Mobile

JQuery mobile（0816）

jQuery Mobile 构建手机 Web 网站介绍

学习笔记-0816-jquerymobile前端框架

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读