jQuery Mobile 初体验

小甲鱼 · 发表于 2012-6-25 18:50:51

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

jQuery Mobile v1.1.0上个月已经发布，由于好奇就学习了一下。jQuery Mobile是 jQuery 在手机和平板设备上的版本，用于创建针对智能手机和平板电脑的跨设备Web应用。jQuery的用户界面总设计师Todd Parker(jQuery之父)称，jQM旨在“为 jQuery 社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。

jQuery mobile页面结构jQuery Mobile 应用了 HTML5 标准的特性，在结构化的页面中完整的页面结构分为 header、content、footer 这三个主要区域。 jQuery mobile站点的页面必须以HTML5的doctype开头，即 “<!DOCTYPE html>”（不支持HTML5的浏览器会忽略这个标签）。

然后引入jQuery，jQuery mobile的javascript代码文件以及jquery mobile的css文件。

<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

复制代码

下面是一个完整的单页面：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="js/jquery.mobile-1.1.0-rc.1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>

复制代码

体验网址：http://www.gofane.com/mobileSSQ/

黑夜 · 发表于 2012-7-17 23:04:47

jQuery 这个是好东西啊

账号		自动登录	找回密码
密码			立即注册