jQuery Molibe (三) 多页面跳转 page title 设置

最新推荐文章于 2023-12-08 11:18:50 发布

游可

最新推荐文章于 2023-12-08 11:18:50 发布

阅读量1.8k

点赞数

分类专栏： jQuery Mobile 文章标签： jQuery Mobile

本文链接：https://blog.csdn.net/bao990423420/article/details/13999137

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素属性“data-role”值为“page”的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的Id号属性。页面加载时，以堆栈的方式同时加载；容器访问时，以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时，jQuery Mobile 将在页面文档寻找对应Id号的容器，以动画效果切换至该容器中，实现容器间内容的访问：

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8">
	<title>首页标题</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 

<div data-role="page" id="home">
	<div data-role="header">
		<h1>第一个页面</h1>
	</div>

	<div data-role="content">	
		<p>这是首页内容界面</p>
		<a href="#back">详情页面</a>
	</div>
</div>

<div data-role="page" data-add-back-btn="true" id="back" data-title="详情页面标题">
	<div data-role="header">
		<h1>第二个页面</h1>
	</div>

	<div data-role="content">	
		
        <p>内容界面</p>
		<a href="#home">返回首页</a>

	</div>
</div>

</body>
</html>

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

data-title="详情页面标题"

从第一个容器切换至第二个容器后，如果想要从第二个容器返回第一个容器，有下列两种方法：

在第二个容器中，增加一个<a>元素，通过内部链接“#”加对应“Id”的方式返回第一个容器。

在第二个容器的最外层框架<div>元素中，添加一个“data-add-back-btn”属性。该属性表示是否在容器的左上角增加一个“回退”按钮，默认值为“false”；如果设置为“true”，将出现一个“back”按钮，单击该按钮，回退上一级的页面显示。

说明　如果是在一个页面中，通过“#”加对应“Id”的内部链接方式，可以实现多容器间的切换；但如果不是在一个页面，此方法将失去作用。因为在切换过程中，先需要找到页面，再去锁定对应“Id”容器的内容，而并非直接根据“Id”切换至容器中。