当前位置：Gxlcms > html代码 > 小强的HTML5移动开发之路（47）——jquerymobile基本的页面框架

小强的HTML5移动开发之路（47）——jquerymobile基本的页面框架

时间：2021-07-01 10:21:17 帮助过：33人阅读

一、单容器页面结构


  1. <!DOCTYPE html> 
  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. <p data-role="page">
  13.     
  14. <p data-role="header">
  15.         
  16. <h1>标题</h1>
  17.         </p>
  18.         <p data-role="content">
  19.         
  20. <p>内容部分</p>
  21.         </p>
  22.         <p data-role="footer">
  23.         
  24. <h4>页脚</h4>
  25.         </p>
  26.     </p>
  27. </body>
  28. </html>

说明：<meta name="viewport" content="width=device-width,initial-scale=1">设置浏览器的缩放宽度与等级，可以使页面的宽度与移动设备的屏幕宽度相同。

二、多容器页面结构

  1. <!DOCTYPE html> 
  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. <p data-role="page" id="p1">
  13.     
  14. <p data-role="header">
  15.         
  16. <h1>标题</h1>
  17.         </p>
  18.         <p data-role="content">
  19.         
  20. <p>内容部分</p>
  21.             <a href="#p2">下一页</a>
  22.         </p>
  23.         <p data-role="footer">
  24.         
  25. <h4>页脚</h4>
  26.         </p>
  27.     </p>
  28.    
  29. <p data-role="page" id="p2" data-add-back-btn="true">
  30.     
  31. <p data-role="header">
  32.         
  33. <h1>标题</h1>
  34.         </p>
  35.         <p data-role="content">
  36.         
  37. <p>内容部分</p>
  38.         </p>
  39.         <p data-role="footer">
  40.         
  41. <h4>页脚</h4>
  42.         </p>
  43.     </p>
  44. </body>
  45. </html>

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

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

三、外部页面链接切换


  1. <!DOCTYPE html> 
  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. <p data-role="page" id="p1">
  13.     
  14. <p data-role="header">
  15.         
  16. <h1>标题</h1>
  17.         </p>
  18.         <p data-role="content">
  19.         
  20. <p>内容部分</p>
  21.             <a href="#p2">下一页</a>
  22.         </p>
  23.         <p data-role="footer">
  24.         
  25. <h4>页脚</h4>
  26.         </p>
  27.     </p>
  28.    
  29. <p data-role="page" id="p2" data-add-back-btn="true">
  30.     
  31. <p data-role="header">
  32.         
  33. <h1>标题</h1>
  34.         </p>
  35.         <p data-role="content">
  36.         
  37. <em style="float:right;padding-right:5px">
  38.             
  39. <a href="about.htm">访问外部页面</a>
  40.             </em>
  41.         </p>
  42.         <p data-role="footer">
  43.         
  44. <h4>页脚</h4>
  45.         </p>
  46.     </p>
  47. </body>
  48. </html>
  1. <!DOCTYPE html> 
  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. <p data-role="page" data-add-back-btn="true">
  13.     
  14. <p data-role="header">
  15.         
  16. <h1>外部页面</h1>
  17.         </p>
  18.         <p data-role="content">
  19.         
  20. 你好，感谢你的关注
  21.         </p>
  22.         <p data-role="footer">
  23.         
  24. <h1></h1>
  25.         </p>
  26.     </p>
  27. </body>
  28. </html>

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

四、预加载与页面缓存


  1.         <p data-role="content">
  2.         
  3. <em style="float:right;padding-right:5px">
  4.             
  5. <a href="about.htm" data-prefetch="true">访问外部页面</a>
  6.             </em>
  7.         </p>

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

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

  1. $(function(){
  2.     $.mobile.page.prototype.options.domCache = true;
  3. })


以上就是小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！