在过去的2-3年中，我们看到了对移动网站的浏览器和操作系统支持的巨大增长。 最值得注意的是苹果的iOS和谷歌的Android平台。 但是，诸如PalmOS和Blackberry之类的其他公司仍然处于混合状态。 直到最近，很难将单个移动主题与所有这些平台匹配。
JavaScript是一个开始，但是到目前为止，还没有任何真正的统一库。 jQuery Mobile具有jQuery的所有最佳功能，并将它们移植到基于移动的Web源。 该库更像一个框架，其中包括基本HTML元素的动画，过渡效果和自动CSS样式。 在本指南中，我希望以一种您可以轻松设计自己的jQuery移动应用程序的方式介绍该平台。
功能和操作系统支持
我建议在任何其他框架上学习jQuery Mobile的原因是简单。 该代码基于jQuery核心构建，并且拥有一支活跃的开发人员团队来编写脚本和编辑错误。 在众多功能中，包括HTML5支持，Ajax支持的导航链接以及触摸/滑动事件处理程序。
电话之间的支持情况有所不同，AC将其分为3类图表 。 A是拥有jQuery Mobile全面支持的顶层，B具有Ajax之外的所有功能，而C是具有几乎没有JavaScript的基本HTML。 幸运的是，大多数流行的操作系统都得到了完全支持-我在下面添加了仅几个示例的列表。
- 苹果iOS 3-5
- Android 2.1、2.2、2.3
- Windows Phone 7
- 黑莓6.0，黑莓7
- Palm WebOS 1.4-2.0、3.0
如果您想了解更多信息，请尝试阅读其官方文档页面。 它不是用胡言乱语写的，实际上感觉很容易跟随。 现在，让我们专注于编写jQuery移动页面的基础知识以及如何构建一个小型应用程序！
标准HTML模板
为了使您的第一个移动应用程序正常工作，您应该先设置模板。 这包括jQuery基本代码以及移动JS和CSS，所有这些外部代码都由jQuery CDN托管。 在下面查看我的示例代码。
<!DOCTYPE html>
<html>
<head>
<title>Basic mobile app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
</body>
</html> 这里唯一的外来元素应该是两个meta标签。 顶部viewport标签会更新移动浏览器以使用完整缩放效果。 设置值width=device-width将页面宽度设置为恰好在电话屏幕的宽度。 最好的是它不会禁用缩放功能，因为jQuery Mobile可以适应不断变化的布局。
下一个与X-UA-Compatible元标记仅强制Internet Explorer在其最新迭代中呈现HTML。 较旧的浏览器，尤其是移动浏览器将尝试解决不熟悉的渲染错误。
构建身体内容
现在，这是jQuery mobile变得棘手的地方。 每个HTML页面在移动网站上不一定是1页。 该框架利用了HTML5的数据属性，您可以通过预先添加data-来创建这些属性。 以类似的方式，可以在单个HTML文件中将data-role="page"设置为多个div，从而为您提供多个页面。
然后，您将在具有锚链接和唯一ID的这些页面之间移
最低0.47元/天 解锁文章
3763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
