JQuery mobile 在应用程序中创建单个页面
Posted
技术标签:
【中文标题】JQuery mobile 在应用程序中创建单个页面【英文标题】：JQuery mobile creates a single page in the app 【发布时间】：2015-08-05 12:20:09 【问题描述】：一个非常标准的例子，这段代码放在body标签之间时，会在应用程序的一个页面上显示所有页面，而不是两个不同的页面相互关联。
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
【问题讨论】：
有什么问题？ 问题是什么？ 【参考方案1】：您需要将 jQuery 文件添加到您的页面。
工作示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
【讨论】：
谢谢，在查看我之前的代码时，我发现脚本标签不完整。 没问题，请标记为正确答案。以上是关于JQuery mobile 在应用程序中创建单个页面的主要内容，如果未能解决你的问题，请参考以下文章