jQuery Mobile 构建手机 Web 网站介绍

jQuery Mobile 构建手机 Web 网站介绍

jQuery Mobile 认知

  • jQueryMobile不是jQuery的移动版本
  • jQueryMobile是一个jQuery的插件
  • jQueryMobile的大小(最小化) jQuery 1.6.2(90k)
    jQuery Mobile CSS (44k)
    jQuery Mobile JS (71K)
    img (<10k)

jQuery Mobile 的作用

  • 可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。
  • jQuery Mobile 开发的web应用像NativeApp
  • jQuery Mobile 包含Web应用中的各种常用部件 对话框、表单、列表、按钮、工具条等
  • 使用Ajax加载页面,实现炫丽的页面切换效 果

jQuery Mobile 关键特点

  • 基于jQuery
  • 兼容主流的手机浏览器和桌面浏览器
  • 体积小,压缩后20K左右
  • HTML5风格的配置
  • 页面自动初始化,通过data-role属性自动对页 面部件进行初始化
  • 触摸屏和鼠标事件支持
  • 丰富的UI部件
  • 可扩展的页面样式框架

Hello HTML5

一个最基本的 jQuery Mobile 页面:

 

    
    Hello HTML5
    
    
    
    


Hello HTML5

Page content goes here.

©开源社区

jQuery Mobile 的链接处理方式

  • 默认的链接行为:Ajax加载
    显示(loading...)
  • 以下方式禁用Ajax加载链接
    ref=‘external’ data-ajax=‘false’ target=‘xxx ’
  • 返回链接 data-rel=‘back’
  • 其他链接 mailto:[email protected] tel:15555555555 wtai://wp/mc;15555555555 dc:234234234

jQuery Mobile 内置的6种页面主题

引入主题的方式:

jQuery Mobile 的工具栏/导航条

在 jQuery Mobile 中, 有两种标准类型的工具栏:

  • Header bar 充当页面标题的作用, 通常是 mobile page中的第一个元素,一 般包含有一个页面标题和两个按钮。
  • Footer bar 通常是最后一个元素,相 比于header在内容和功能上面更加自 由, 但是一般包含一些文字和按钮。
  • 导航条:

jQuery Mobile 的按钮

  • inline按钮(多个按钮放置一行)

  • 分组按钮

jQuery Mobile 的表格 Grid Layout

jQuery Mobile 自带 2 ~ 5 列的表格,分别是:class=ui-grid-a/b/c/d 示例:

A
B
C
A
B
C
A
B
C

jQuery Mobile 的可折叠块

I'm a header

I'm the collapsible content. By default I'm openand displayed on the page, but you can click the header to hide me.

jQuery Mobile 表单

  • 支持文本框的 placeholder="..." 属性
  • 通过 data-ajax="false" 禁用 Ajax 加载
  • 通过data-theme让表单使用不同的主题
  • 可以使用HTML5新的类型,如email, tel, number 等