2016年(59)
分类: Html/Css
2016-10-27 10:16:59
本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(23)—— jQuery Mobile入门
一、下载jQuery Mobile
下载地址:
点击Download
下载如下zip包
下载成功后如下图
解压目录如图:
点击index.html进入demo主页,这里面有很多例子。
二、创建JQuery Mobile的Helloword
1、创建demo
2、新建站点
3、站点建立成功后将生成的demo拷贝到站点中
index.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在真实手机上的效果如下:
两个demo打包下载: