Chinaunix首页 | 论坛 | 博客
  • 博客访问: 72583
  • 博文数量: 59
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 600
  • 用 户 组: 普通用户
  • 注册时间: 2016-08-22 10:54
文章分类
文章存档

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] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery Mobile Web 应用程序title>  
  6. <link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>  
  7. <script src="jquery.js" type="text/javascript">script>  
  8. <script src="jquery.mobile-1.3.2.min.js" type="text/javascript">script>  
  9. head>   
  10. <body>   
  11.   
  12. <div data-role="page" id="page">  
  13.     <div data-role="header">  
  14.         <h1>第 1 页h1>  
  15.     div>  
  16.     <div data-role="content">   
  17.         <ul data-role="listview">  
  18.             <li><href="#page2">第 2 页a>li>  
  19.             <li><href="#page3">第 3 页a>li>  
  20.             <li><href="#page4">第 4 页a>li>  
  21.         ul>       
  22.     div>  
  23.     <div data-role="footer">  
  24.         <h4>页面脚注h4>  
  25.     div>  
  26. div>  
  27.   
  28. <div data-role="page" id="page2">  
  29.     <div data-role="header">  
  30.         <h1>第 2 页h1>  
  31.     div>  
  32.     <div data-role="content">   
  33.         内容        
  34.     div>  
  35.     <div data-role="footer">  
  36.         <h4>页面脚注h4>  
  37.     div>  
  38. div>  
  39.   
  40. <div data-role="page" id="page3">  
  41.     <div data-role="header">  
  42.         <h1>第 3 页h1>  
  43.     div>  
  44.     <div data-role="content">   
  45.         内容        
  46.     div>  
  47.     <div data-role="footer">  
  48.         <h4>页面脚注h4>  
  49.     div>  
  50. div>  
  51.   
  52. <div data-role="page" id="page4">  
  53.     <div data-role="header">  
  54.         <h1>第 4 页h1>  
  55.     div>  
  56.     <div data-role="content">   
  57.         内容        
  58.     div>  
  59.     <div data-role="footer">  
  60.         <h4>页面脚注h4>  
  61.     div>  
  62. div>  
  63.   
  64. body>  
  65. html>  

在Chrome浏览器中运行结果:

 

打包成apk在真实手机上的效果如下:

两个demo打包下载:

阅读(528) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~