jQuery Mobile

发表于 | 分类于 |
字数统计: 663 | 阅读时长 ≈ 2

jQuery Mobile用来填补jQuery在移动设备应用上的缺憾

  • 特性

    1. 基于jQuery
    2. 兼容绝大部分手机平台
    3. 轻量级
    4. 模块化结构
    5. HTML 5标记驱动配置
    6. 渐进增强原则
    7. 响应设计
    8. 易用性
    9. 强大的Ajax导航系统
    10. 支持触摸，鼠标，光标
    11. 统一的UI组件　　
    12. 强大的主体化框架 移动设备浏览器对HTML 5标准的支持程度要远远优于pc设备
      实例： 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>My Page</title>
          <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
          <script src="js/jquery.js"></script>
          <script src="js/jquery.mobile-1.0.1.min.js"></script>
      </head>
      <body>
          <div data-role="Page">
              <div data-role="header">
                  <h1>My Title</h1>
              </div>
              <div data-role="content">
                  <p>Hello</p>
              </div>
              <div data-role="footer">
                  <h4>Footer content</h4>
              </div>
          </div>
      </body>
      </html>
      1.使用特殊的meta元素可以对视图取进行纠正user-scalable=no
      2.注意在标签中的引用顺序

    data-role属性

    data-属性是HTML 5新推出的一个属性
    详见w3school的jQuery Mobile Data 属性

    • data-inset=“true”更改列表的适配宽度
    • data-theme 更换UI主题，jQuery mobile还提供了一个强大的ThemeRoller组件可以自定义主题

      其他框架

    • 移动框架
      除了jQuery Mobile之外还有
      • jqMobi
        jqMobi是基于jQuery重写的，不是jQuery Mobile。适应IOS和Android等移动设备的JavaScript框架，含有jQuery Mobile的大部分功能，但是jqMobi体积更小，速度更快，兼容性不一样
      • Sencha Touch
        专门为移动设备开发应用的JavaScript框架，通过它你可以创建一个非常像native app的web app。用户界面组件和数据管理都基于HTML 5和css 3。兼容Android和IOS.重量级，组件封装较多，平台交互一般，入门门槛高。
      • Zepto.js
        专为Mobile WebKit浏览器开发的JavaScript框架。超轻量只有5kb,语法借鉴并兼容jQuery

  • PhoneGap
    开源框架，使用HTML，css和JavaScript来构建跨平台的移动应用程序。使开发者可以利用地理定位，加速器，联系人，声音，振动。web开发者还可以把已有的web应用打包为移动平台上的本地应用或者应用商店的app,让用户进行直接下载。
    特性：将HTML/JavaScript打包为本地app，帮助开发者部署到各种平台，并提供访问移动应用的接口，支持多语言混合的插件机制