JQuery mobile 2 多个页面一个文件

在jquerymobile中我们可以将多个页面写到同一个html中,只要我们按照jquerymobile的要求加上对应的属性,jquerymobile会为我们将他们转变成几个分开的页面,每次显示的时候默认只会显示第一个。下面先看代码然后再解释:


[html] view plain copy
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>data-role="page"</title>  
  6. <meta name="viewport" content="width=device-width,initial-scale=1" />   
  7. <link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>  
  8. <script src="jqm/jquery-1.8.2.min.js"></script>  
  9. <script src="jqm/jquery.mobile-1.2.0.min.js"></script>  
  10. </head>  
  11.   
  12. <body>  
  13. <div data-role="page" id="home">  
  14.     <div data-role="header">  
  15.         <h1>header</h1>  
  16.     </div>  
  17.     <div data-role="content" id="homecontent">  
  18.         this is home content!!  
  19.         <a href="#ohter">Other page</a><a href="helloJQM.html" data-ajax="false">helloJQM.html</a>  
  20.     </div>  
  21.     <div data-role="footer" id="footer">  
  22.         <h4> Footer</h4>  
  23.     </div>  
  24. </div>  
  25. <div data-role="page" id="ohter">  
  26.     <div data-role="header" id="other_header">  
  27.         <h1>other_header</h1>  
  28.     </div>  
  29.     <div data-role="content" id="other_content">  
  30.         this is other content!!  
  31.         <a href="#home">Home page</a>  
  32.     </div>  
  33.     <div data-role="footer" id="other_footer">  
  34.         <h4>Other footer</h4>  
  35.     </div>  
  36. </div>  
  37. </body>  
  38. </html>  

在上面代码中我们总共包含了两个页面,分别使用data-role来表示。在jquerymobile中使用data-role=“page”将会创建一个页面,一般会给它一个id值,在这些页面切换的时候会用到这个id值。

在jquerymobile中使用“data-”开头的属性去指定一些jquerymobile中特有的东西,我们使用的data-role只是其中的一个。这里我们使用的是data-role=“page”,jquerymobile将把它处理成为一个页面。

我们可以使用a标签,然后href使用paga的id就可以切换到其他的页面。这里有一个属性data-ajax,默认为true,表示我们是否使用ajax来加载新的网页,在jquerymobile中默认使用的是ajax方式去加载页面,如果将这个属性设置为false,将不会使用ajax方式加载,直接就是进入这个网页。可能大家感觉没什么不同,但是如果我们将这个属性设置为false后,在helloJQM.html(上一篇文章中的代码)将开始的对jquerymobile的引用去掉,显示的页面将不会被jquerymobile处理,如果设置成为true,则会进行处理。这里的原因就是加载方式,使用ajax加载jquerymobile还起作用,如果使用普通跳转,新跳转的网页中没有jquerymobile文件,将不会起作用。



你可能感兴趣的:(jquery,html5,mobile,HTML5技术,移动浏览器)