10分钟
任务 2 使用jQuery Mobile编写静态页面
任务目的
使用jQuery Mobile编写静态页面并了解jQuery Mobile的基础用法，任务包含：
1.jQuery Mobile的基础功能简介；
2.jQuery Mobile的基础用法介绍；
3.使用jQuery Mobile框架编写示例页面。
任务步骤
1.jQuery Mobile基础功能简介
- jQuery Mobile是一款触摸友好型的HTML5 UI框架，旨在开发创建移动Web网站及应用，通常应用于智能手机、平板电脑以及台式设备。
- 不同于其它UI框架，jQuery Mobile的触摸友好型的特点也使得其在手机平板上发挥着独特优势，具体体现在大部分桌面网站的交互是通过鼠标进行操作，而jQuery Mobile的交互则更多为移动端进行了UI优化，通过灵活及简单的方式来布局网页，且兼容所有移动设备。
2.jQuery Mobile基础用法介绍
jQuery Mobile的引入：
- 由于jQuery Mobile是一款基于jQuery编写的UI框架，所以在引入jQuery Mobile样式和jQuery Mobile库后仍需引入jQuery库，如下图所示：
jQuery Mobile组件分类：
- jQuery Mobile UI框架的使用主要可以归为4类：页面与导航栏、CSS框架、小部件、表单组件。
- 页面与导航栏：主要关于页面、导航栏以及过渡动画；
- CSS框架：主要为按钮、图标、网格等关于CSS样式布局相关内容；
- 小部件：主要为工具栏、面板、列表、可折叠块；
- 表单组件：主要为输入框、复选框、滑块以及输入按钮等表单提交相关组件。
jQuery Mobile页面说明：
- jQuery Mobile中的页面由具有 data-role="page"属性的元素组成。在“页面”中，除了jQuery Mobile自带的标签外，仍然支持HTML相关的标签。
- page：通常由三个子项构成，分别为 data-role="header" ，data-role="main" 和 data-role="footer" 。
- header：指代的是页面顶部工具栏；
- main：定义了页面的主体内容，比如文本， 图片，表单，按钮等；
- footer：指代的是页面底部工具栏。
- 一个简单的jQuery Mobile页面代码包含如下内容：
<div data-role="page" id="page1">
<div data-role="header">
<h1>头部工具栏</h1>
</div>
<div data-role="main" class="ui-content">
<h1>这里定义了页面内容</h1>
</div>
<div data-role="footer">
<h1>底部工具栏</h1>
</div>
</div>- 更多jQuery Mobile的使用详情请参考jQuery Mobile官方文档https://demos.jquerymobile.com/1.4.5。
3.编写静态页面
- 回到步骤4.1中的在线终端中，输入
mkdir /data/jQueryMobile命令创建HTML页面的存放目录。 - 输入
cd /data/jQueryMobile命令进入刚才创建的文件目录，然后使用Vim编辑器编辑静态页面，输入如下命令进入并编辑。（有关Vim编辑器的使用教程可以参照腾讯云大学《Vim编辑器使用详解》https://cloud.tencent.com/edu/learning/course-1394-7465）
vim index.html- 复制如下HTML代码并粘贴，保存后退出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 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>
<title>jQueryMobile Test</title>
</head>
<body>
<!-- 首页 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>头部工具栏</h1>
</div>
<div data-role="main" class="ui-content">
<h1>这里定义了页面内容</h1>
<a href="#page2" data-transition="slide" data-role="button"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline">点击进入主页</a>
</div>
<div data-role="footer">
<h1>底部工具栏</h1>
</div>
</div>
<!-- 主页 -->
<div data-role="page" id="page2">
<!-- 头部区域 -->
<div data-role="header" data-position="fixed">
<!-- 顶部工具栏 -->
<a href="#page1" data-transition="slide" data-direction="reverse"
class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">返回</a>
<h1>jQuery Mobile</h1>
</div>
<!-- 主体区域 -->
<div data-role="main" class="ui-content">
<!-- 文章搜索 -->
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<!-- 文章列表 -->
<ul data-role="listview" data-inset="true" data-filter="true" data-input="#myFilter">
<li data-role="list-divider">jQuery Mobile<span class="ui-li-count">1</span></li>
<li>
<a href="#myPopupDialog" data-rel="popup">
<h2>基本介绍</h2>
<p>jQuery Mobile中的页面由具有 data-role="page"属性的元素组成。在“页面”中，除了jQuery Mobile自带的标签外，仍然支持HTML相关的标签。</p>
<p>page：通常由三个子项构成，分别为 data-role="header" ，data-role="main" 和 data-role="footer" 。</p>
<p>header：指代的是页面顶部工具栏；</p>
<p>main：定义了页面的主体内容，比如文本， 图片，表单，按钮等；</p>
<p>footer：指代的是页面底部工具栏。</p>
<p class="ui-li-aside">点击展开详情</p>
</a>
</li>
<li data-role="list-divider">jQuery Mobile<span class="ui-li-count">1</span></li>
<li>
<a href="#myPopupDialog" data-rel="popup">
<h2>基本介绍</h2>
<p>jQuery Mobile中的页面由具有 data-role="page"属性的元素组成。在“页面”中，除了jQuery Mobile自带的标签外，仍然支持HTML相关的标签。</p>
<p>page：通常由三个子项构成，分别为 data-role="header" ，data-role="main" 和 data-role="footer" 。</p>
<p>header：指代的是页面顶部工具栏；</p>
<p>main：定义了页面的主体内容，比如文本， 图片，表单，按钮等；</p>
<p>footer：指代的是页面底部工具栏。</p>
<p class="ui-li-aside">点击展开详情</p>
</a>
</li>
<li data-role="list-divider">Lorem ipsum<span class="ui-li-count">2</span></li>
<li>
<a href="#myPopupDialog" data-rel="popup">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nostrum voluptas consectetur
repellendus eveniet?</p>
<p>Recusandae odit inventore non natus doloribus laudantium eaque iste id quidem
necessitatibus? Laboriosam aliquid aliquam eos?</p>
<p class="ui-li-aside">点击展开详情</p>
</a>
</li>
<li>
<a href="#myPopupDialog" data-rel="popup" data-transition="fade">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nostrum voluptas consectetur
repellendus eveniet?</p>
<p>Recusandae odit inventore non natus doloribus laudantium eaque iste id quidem
necessitatibus? Laboriosam aliquid aliquam eos?</p>
<p class="ui-li-aside">点击展开详情</p>
</a>
</li>
</ul>
<!-- 详情面板 -->
<div data-role="popup" id="myPopupDialog">
<div data-role="main" class="ui-content">
<h2>欢迎访问详情!</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam iste consectetur sint inventore. Esse
repellat autem tenetur illum, dignissimos, hic excepturi, fuga consequatur facere facilis molestiae fugit
ducimus dolores? Pariatur.</p>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left"
data-rel="back">返回</a>
</div>
</div>
</div>
<!-- 底部区域 -->
<div data-role="footer" data-position="fixed">
<!-- 底部导航栏 -->
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#" data-icon="arrow-l" data-rel="back" data-transition="slide" data-direction="reverse">返回</a>
</li>
<li><a href="#page1" data-icon="home">首页</a></li>
<li><a href="#myPanel" data-icon="bullets">更多</a></li>
</ul>
</div>
</div>
<!-- 面板 -->
<div data-role="panel" id="myPanel" data-position="right">
<!-- 折叠块 -->
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>折叠块--点击可以展开</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>jQuery Mobile面板</h1>
<p>可以通过点击面板外部区域来关闭面板。</p>
</div>
</div>
<div data-role="collapsible">
<h1>开关</h1>
<p>开关的使用</p>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</div>
<div data-role="collapsible">
<h1>滑动条</h1>
<p>滑动条的使用</p>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
</div>
</div>
</body>
</html>- 完成后会在当前目录下（
/data/jQueryMobile）生成index.html页面，效果如下图所示：
学员评价