【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战
2024-06-06 13:13:06
文章目录
- 8. JQuery Mobile界面综合实战
- 8.1 清爽的电子书阅读器
- 8.2 简单的计算器
- 8.3 移动BBS模板
- 8.4 基于JQuery Mobile的简单记事本
- 8.5 基于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分栏布局
- 灵活度：自定义样式灵活度高，可按照自己的喜好设计各元素的尺寸；分栏布局灵活度低，仅能将元素以一定的规律进行排列；
- 整齐度：自定义样式整齐度低；分栏布局高；
- 屏幕适应性：自定义样式屏幕适应性低，当屏幕空间被占满后自动换行；分栏布局屏幕适应性高，具有较好的屏幕自适应功能；
- 适合范围：自定义样式有一定秩序但总体布局紊乱，如全尺寸键盘、瀑布流的结构等；分栏布局有整齐的网状结构，如表格、棋盘等。
通过这些对比可以看出，分栏布局与自定义样式分别有着自己的适应领域，作为开发者，需要根据自己的需求来决定到底应该使用哪一种方法。
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战相关推荐
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十五) —— jQuery Mobile 与响应式
jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的"触摸屏优化"外,另外一个最直接的特点就是"响应式设计&qu ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十四) —— jQuery Mobile 方法下
本文承接上文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 方法上>,继续说明 jQuery Mobile 的方法,这部分内容主 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...
- 小白都能学会的Python基础 第五讲：综合实战1 - 商业实战之德勤笔试题
1.华小智系列 - Python基础(案例版) <Python基础>目录 第五讲:综合实战1 - 商业实战之德勤笔试题 1.德勤笔试题分析 2.笔试题讲解 3.课程相关资源 第五讲:综合实 ...
- Windows Mobile引路蜂地图开发方案介绍
1.引路蜂对不同开发者开发平台的支持 引路蜂平台开发支持:Java ME.LWUIT.Blackberry .Android.iOS.Windows Phone.桌面平台(Java SE, .Net ...
- [零基础学JAVA]Java SE实战开发-37.MIS信息管理系统实战开发[JDBC](1)
MIS信息管理系统实战开发之使用MySQL实现保存 开发背景 ID.姓名.年龄为公共信息,而学生有成绩,工人有工资 定义一个抽象类Person(ID.姓名.年龄),学生是其子类,有成绩,工人是其子类有 ...
- 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...
- 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
文章目录 6. JQuery Mobile的布局 6.1 改良后的QQ登录界面 6.2 一种简洁的通讯录设计 6.3 完美实现九宫格 6.4 可以折叠的QQ好友列表 6.5 展开图标的设置 6.6 两 ...
- 分享一个超棒的在线jQuery mobile原型设计开发工具 - codiqa
在线演示 本地下载 今天我们分享一个超棒的在线jQuery mobile原型设计开发工具:Codiqa,这个在线设计工具能够帮助我们快速的使用拖拽的方式来构建一个jQuery mobile的web应 ...
最新文章
- 干货！机器学习中，如何优化数据性能
- [转载]freeSwitch基本操作（转载）
- apply_async多进程
- ActiveRecordException: The model attribute ysgl is not exists.
- VTK：循环收缩用法实战
- libevent的水平触发与边缘触发
- 计算机网络--网络层
- C语言程序的语法规范,C语言程序结构和语法规则
- 用js判断ie版本，ie11被识别为ie7
- mysql数据库导出txt文件_mysql数据库导出表数据 为.txt文件
- java 二维向量_二维向量的叉积是标量还是向量？
- php 图片上加文字,PHP语言之给图片添加文字(支持中文)//PHP函数
- 2022公司邮箱域名如何申请？公司邮箱域名怎么设置？
- MAC:更新失败无法进系统的解决方案
- 计算机鼠标与键盘基本知识,电脑鼠标和键盘的基础设置方法
- java学习day01-初识java
- Redis第六讲 Redis之List底层数据结构实现
- P3386 【模板】二分图匹配（匈牙利模板）
- 聚苯乙烯负载酸性离子液体(P[Vim-PS][HSO4])|活性炭(AC)负载酸性离子液体[Hmim-BS][HSO4]齐岳
- Vagrant安装到其它盘（除C）