jqueryMobile开发手机网页 | Dangbao's Blog

Dangbao's Blog

jqueryMobile开发手机网页

现在移动互联网的应用越来越广泛,花了一点时间研究了jqueryMobile,体验到其简单强大的功能,记录一下。

关于jqueryMobile

我们知道jquery最令人称道的就是其兼容性极佳,jqueryMobile同样继承了这个优点。目前可以支持包括安卓、黑莓、iOS和Windows Mobile等其他平台,并利用内置的组件,轻松创建统一的、跨移动设备的界面。同样,在桌面PC浏览器也可以访问哦。查看jqueryMobile Demo页面

配置jqueryMobile

jqueryMobile是基于html5+css3+jquery来构建页面的,我们也可以理解为它是1个jquery插件。当然为了向下兼容,只是用了html5的DTD声明,在页面中还是用xhtml的元素来呈现。默认皮肤的背景和按钮也是用CSS3来写的,我们阅读css文件时候可以看到为了兼容各浏览器的代码。所以,目前看到的情况是IE9以下的浏览器测试,背景渐变显示为纯色背景,边框圆角显示为直角等等。

引入框架:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
官方现在已经发布了1.1.0候选版,并称在几周后发布最终版。
html5页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>演示文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>头部</h1>
</div>
<div data-role="content">
这里是内容
</div>
<div data-role="footer">
<h4>尾部</h4>
</div>
</div>
</body>
</html>

或许你喜欢下面的文章
凤凰网视频展示代码
凤凰网新版焦点轮播图代码
右侧图片跟随页面滑动代码
删除不用的tortoiseSvn本地文件夹

3位看官已经发言了

  1. P57 2012年04月26日 上午1:46

    第一次来,博客不错,收藏了!

  2. keelii 2012年04月20日 下午7:09

    一直没有搞过手机端的开发~~~

    • dangbao 2012年04月25日 下午5:37

      大趋势啊,会有机会的。

标签:

分类信息 前端 唠叨 字体 学习 广告 思考 招聘 无线路由器 空洞 转变 android border css工具 firefox html ie6 jq插件 jQuery opera seo wifi win7 WordPress