jquerymobile-3 page title和网页预提取(Prefetching content)

最新推荐文章于 2021-02-12 16:48:04 发布

孟祥月

最新推荐文章于 2021-02-12 16:48:04 发布

阅读量4.6k

点赞数 7

分类专栏： jquery mobile jquerymobile入门

本文链接：https://blog.csdn.net/mengxiangyue/article/details/8483038

版权

jquery mobile 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

jquerymobile入门

22 篇文章 1 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">	
<title>Multi Page Example (2)</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>

<div data-role="page" id="homePage">
	<div data-role="header">Welcome</div>
	<div data-role="content">
	<p>
	Welcome to our first mobile web site. It's going to be the best site you've ever seen. 
	Once we get some content. And a business plan. But the hard part is done!
	</p>
	<p>
		You can also <a href="#aboutPage">learn more</a> about Megacorp.
	</p>
	</div>
	
	<div data-role="footer">
	<i>Copyright Megacorp © 2012</i>
	</div>	
</div>

<div data-role="page" id="aboutPage" data-title="About Megacorp">
	<div data-role="header">About Megacorp</div>
	<div data-role="content">
	<p>
	This text talks about Megacorp and how interesting it is. Most likely though you want to
	<a href="#homePage">return</a> to the home page.
	</p>
	</div>
	<div data-role="footer">
	<i>Copyright Megacorp © 2012</i>
	</div>
	
</div>
</body>
</html>

在我们点击learn more链接后，跳转了一个页面，同时title会改变为About Megacorp。

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

Find out about our wonderful <a href="products.html" data-prefetch>products</a>.

products.html如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">	
<title>Products</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>

<div data-role="page" id="productsPage">

	<div data-role="header">Products</div>

	<div data-role="content">
	<p>
		Our products include:
	</p>
	<ul>
		<li>Alpha Series</li>
		<li>Beta Series</li>
		<li>Gamma Series</li>
	</ul>	
	</div>
	
	
</div>

</body>
</html>

我们打开我们修改的上一个页面的时候，jquerymobile会自动将products.html的内容加载到第一个页面的最后，这个读者可以自己在浏览器中打开，然后查看源文件就可以看见。

本人也是新学，如果哪里错了，还请指出。