小强的HTML5移动开发之路（23）—— jQuery Mobile入门
一、下载jQuery Mobile
点击Download
下载如下zip包
下载成功后如下图
解压目录如图：
点击index.html进入demo主页，这里面有很多例子。
二、创建JQuery Mobile的Helloword
1、创建demo
2、新建站点
3、站点建立成功后将生成的demo拷贝到站点中
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
</head>
<body> <div data-role="page" id="page">
<div data-role="header">
<h1>第 1 页</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">第 2 页</a></li>
<li><a href="#page3">第 3 页</a></li>
<li><a href="#page4">第 4 页</a></li>
</ul>
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div> <div data-role="page" id="page2">
<div data-role="header">
<h1>第 2 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div> <div data-role="page" id="page3">
<div data-role="header">
<h1>第 3 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div> <div data-role="page" id="page4">
<div data-role="header">
<h1>第 4 页</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页面脚注</h4>
</div>
</div> </body>
</html>在Chrome浏览器中运行结果：
打包成apk在真实手机上的效果如下：
| Java学习交流群142979499 |  |
| Android学习交流群311273384 | |
小强的HTML5移动开发之路（23）—— jQuery Mobile入门的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...
- 小强的HTML5移动开发之路（21）—— PhoneGap
一.PhoneGap是什么 PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架.它使开发者能够利用 iPhone,Android, ...
- 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...
随机推荐
- 关于ES6(ES2015)的知识点详细总结
ECMAScript6 ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言,现在主流浏览器使用的是ECMAScript5. http://ba ...
- 对于学习apache软件基金会顶级项目源码的一点思路（转）
ASF的开源项目,为软件行业贡献了太多好的产品和软件思维.学习ASF的项目源码能很大的提升自身的能力.程序运行在服务器上的流程:执行启动脚本(start.sh) -> 指向程序的主方法 -> ...
- C++ 多线程阻塞 （多线程同步）（MsgWaitForMultipleObjects）（连着消息一起控制，牛）
在主线程定要禁止使用waitforsingleobject(),原因是会阻塞主线程的消息循环,所以必须使用另一种 MsgWaitForMultipleObjects,即可以让消息通过,下面就是一个基于 ...
- javascript的组成
ECMAScript:(3/5/6/7) 它是JS语言的标准,规定了JS的编程语法和基础核心知识. DOM:document object model 文档对象模型,提供给JS很多的操作页面中元素的属 ...
- （转）高强度密码管理软件KeePass使用详解
转自:http://www.ruancan.com/ 算下来,你接触电脑有多久了?从第一次上网,到今天,你一共申请了多少个网站或者软件的帐号?相信这是一个几乎无人能够回答的问题. 无数人面临着这两个问 ...
- Day1：注释
一.注释方法 1.单行注释用#,本行#号后的内容为注释内容,不执行 2.多行用三个单引号或三个双引号标注,中间内容为注释,不执行 二.其他相关内容 三个引号中的内容还可以当作字符串赋值给变量,可以同时 ...
- 安装配置Rancher管理docker
原文:安装配置Rancher管理docker 版权声明:本文为博主原创文章,转载请注明地址http://blog.csdn.net/tianyaleixiaowu. https://blog.csdn ...
- eclipse在线安装超级炫酷黑色主题
Darkest Dark Theme插件: 点击菜单栏 Help --> Eclipse Marketplace,输出Darkest Dark Theme进行搜索,如下图: 本主题有17套编辑器 ...
- ASCII码的问题
数字0在ASCII的不同进制下表示:
- c#之mysql四种带事务批量插入
前言 对于像我这样的业务程序员开发一些表单内容是家常便饭的事情,说道表单 我们都避免不了多行内容的提交,多行内容保存,自然要用到数据库,如果循环打扰我数据库,数据库也会觉得很累,从而增加数据库服务器压 ...