jquerymobile-3 page title和网页预加载

于 2013-11-06 15:19:47 发布
阅读量1.3k 收藏
点赞数
分类专栏： 手持html5phone Gap JQuery moblie 文章标签： html5 移动浏览器 jquery mobile

使用jquerymobile的时候有时候我们会在同一个页面中写多个页面，但是在切换的时候，在浏览器显示的title总是同一个。我们需要不同的页面显示不同的title，这时候我们可以在data-role后面添加data-title属性，设置自己需要的title内容。下面一个例子代码：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1">    
  5. <title>Multi Page Example (2)</title>   
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.   
  13. <div data-role="page" id="homePage">  
  14.     <div data-role="header">Welcome</div>  
  15.     <div data-role="content">  
  16.     <p>  
  17.     Welcome to our first mobile web site. It's going to be the best site you've ever seen.   
  18.     Once we get some content. And a business plan. But the hard part is done!  
  19.     </p>  
  20.     <p>  
  21.         You can also <a href="#aboutPage">learn more</a> about Megacorp.  
  22.     </p>  
  23.     </div>  
  24.       
  25.     <div data-role="footer">  
  26.     <i>Copyright Megacorp © 2012</i>  
  27.     </div>      
  28. </div>  
  29.   
  30. <div data-role="page" id="aboutPage" data-title="About Megacorp">  
  31.     <div data-role="header">About Megacorp</div>  
  32.     <div data-role="content">  
  33.     <p>  
  34.     This text talks about Megacorp and how interesting it is. Most likely though you want to  
  35.     <a href="#homePage">return</a> to the home page.  
  36.     </p>  
  37.     </div>  
  38.     <div data-role="footer">  
  39.     <i>Copyright Megacorp © 2012</i>  
  40.     </div>  
  41.       
  42. </div>  
  43. </body>  
  44. </html>  
在我们点击learn more链接后，跳转了一个页面，同时title会改变为About Megacorp。


在某些情况下，我们一个页面中的某个链接，被点击的可能性很大，这时候我们如果能够提前取得这个页面的数据，在用户点击的时候马上就显示出来，这样会给用户一个很好的体验。jquerymobile也考虑了这样的情况，在我们使用<a>标签加载一个外部页面的时候，我们添加一个属性data-prefetch属性。我们可以在上面的代码中添加一个如下的链接：

[html] view plain copy
  1. Find out about our wonderful <a href="products.html" data-prefetch>products</a>.  

products.html如下：
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1">    
  5. <title>Products</title>   
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  7. <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>  
  8. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  9. </head>  
  10.   
  11. <body>  
  12.   
  13. <div data-role="page" id="productsPage">  
  14.   
  15.     <div data-role="header">Products</div>  
  16.   
  17.     <div data-role="content">  
  18.     <p>  
  19.         Our products include:  
  20.     </p>  
  21.     <ul>  
  22.         <li>Alpha Series</li>  
  23.         <li>Beta Series</li>  
  24.         <li>Gamma Series</li>  
  25.     </ul>   
  26.     </div>  
  27.       
  28.       
  29. </div>  
  30.   
  31. </body>  
  32. </html>  

我们打开我们修改的上一个页面的时候，jquerymobile会自动将products.html的内容加载到第一个页面的最后，这个读者可以自己在浏览器中打开，然后查看源文件就可以看见。
魔都
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值