XDL_NO.9 jQuery Mobile
2016-08-17 本文已影响41人
Junting
jQuery Mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
为什么使用 jQuery Mobile?
通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。
jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。
jQuery Mobile 解决了不同设备兼容的问题，因为它只使用HTML，CSS和JavaScript，这是所有移动网络浏览器的标准！
jQuery Mobile 安装
在你的网页中添加 jQuery Mobile
你可以通过以下几种方式将jQuery Mobile添加到你的网页中：
* 从 CDN 中加载 jQuery Mobile (推荐)
* 从jQuerymobile.com 下载 jQuery Mobile库
jQuery Mobile CDN(百度cdn)
<head>
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
使用下载 的jQuery Mobile
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
解析
- data-role="page" 是在浏览器中显示的页面。
- data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
- data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
- "ui-content" 类用于在页面添加内边距和外边距。
- data-role="footer" 用于创建页面底部工具条。
- 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Mobile</title>
<!-- meta 使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入jQuery Mobile样式 -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<!-- 引入jQuery 库 -->
<script src="js/jquery.min.js"></script>
<!-- 引入jQuery Mobile库 -->
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<!-- 创建一个在浏览器显示的页面开始 -->
<div data-role="page">
<!-- 头部开始 -->
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<!-- 头部结束 -->
<!-- 页面主体内容结束 -->
<div data-role="content">
<p>我现在是一个移动端开发者!!</p>
</div>
<!-- 页面主体内容开始 -->
<!-- 底部开始 -->
<div data-role="footer" data-position="fixed">
<h1>底部文本</h1>
</div>
<!-- 底部结束 -->
<!-- 创建一个在浏览器显示的页面结束 -->
</body>
</html>
效果
1.png
