1.导入JqueryMobile
在 http://jquerymobile.com/download/ 中下载最新的JqueryMobile库
在网页中引入jquery.mobile-*.min.css、jquery.mobile-*.min.js。*为JqueryMobile的版本号。还需要引入Jquery
当然也可以直接外链已有的JqueryMobile和Jquery库，如在jquerymobile的下载页面中给出的例子：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
2.写第一个页面
JqueryMobile的页面
<body> <!-- data-role="page" 是在浏览器中显示的页面。 --> <div data-role="page" id="page1" data-fullscreen="true"> <!-- 头部data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮) --> <div data-role="header" data-position="fixed"><!-- data-position=fixed 填充页面 header与footer一致，不然可能在移动端页面出现上下位移差--> <h1>欢迎来到我的移动端网页</h1> </div> <!-- 正文data-role="content" 定义了页面的内容，比如文本， 图片，表单，按钮等。 --> <div data-role="content"><!-- 正文部分--> 厉害吗？<br> <a href="#page2">跳往页面2</a> </div> <!-- 尾部data-role="footer" 用于创建页面底部工具条。 --> <div data-role="footer" data-position="fixed"> <h1>结束了！</h1> </div> </div> </body>
data-*主要来源于html5的各种ui元素
在header、content、footer这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
试着写第一个简单交互页面
<html>
<head>
<title>首页</title>
<link rel="stylesheet" href="jQuery/JqueryMobile/jquery.mobile-1.4.5.min.css" />
<script src="jQuery/jquery-1.11.2.min.js"></script>
<script src="jQuery/JqueryMobile/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-fullscreen="true">
<!-- 头部 -->
<div data-role="header" data-position="fixed">
<h1>欢迎来到我的移动端网页</h1>
</div>
<!-- 正文 -->
<div data-role="content">
厉害吗？<br>
<a href="#page2">跳往页面2</a>
</div>
<!-- 尾部 -->
<div data-role="footer" data-position="fixed">
<h1>结束了！</h1>
</div>
</div>
<div data-role="page" id="page2">
<!-- 头部 -->
<div data-role="header" data-position="fixed">
<h1>欢迎来到我的移动端网页</h1>
</div>
<!-- 正文 -->
<div data-role="content">
厉害！<br>
<a href="#page3" data-rel="dialog">跳往页面3</a><!-- 以弹窗方式的窗口 -->
</div>
<!-- 尾部 -->
<div data-role="footer" data-position="fixed">
<h1>页面2结束了！</h1>
</div>
</div>
<div data-role="page" id="page3">
<!-- 头部 -->
<div data-role="header" data-position="fixed">
<h1>欢迎来到我的移动端网页</h1>
</div>
<!-- 正文 -->
<div data-role="content">
厉害！!<br>
<a href="#page1">跳往页面1</a>
</div>
<!-- 尾部 -->
<div data-role="footer" data-position="fixed">
<h1>页面2结束了！</h1>
</div>
</div>
</body>
</html>
相关推荐
《jQuery读书笔记》 在深入理解JavaScript库的过程中，jQuery无疑是一个绕不开的重要角色。这篇读书笔记将基于jQuery的API文档，结合实际应用，...深入学习和理解jQuery，将有助于提升开发者在前端领域的技能水平。
总的来说，基于HTML5和jQuery Mobile的移动学习APP设计与实现结合了现代Web技术的优势，实现了跨平台、高度互动和离线访问的功能，为移动学习者提供了灵活、便捷的学习工具。这种开发方法不仅降低了开发成本，还提高...
**jQuery学习资料** ...通过深入学习和实践《学习Jquery笔记》，你可以全面掌握jQuery的基本用法和高级技巧，从而在网页开发中更加得心应手。不断探索和理解jQuery的精髓，将有助于提升你的前端开发技能。
这个“jquery笔记.rar”文件很可能是对jQuery库的深入学习和实践总结。 **DOM操作** 1. **选择器**: jQuery提供了一套强大的选择器，如ID选择器（#id）、类选择器（.class）和元素选择器（element），以及组合选择...
**CSS3学习笔记** 在网页设计领域，CSS（层叠样式表）是用于定义HTML或XML（包括SVG、XHTML等）文档呈现的关键技术。随着技术的不断发展，CSS3已经成为了现代网页设计的标准，提供了丰富的样式控制和布局能力。本...
例如，在一个在线课程平台中，用户可以同时打开课程大纲、视频窗口和笔记窗口，提高学习效率。 其次，该插件的弹出窗口具备最大化和最小化功能。最大化功能允许用户快速将窗口扩展到屏幕全尺寸，从而获得更广阔的...
### AgileLite学习笔记 #### 一、基础知识概览 在开始深入探讨AgileLite之前，我们首先需要了解一些基础知识，这些知识将为后续的学习奠定坚实的基础。 ##### CSS基础 CSS（Cascading Style Sheets）是一种样式...
标题中的“jQuery适应手机mobile左右全屏幻灯片切换插件”是指一个专门设计用于移动端设备的jQuery插件，它提供了全屏滑动效果，使用户可以在手机或平板电脑上流畅地浏览内容，如产品展示、图片轮播或介绍。...
本文是根据w3c 学习轨迹，自己研习过程中记录下的笔记，只供自己学习轨迹记录之用，不喜勿喷。 0. 引入库 引入对应的文件： <link rel="stylesheet" href=...
总的来说，`Aratel-Notes` 是一个实用的教程项目，有助于开发者理解如何利用 PhoneGap 结合 Web SQL 和 jQuery Mobile 创建跨平台的移动应用，特别是对于那些希望学习混合开发技术的 Java 程序员来说，这是一个很好...
《jQuery在手机移动端实现点击弹出数字键盘输入的实践与扩展》 在移动互联网时代，网页应用需要适应各种...通过学习和理解这个例子，开发者可以进一步提升在移动设备上的用户体验，为网页应用增添更多互动性和便捷性。
然而，对于大型项目，可能需要考虑引入更轻量级的库，如jQuery Mobile或直接使用原生的触屏事件处理。 总结来说，"jQuery手机端拖动滑块选值代码"项目是一个实用的工具，它展示了如何使用jQuery来创建手机端的交互...
HTML5NoteA note helps me learning HTML5.将按照以下目录进行笔记##目录CSS3基础JavaScript基础HTML5新特性基础响应式布局jQuery基础jQuery UI基础jQuery Mobile基础CreateJS基础
同时，针对移动设备的特点，还有专门的库和框架，如jQuery Mobile和Ionic，它们提供了对触摸事件的支持和移动端特性的封装。 后端开发则涉及服务器端逻辑和数据管理，常见的技术有Node.js、Java的Spring Boot、...
《李炎恢 jQuery 66讲视频教程PDF文件完整版全集》是李炎恢老师精心制作的一套jQuery学习资源，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery以其简洁、高效的语法特性，成为了网页开发中广泛...
《基于MUI+jQuery的手机端考试答题系统详解》 在移动互联网日益普及的今天，...通过学习和研究这个项目，开发者不仅可以掌握MUI和jQuery的使用技巧，还能了解到移动Web开发的一些最佳实践，为自己的项目开发提供借鉴。
在本资源中，我们主要关注的是使用jQuery实现的搜索框输入文字查找表格内容匹配的代码。jQuery是一款广泛使用的JavaScript...对于学习和理解jQuery的事件处理、DOM操作和基本的前端优化策略，这是一个很好的实践案例。
成为管理我的整个笔记文档 ... jQuery Mobile Zepto 时间轴 懒加载 瀑布流 Animate.js Swiper.js 芋头学习 :party_popper:希望可以一直坚持下去 安装 git clone https://github.com/2662419405/vu
- **jQuery Mobile**：这是一个基于jQuery的轻量级移动Web应用程序框架，专门用于创建高性能的触控优化的移动网站和应用。 综上所述，“手机wrap网站爱丽时尚触屏自适应手机WAP女性网站模板”主要涉及到了WAP网站...