小强的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 ...
随机推荐
- golang 获取环境信息
os.Environ() os.Getenv("TMP")
- 动态规划例子：Maximal Square
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...
- grep 过滤器基础
grep是一种文本搜索工具,能使用正则表达式搜索文本,并把匹配的行显示出来. grep 选项 模式 文件 grep "bash" /etc/passwd 将/etc/passwd下 ...
- Centos7安装.Net Core 2.2环境以及部署.Net Core MVC程序(Apache+Jexus环境)
原文:Centos7安装.Net Core 2.2环境以及部署.Net Core MVC程序(Apache+Jexus环境) 1.双11抢购***VPS.配置如下: CPU:2 核 内存:2048 M ...
- amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- stm32关于.o的错误
是因为没有加入官方库的原因,而且编译出错之后不能跳转到那里.
- Ruby（面向对象程序设计的脚本语言）入门
Ruby是一种为简单快捷的面向对象编程(面向对象程序设计)而创的脚本语言. 简单介绍 Ruby 是开源的,在Web上免费提供,但须要一个许可证. Ruby 是一种通用的.解释的编程语言. Ruby 是 ...
- 在云服务器上(CentOS)上安装Node
今天手抖,买了台云服务器,本人对服务器啥的基本不懂,linux命令基本靠度娘,所以连装个node环境都历经坎坷,搞了一下午终于搞好了,记录一下: 第一步:当然是先登录服务器了,打开命令行窗口,输入: ...
- TableView相关属性
//是否要显示分隔线 tableView.separatorStyle = UITableViewCellSeparatorStyleNone; tableView.separatorStyle = ...
- zeros() 函数——MATLAB
zeros函数——生成零矩阵 ones函数——生成全1阵 [zeros的使用方法] B=zeros(n):生成n×n全零阵. B=zeros(m,n):生成m×n全零阵. B=zeros([m n]) ...