【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战
《jQuery Mobile移动应用开发实战》学习笔记
·
文章目录
所有markdown笔记以及对应pdf以及项目源码都已上传至网盘：
链接：https://pan.baidu.com/s/1-_iqh67EU43BpgEa040hMQ
提取码：ziyi
8. JQuery Mobile界面综合实战
主要知识点包括：
- 利用JQuery Mobile进行开发的方法
- 开发实战中的技巧
- 什么样的应用可以用JQuery Mobile开发
8.1 清爽的电子书阅读器
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home" data-title="首页">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>电子书阅读器</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page_1">jQuery Mobile实战 第一章</a></li>
<li><a href="#page_2">jQuery Mobile实战 第二章</a></li>
<li><a href="#page_3">jQuery Mobile实战 第三章</a></li>
<li><a href="#page_1">jQuery Mobile实战 第四章</a></li>
<li><a href="#page_2">jQuery Mobile实战 第五章</a></li>
<li><a href="#page_3">jQuery Mobile实战 第六章</a></li>
<li><a href="#page_1">jQuery Mobile实战 第七章</a></li>
<li><a href="#page_2">jQuery Mobile实战 第八章</a></li>
<li><a href="#page_3">jQuery Mobile实战 第九章</a></li>
<li><a href="#page_1">jQuery Mobile实战 第十章</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>书籍列表</h1>
</div>
</div>
<!--首页-->
<div data-role="page" id="page_1" data-title="第一章">
<div data-role="header" data-position="fixed">
<a href="#home">返回</a>
<h1>第一章</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<h1>jQuery Mobile实战第一章</h1>
<h4>今天，jQuery 驱动着Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序逐渐减少。现在，主要移动平台上的浏览器的功能都赶上了桌面浏览器，因此jQuery 团队引入了jQuery Mobile（或JQM）。JQM 的使命是向所有主要移动浏览器提供一种统一体验，使整个Internet 上的内容更加丰富— 不管使用哪种查看设备。</h4>
</div>
<div data-role="footer" data-position="fixed">
<h1>jQuery Mobile实战</h1>
</div>
</div>
<!---->
<div data-role="page" id="page_2" data-title="第二章">
<div data-role="header" data-position="fixed">
<a href="#home">返回</a>
<h1>第二章</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<h1>jQuery Mobile实战第二章</h1>
<h4>在美国，IOS和Android设备占了很大比重，而美国以外的地方主要是Nokia的设备占统治地位。jQueryMobile为了在尽可能多的设备上运行，承诺将支持绝大部分移动设备/系统。</h4>
</div>
<div data-role="footer" data-position="fixed">
<h1>jQuery Mobile实战</h1>
</div>
</div>
<!---->
<div data-role="page" id="page_3" data-title="第三章">
<div data-role="header" data-position="fixed">
<a href="#home">返回</a>
<h1>第三章</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<h1>jQuery Mobile实战第三章</h1>
<h4>jQuery Mobile是HMT5友好的，它包含了大量可运行在多种设备上的UI组件，比如：Pages&Dialogs、Toolbars、Buttons、Forms、Lists和Content formatting。这个框架还包含处理Events（触摸、定位、滚动、页面、动画）的API、Themes及其他探测设置。</h4>
</div>
<div data-role="footer" data-position="fixed">
<h1>jQuery Mobile实战</h1>
</div>
</div>
</body>
</html>
效果如下所示：
8.2 简单的计算器
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-grid-d .ui-block-a
{
width:20%;
}
.ui-grid-d .ui-block-b
{
width:20%;
}
.ui-grid-d .ui-block-c
{
width:20%;
}
.ui-grid-d .ui-block-d
{
width:20%;
}
.ui-grid-d .ui-block-e
{
width:20%;
}
</style>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
<h1>计算器</h1>
</div>
<div data-role="content">
<form>
<input type="text">
</form>
<fieldset class="ui-grid-d">
<div class="ui-block-a">
<a href="#" data-role="button" >MC</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" >MR</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" >MS</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" >M+</a>
</div>
<div class="ui-block-e">
<a href="#" data-role="button" >M-</a>
</div>
<!---->
<div class="ui-block-a">
<a href="#" data-role="button" > </a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" >CE</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" >C</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" >+/-</a>
</div>
<div class="ui-block-e">
<a href="#" data-role="button" >√</a>
</div>
<!---->
<div class="ui-block-a">
<a href="#" data-role="button" >7</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" >8</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" >9</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" >/</a>
</div>
<div class="ui-block-e">
<a href="#" data-role="button" >%</a>
</div>
<!---->
<div class="ui-block-a">
<a href="#" data-role="button" >4</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" >5</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" >6</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" >*</a>
</div>
<div class="ui-block-e">
<a href="#" data-role="button" >1/x</a>
</div>
<!---->
<div class="ui-block-a">
<a href="#" data-role="button" >1</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" >2</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" >3</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" >-</a>
</div>
<div class="ui-block-e">
<a href="#" data-role="button" >=</a>
</div>
<!---->
<div class="ui-block-a">
<a href="#" data-role="button" >0</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" >.</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" >+</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" >^</a>
</div>
<div class="ui-block-e">
<a href="#" data-role="button" >Del</a>
</div>
</fieldset>
</div>
<div data-role="footer" data-position="fixed">
<h1>计算器</h1>
</div>
</div>
</body>
</html>
效果如下：
8.3 移动BBS模板
利用JQuery Mobile实现的论坛页面：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-icon="info">关于</a>
<h1>jQuery Mobile实战<a href="#">网页版</a></h1>
<a href="#" data-icon="home">主页</a>x
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
<li data-role="list-divider">jQuery Mobile开发资源共享区</li>
<li>
<a href="#">新手入门与知识百科</a>
</li>
<li>
<a href="#">jQuery Mobile开发资料共享</a>
</li>
<li>
<a href="#">jQuery Mobile实例教程</a>
</li>
<li>
<a href="#">jQuery Mobile扩展插件</a>
</li>
<li>
<a href="#">jQuery Mobile书籍推荐</a>
</li>
<li>
<a href="#">jQuery Mobile界面布局研究</a>
</li>
<li data-role="list-divider">jQuery Mobile开发进阶问答</li>
<li>
<a href="#">jQuery Mobile问题解答</a>
</li>
<li>
<a href="#">jQuery Mobile开发进阶</a>
</li>
<li>
<a href="#">jQuery Mobile应用测试专辑</a>
</li>
<li data-role="list-divider">jQuery Mobile开发与项目外包</li>
<li>
<a href="#">jQuery Mobile人才招聘</a>
</li>
<li>
<a href="#">jQuery Mobile项目外包</a>
</li>
<li>
<a href="#">jQuery Mobile插件交易</a>
</li>
<li data-role="list-divider">jQuery Mobile插件专区</li>
<li>
<a href="#">jQuery Mobile插件定制</a>
</li>
<li>
<a href="#">jQuery Mobile文档翻译</a>
</li>
<li>
<a href="#">jQuery Mobile开发工具</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="check">登陆</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果如下：
8.4 基于JQuery Mobile的简单记事本
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home" data-title="我的记事本">
<div data-role="header" data-position="fixed">
<h1>我的记事本</h1>
<a href="#new" data-icon="plus">新建</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#">
<h1>记事本一</h1>
<p>2018/11/3 星期六</p>
</a></li>
<li><a href="#">
<h1>记事本二</h1>
<p>2018/11/4 星期日</p>
</a></li>
<li><a href="#">
<h1>记事本三</h1>
<p>2018/11/5 星期一</p>
</a></li>
<li><a href="#">
<h1>记事本四</h1>
<p>2018/11/6 星期二</p>
</a></li>
<li><a href="#">
<h1>记事本五</h1>
<p>2018/11/7 星期三</p>
</a></li>
<li><a href="#">
<h1>记事本六</h1>
<p>2018/11/8 星期四</p>
</a></li>
<li><a href="#">
<h1>记事本七</h1>
<p>2018/11/9 星期五</p>
</a></li>
<li><a href="#">
<h1>记事本八</h1>
<p>2018/11/10 星期六</p>
</a></li>
<li><a href="#">
<h1>记事本九</h1>
<p>2018/11/11 星期日</p>
</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<!---->
<div data-role="page" id="new" data-title="新建记事本">
<div data-role="header" data-position="fixed">
<h1>新建记事本</h1>
<a href="#home" data-icon="back">返回</a>
</div>
<div data-role="content">
<form>
<label for="note">请输入内容:</label>
<textarea name="note" id="note"></textarea>
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="arrow-u">提交</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果如下：
8.5 基于JQuery Mobile的全键盘界面
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>简单的QWER键盘</h1>
</div>
<div data-role="content">
<!--第一排-->
<a href="#" data-role="button" data-inline="true">~</a>
<a href="#" data-role="button" data-inline="true">1</a>
<a href="#" data-role="button" data-inline="true">2</a>
<a href="#" data-role="button" data-inline="true">3</a>
<a href="#" data-role="button" data-inline="true">4</a>
<a href="#" data-role="button" data-inline="true">5</a>
<a href="#" data-role="button" data-inline="true">6</a>
<a href="#" data-role="button" data-inline="true">7</a>
<a href="#" data-role="button" data-inline="true">8</a>
<a href="#" data-role="button" data-inline="true">9</a>
<a href="#" data-role="button" data-inline="true">0</a>
<a href="#" data-role="button" data-inline="true">-</a>
<a href="#" data-role="button" data-inline="true">+</a>
<a href="#" data-role="button" data-inline="true">Del</a>
<br/><!--第二排-->
<a href="#" data-role="button" data-inline="true">Tab</a>
<a href="#" data-role="button" data-inline="true">Q</a>
<a href="#" data-role="button" data-inline="true">W</a>
<a href="#" data-role="button" data-inline="true">E</a>
<a href="#" data-role="button" data-inline="true">R</a>
<a href="#" data-role="button" data-inline="true">T</a>
<a href="#" data-role="button" data-inline="true">Y</a>
<a href="#" data-role="button" data-inline="true">U</a>
<a href="#" data-role="button" data-inline="true">I</a>
<a href="#" data-role="button" data-inline="true">O</a>
<a href="#" data-role="button" data-inline="true">P</a>
<a href="#" data-role="button" data-inline="true">[</a>
<a href="#" data-role="button" data-inline="true">]</a>
<a href="#" data-role="button" data-inline="true">\</a>
<br/><!--第三排-->
<a href="#" data-role="button" data-inline="true">Caps Lock</a>
<a href="#" data-role="button" data-inline="true">A</a>
<a href="#" data-role="button" data-inline="true">S</a>
<a href="#" data-role="button" data-inline="true">D</a>
<a href="#" data-role="button" data-inline="true">F</a>
<a href="#" data-role="button" data-inline="true">G</a>
<a href="#" data-role="button" data-inline="true">H</a>
<a href="#" data-role="button" data-inline="true">J</a>
<a href="#" data-role="button" data-inline="true">K</a>
<a href="#" data-role="button" data-inline="true">L</a>
<a href="#" data-role="button" data-inline="true">;</a>
<a href="#" data-role="button" data-inline="true">'</a>
<a href="#" data-role="button" data-inline="true">Enter</a>
<br/><!--第四排-->
<a href="#" data-role="button" data-inline="true" data-icon="arrow-u" style="width:130px;">Shift</a>
<a href="#" data-role="button" data-inline="true">Z</a>
<a href="#" data-role="button" data-inline="true">X</a>
<a href="#" data-role="button" data-inline="true">C</a>
<a href="#" data-role="button" data-inline="true">V</a>
<a href="#" data-role="button" data-inline="true">B</a>
<a href="#" data-role="button" data-inline="true">N</a>
<a href="#" data-role="button" data-inline="true">M</a>
<a href="#" data-role="button" data-inline="true"><</a>
<a href="#" data-role="button" data-inline="true">></a>
<a href="#" data-role="button" data-inline="true">/</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-u" style="width:130px;">Shift</a>
<br/><!--最后一排-->
<a href="#" data-role="button" data-inline="true" style="width:130px;">Ctrl</a>
<a href="#" data-role="button" data-inline="true">Fn</a>
<a href="#" data-role="button" data-inline="true">Win</a>
<a href="#" data-role="button" data-inline="true">Alt</a>
<a href="#" data-role="button" data-inline="true" style="width:300px;">Space</a>
<a href="#" data-role="button" data-inline="true">Alt</a>
<a href="#" data-role="button" data-inline="true">Ctrl</a>
<a href="#" data-role="button" data-inline="true">PrntScr</a>
</div>
</div>
</body>
</html>
效果如下：
本例使用三种方式调节按钮的宽度：
- 利用按钮标题的长度控制按钮的宽度；
- 通过增设按钮图标来增加按钮宽度；
- 通过直接修改CSS来修改按钮宽度
自定义样式vs分栏布局
- 灵活度：自定义样式灵活度高，可按照自己的喜好设计各元素的尺寸；分栏布局灵活度低，仅能将元素以一定的规律进行排列；
- 整齐度：自定义样式整齐度低；分栏布局高；
- 屏幕适应性：自定义样式屏幕适应性低，当屏幕空间被占满后自动换行；分栏布局屏幕适应性高，具有较好的屏幕自适应功能；
- 适合范围：自定义样式有一定秩序但总体布局紊乱，如全尺寸键盘、瀑布流的结构等；分栏布局有整齐的网状结构，如表格、棋盘等。
通过这些对比可以看出，分栏布局与自定义样式分别有着自己的适应领域，作为开发者，需要根据自己的需求来决定到底应该使用哪一种方法。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)