jQuery Mobile框架开发教程(1)

JQuery Mobile以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的UI框架:jQuery的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的Web应用程序,而不必为每个移动设备编写独特的应用程序或操作系统。

jQuery Mobile目前支持的移动平台有苹果公司的iOS(iPhone,ipad,iPod  Touch),Android,Black Berry OS6.0,惠普 WebOS,Mozilla的Fennec和Opera Mobile。今后,将增加包括Windows Mobile,Symbian和MeeGo在内的更多移动平台。

根据jQuery Mobile项目网站,目前jQuery Mobile的特性包括

  • jQuery核心——与jQuery桌面版一致的jQuery核心和语法,以及最小的学习曲线。
  • 兼容所有主流的移动平台——iOS、Android、BlackBerry,Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo以及所有支持HTML的移动平台。
  • 轻量级 alpha版本的jQuery Mobile 其JavaScript 大小仅为 12KB , CSS 文件也只有 6KB大小。
  • 标记驱动的配置 jQuery Mobile采用完全的标记驱动而不需要JavaScript的配置。
  • 渐进增强 jQuery Mobile采用完全的渐进增强原则:通过一个全功能的HTML网页,和额外的JavaScript功能层,提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript,基于jQueryMobile的移动应用程序仍能正常的使用。
  • 自动初始化通过使用 mobilize()函数自动初始化页面上的所有jQuery部件。
  • 无障碍 包括WAI-ARIA在内的无障碍功能以确保页面能在类似于VoiceOver等语音辅助程序和其他辅助技术下正常使用。
  • 简单的API 为用户提供鼠标、触摸和光标焦点简单的输入法支持。
  • 强大的主题化框架 jQuery Mobile提供强大的主题化框架和UI接口。

在以下的一段时间里我将会结合我们团队的开发应用过程和遇到的问题进行探讨

第一部分 初始化和配置

首先我们需要下载jQueryMobile的框架。

jQueryMobile框架下载地址:Zip File: jquery-mobile-1.0a2.zip

将得到的框架包解压到项目目录下后我们就可以开始我们的体验之旅了^_^

在<head>中按顺序加入框架的引用,注意加载的顺序

<link rel="stylesheet" type="text/css" href="jquery.mobile-1.0a2.min.css">

<script src="jquery-1.4.4.min.js"></script>

<!--这里加入项目中其他的引用-->

<script src="jquery.mobile-1.0a2.min.js"></script>

 

ps:建议在meta中加入'”charset=utf-8”的声明,避免出现乱码和响应方面的问题

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 或者 <meta charset="utf-8" />

第二部分 老套的”Hello World!”

jQueryMobile在针对移动平台设备的特性方面做了很大的优化,运用html5和Touch特性极大丰富了应用的交互方式。

从一个窗口开始,新建一个dialog.html的页面,引入框架文件在<body>里写入:

<div data-role="page">
        <div data-role="header" data-position="inline">
            <h1>Hello world!</h1>
        </div>
        <div data-role="content">
            <h1>Hello world!</h1>
            <p>这是我的第一个jQueryMobile框架应用。</p>
            <a href="javascript:void(0);" data-role="button">确定</a>
            <a href="javascript:void(0);" data-role="button">取消</a> 
        </div>
    </div>

预览效果:

image

 

代码关键点分析:

<div data-role="page"> 用来创建一个兼容的mobile页面,页面容器。

<div data-role="header" data-position="inline"> 创建标题栏元素,标题容器。

<div data-role="content"> 内容区域容器。
<a href="javascript:void(0);" data-role="button">确定</a>按钮元素。

我们发现在以上的几个容器元素中都出现了"data-role”属性,这个属性到底能是做什么用的呢?

"data-role”属性是用来定义页面上的元素的功能,例如页面容器、标题容器、内容区域等。

"data-role”属性列表:

  • page: 页面容器,其内部的mobile元素将会继承这个容器上所设置的属性
  • header: 页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮等元素
  • footer: 页面底部容器,这个容器内部也可以包含文字、返回按钮、功能按钮等元素
  • content: 页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素
  • controlgroup: 将几个元素设置成一组,一般是几个相同的元素类型
  • fieldcontain: 区域包裹容器,用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
  • navbar: 功能导航容器,通俗的讲就是工具条
  • listview: 列表展示容器,类似手机中联系人列表的展示方式
  • list-divider: 列表展示容器的表头,用来展示一组列表的标题,内部不可包含链接
  • button: 按钮,将链接和普通按钮的样式设置成为jQueryMobile的风格

先写到这里吧,以后将会逐渐深入jQueryMobile框架的应用,演示代码也会逐步放出^_^



[本日志由 eddy 于 2011-03-16 08:57 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 2 | 引用: 0 | 查看次数: 7459
回复回复jobin[2011-10-20 01:51 PM | del]
支持
回复来自 eddy 的评论 eddy 于 2011-10-20 04:07 PM 回复
谢谢!
回复回复carey[2011-04-22 10:55 AM | del]
有微博没?
回复来自 eddy 的评论 eddy 于 2011-10-20 04:07 PM 回复
一直把微博当作即时新闻来用,和没有一样
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭