2016-08-16 jQuery Mobile

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 基本页面结构



    
        
        jQuery Mobile基本页面结构

        
        
        
        
    
    
        

Header

Content goes here

Footer

要使用 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

在页面的顶部建立导航工具栏,用于放置标题和按钮 (典型的至少要放一个“返回”按钮,用于返回前一页)。 通过添加额外的属性data-position=”fixed”, 可以保证头部始终保持屏幕的顶部
包含一些主要内容,例如文本内容,图像,按钮,列表,表单等等
在页面的底建立工具栏,添加一些功能按钮 为了确保它始终保持在页面的底部, 可以给其加上data-position=”fixed” 属性

多个页面在同一个页面中

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

        

About This App

This app rocks!Go home


AJAX 导航

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

页面切换效果

    你可以使用多种不同的切换效果来显示新页面内容,
    只需要在链接里添加data-transition属性即可。可能的值如下
属性 含义
slide 从右到左切换(默认)
slideup 从下到上切换
slidedown 从上到下切换
pop 以弹出的形式打开一个页面
fade 渐变退色的方式切换
flip 旧页面翻转飞出,新页面飞入

对话框

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

About this app

按钮

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

 
  ...

  

This app rocks!

Go home

格式化文本

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

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

布局表格:组织内容以列的形式显示,有两列表格,和三列表格
可折叠的内容:当点击内容块的标题,则会将其隐藏的详细内容展现出来
下面是一个可折叠内容的实例,单击标题将看到具体的内容,再点击标题则会将展现的内容隐藏。





    
        Collapsible Content Demo
        
        
        
    
    
        

Home

About this app

This app rocks!

主题

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

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

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





  

  Page Title
  
  
  







事件

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






jQuery Mobile Events




  



jQuery Mobile Events

Try:

  • Tapping and holding
  • Swiping

触摸选择的表单元素

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版的表单元素







    jQuery Mobile Form Demo

    

    

    




    

Ice Cream Order Form

Which flavour(s) would you like?

列表视图

列表视图是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像素的图标

以下是一个列表项的实例





    

        jQuery Mobile Lists Demo
        
        
        
    
    

        

Lists Demo

A list view

  • Cat
  • Dog
  • Mouse
  • Squirrel

A list of links

Nested lists

A split button list with filter

A list with count bubbles

你可能感兴趣的:(2016-08-16 jQuery Mobile)