1、基于 HTML5 和 jQuery Mobile 的简单记事本的实现【摘要】随着智能手机与平板电脑持有量的迅速增长以及移动网络信号的广泛覆盖，人们对移动应用的需求也日益强烈。本文通过 HTML5和 jQuery Mobile 来实现简单记事本的前端界面，让读者了解这种快速、高效、灵活的移动应用开发模式。 【关键词】HTML5 jQuery Mobile 移动应用 随着智能移动终端技术，无线互联网的发展和 WiFi 信号的大面积覆盖，智能手机与平板电脑持有量的迅速增长，其普及趋势越来越快，在计算机上能完成的应用智能手机也能实现。随着网络技术发展，3G 技术的应用到 4G 技术的应用，已使得人们已
2、不再是局限于台式机的使用，手机的移动便利此时被充分的发挥出来，在许多公共场合，随处都可以看到许多用户使用手机上网，大家越来越喜欢使用智能移动终端设备上网、购物支付、查资料、内容分享、打车导航等，随时随地方便的促进了移动应用与人们日常生活的融合。根据预测，在未来几年内，移动设备产生的网络流量甚至将超越传统桌面电脑所产生的网络流量。 一、开发工具介绍 （一）HTML5 HTML 5 是近十年来 Web 开发标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的新使命是将 Web 带入一个成熟的应用平台，在 HTML 5 平台上，视频，音频，图象，动画，以及同电脑的交
3、互都被标准化。除了原先的 DOM 接口，HTML5 增加了更多 API，如：本地音频视频播放、动画、地理信息、硬件加速、本地运行（即使在Internet 连接中断之后） 、本地存储等。HTML5 引入了新的 HTML 元素和属性，有的是传统通用元素的语义化版本，如取代 div 元素的nav，footer 等元素，也有一些全新的元素，如 audio，video。一些在HTML4 中不被推荐使用的元素，如 font 和 center 将被弃用。 （二）jQuery Mobile jquery mobile 是一个统一的在 html5 的基础上能够快速建立一个轻便的智能手机和平板的 web 框架，包
4、括页面、对话框、工具栏、不同类型的列表视图，各种表单元素和按钮等。jQuery Mobile 构建于 jQuery内核之上，因此您可以访问关键设备，包括 HTML 和 XML 文档对象模型（DOM）的遍历操作；事件处理；使用 Ajax 服务器通信；以及 Web 页面的动画和图像效果。jQuery Mobile 基本特性包括： （1）一般简单性和灵活性：主要使用标记驱开发动页面，无需或仅需很少 JavaScript。使用高级 JavaScript 和事件。将应用程序分解成多个页面。 （2）逐步强化和全面兼容。尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScri
5、pt，但并非所有移动设备都提供这样的支持。jQuery Mobile 的理念是同时支持高端和低端设备，比如那些不支持JavaScript 的设备，尽量提供最好的体验。 （3）支持触摸屏输入和其他输入方法。jQuery Mobile 为不同输入方法和事件提供支持：触摸屏、鼠标和基于光标焦点的用户输入。 （4）轻量级和模块化。该框架属于轻量级，拥有一个大小（版本1.0.1 进行了缩小和压缩）为 24KB 的 JavaScript 库，7KB 的 CSS 以及一些图标。 （5）主题。该框架还提供一个主题系统，允许您定义自己的应用程序样式。有了这个新的 ThemeRoller 应用程序，您就可以轻松地
6、创建您自己的主题。 二、关键技术 （一）引入 jQuery Mobile 与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js 和*.css 文件直接包含到您的 web 页面中即可。这样，JQM的功能就好像被放到了您的指尖，供您随时使用。从 jQuery M下载 jQuery Mobile 库，将其放置于网页的同一目录下。 （二）设备匹配技术 不同厂家、型号的移动设备在屏幕尺寸、分辨率、键盘类型、媒体摄录能力等方面存在巨大的差异。为了兼容不同设备的浏览访问，输出合适的页面布局，HTML5 提供了设备适配方案，让移动浏览器知道屏幕大小，如下设置页面宽度： （三）j
7、Query Mobile 页面构造 一个典型的 jQuery Mobile 页面有 3 部分：页眉、内容和页脚部分，如图 1 所示： 图 1 页面构造 （四）列表视图 列表视图是移动应用程序最重的 UI 元素之一。jQuery Mobile 提供一组丰富的列表视图元素，包括基础、嵌套、分割按钮、编号、计数泡泡和图标列表。记事本列表如图 2 所示。 图 2 记事本列表 三、设计实现 该记事本实现了首页显示新建的记事本列表项，通过建立自己的记事本，在多个移动浏览器进行测试，都能正常运行，从测试结果看，运行流畅，界面简洁，数据稳定，能很好满足学员对性能和外观的需求，下图为实际测试效果图。 图 3 记事本截面图 四、结束语 这是一件幸事。 本文介绍了基于 HTML5 和 jQuery Mobile 的简单记事本前端界面的实现，意在展示通过 HTML5 和 jQuery Mobile 进行移动应用开发的方法，这个应用还有很多不完善的敌方，比如没有实现记事本的存储等。无论如何，HTML 5 是不可阻挡的技术发展趋势，它只会使我们未来使用互联网的方式越来越方便，越来越贴心。虽然现在还没有形式正式的标准，但从各个浏览器厂家的积极态度可以看出，无论标准何时被审核通过，都会促使网站建设者逐渐向 HTML 5 标准靠拢。
