Chinaunix首页 | 论坛 | 博客

15859020900的ChinaUnix博客

首页　| 　博文目录　| 　关于我

15859020900

  • 博客访问： 76969
  • 博文数量： 59
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 600
  • 用 户 组： 普通用户
  • 注册时间： 2016-08-22 10:54
文章分类

全部博文（59）

文章存档

2016年（59）

我的朋友
最近访客
推荐博文
HTML5移动开发之路（47）——jquery mobile基本的页面框架

分类： HTML5

2016-11-17 14:38:03

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（47）——jquery mobile基本的页面框架

一、单容器页面结构

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <title>Jquery mobile 基本页面框架title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,initial-scale=1">  
  7. <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>  
  8. <script src="js/jquery.js" type="text/javascript">script>  
  9. <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript">script>  
  10. head>  
  11. <body>  
  12.     <div data-role="page">  
  13.         <div data-role="header">  
  14.             <h1>标题h1>  
  15.         div>  
  16.         <div data-role="content">  
  17.             <p>内容部分p>  
  18.         div>  
  19.         <div data-role="footer">  
  20.             <h4>页脚h4>  
  21.         div>  
  22.     div>  
  23. body>  
  24. html>  

说明：设置浏览器的缩放宽度与等级，可以使页面的宽度与移动设备的屏幕宽度相同。

 

二、多容器页面结构

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <title>Jquery mobile 基本页面框架title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,initial-scale=1">  
  7. <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>  
  8. <script src="js/jquery.js" type="text/javascript">script>  
  9. <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript">script>  
  10. head>  
  11. <body>  
  12.     <div data-role="page" id="p1">  
  13.         <div data-role="header">  
  14.             <h1>标题h1>  
  15.         div>  
  16.         <div data-role="content">  
  17.             <p>内容部分p>  
  18.             <a href="#p2">下一页a>  
  19.         div>  
  20.         <div data-role="footer">  
  21.             <h4>页脚h4>  
  22.         div>  
  23.     div>  
  24.     <div data-role="page" id="p2" data-add-back-btn="true">  
  25.         <div data-role="header">  
  26.             <h1>标题h1>  
  27.         div>  
  28.         <div data-role="content">  
  29.             <p>内容部分p>  
  30.         div>  
  31.         <div data-role="footer">  
  32.             <h4>页脚h4>  
  33.         div>  
  34.     div>  
  35. body>  
  36. html>  

说明：data-add-back-btn属性表示是否在容器的左上角添加一个“回退”按钮，默认值为false.

 

另外给元素添加data-rel属性也可以实现回退。

三、外部页面链接切换

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <title>Jquery mobile 基本页面框架title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,initial-scale=1">  
  7. <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>  
  8. <script src="js/jquery.js" type="text/javascript">script>  
  9. <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript">script>  
  10. head>  
  11. <body>  
  12.     <div data-role="page" id="p1">  
  13.         <div data-role="header">  
  14.             <h1>标题h1>  
  15.         div>  
  16.         <div data-role="content">  
  17.             <p>内容部分p>  
  18.             <a href="#p2">下一页a>  
  19.         div>  
  20.         <div data-role="footer">  
  21.             <h4>页脚h4>  
  22.         div>  
  23.     div>  
  24.     <div data-role="page" id="p2" data-add-back-btn="true">  
  25.         <div data-role="header">  
  26.             <h1>标题h1>  
  27.         div>  
  28.         <div data-role="content">  
  29.             <em style="float:right;padding-right:5px">  
  30.                 <a href="about.htm">访问外部页面a>  
  31.             em>  
  32.         div>  
  33.         <div data-role="footer">  
  34.             <h4>页脚h4>  
  35.         div>  
  36.     div>  
  37. body>  
  38. html>  
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. >   
  2. <html>  
  3. <head>  
  4. <title>Jquery mobile 基本页面框架title>  
  5. <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width,initial-scale=1">  
  7. <link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>  
  8. <script src="js/jquery.js" type="text/javascript">script>  
  9. <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript">script>  
  10. head>  
  11. <body>  
  12.     <div data-role="page" data-add-back-btn="true">  
  13.         <div data-role="header">  
  14.             <h1>外部页面h1>  
  15.         div>  
  16.         <div data-role="content">  
  17.             你好，感谢你的关注  
  18.         div>  
  19.         <div data-role="footer">  
  20.             <h1>h1>  
  21.         div>  
  22.     div>  
  23. body>  
  24. html>  

如果不想以ajax方式打开页面，在链接元素中添加rel="external"

 

四、预加载与页面缓存

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <div data-role="content">  
  2.     <em style="float:right;padding-right:5px">  
  3.         <a href="about.htm" data-prefetch="true">访问外部页面a>  
  4.     em>  
  5. div>  

使用页面缓存功能将会使DOM内容变大，一旦选择了缓存功能，要及时清理。

 

将page容器的data-dom-cache设置为true,可以将该页面的内容注入文档的缓存中，或者通过js代码设置一个全局的属性，代码如下：

[javascript] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $(function(){  
  2.     $.mobile.page.prototype.options.domCache = true;  
  3. })  
阅读(973) | 评论(0) | 转发(0) |
0

上一篇：HTML5移动开发之路（46）——汇率计算器【2】

下一篇：HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6