jQuery mobile - 具有多个内部页面的面板 [英] jQuery mobile - Panels with multiple internal pages
问题描述
我想要能够使用滑动面板，当用户从滑动面板中选择一个选项时，它将加载在同一html文件内部找到的新页面。到目前为止，我有这个：
I want to be able to use a sliding panel, and when the user selects an option from within the sliding panel, it to load a new page found internally within same html file. So far, I have this:
<!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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("body").pagecontainer("change", "#Home");;
});
function navigate(page){
//$.mobile.changePage("#" + page);
$("body").pagecontainer("change", "#" + page);
}
</script>
</head>
<body>
<div data-role="page" id="Bio">
<div data-role="panel" id="bioPanel">
<ul id="menu">
<li onclick="navigate('Bio')">Bio</li>
<li onclick="navigate('Media')">Media</li>
<li onclick="navigate('Booking')">Booking</li>
</ul>
</div>
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="main" class="ui-content">
<p>Biography</p>
<a href="#bioPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
</div>
<div data-role="footer">
<h1>My Site</h1>
</div>
</div>
<div data-role="page" id="Media">
<div data-role="panel" id="mediaPanel">
<ul id="menu">
<li onclick="navigate('Bio')">Bio</li>
<li onclick="navigate('Media')">Media</li>
<li onclick="navigate('Booking')">Booking</li>
</ul>
</div>
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="main" class="ui-content">
<p>Media</p>
<a href="#mediaPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
</div>
<div data-role="footer">
<h1>My Site</h1>
</div>
</div>
<div data-role="page" id="Booking">
<div data-role="panel" id="bookingPanel">
<ul id="menu">
<li onclick="navigate('Bio')">Bio</li>
<li onclick="navigate('Media')">Media</li>
<li onclick="navigate('Booking')">Booking</li>
</ul>
</div>
<div data-role="header">
<h1>My Site</h1>
</div>
<div data-role="main" class="ui-content">
<p>Booking</p>
<a href="#bookingPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
</div>
<div data-role="footer">
<h1>My Site</h1>
</div>
</div>
</body>
</html>
这段代码可以工作，但你会注意到我必须在每次迭代中包含幻灯片菜单。我想能够只写一次面板部分，并在每个页面上打开。这是可能的吗？
This code works, but as you'll notice I have to include the slide menu in each iteration. I'd like to be able to write the panel portion just once and have it open on each page. Is that possible?
我已经尝试过jQuery.load（）和某些原因它不会工作，尽管它在同一台服务器上，所以应该' t是一个跨域问题。这可能是我使用的GoDaddy服务器的问题，但我不能确定。
I've already tried jQuery.load() and for some reason it won't work, despite it being on the same server so there shouldn't be a cross-domain issue. It could be an issue with the GoDaddy server I'm using, but I can't be sure.
我想能够做同样的事情页眉和页脚，因为他们也不会在页面之间切换。
I'd like to be able to do the same thing with the header and footer too, as they won't be changing across pages either.
推荐答案
您可以使用外部面板执行此操作： http://demos.jquerymobile.com/1.4.5/panel-external/
You can use an external panel for this: http://demos.jquerymobile.com/1.4.5/panel-external/
将面板从个别页面中拉出，并将其放置为body元素的子项。确保将数据主题应用到它，因为它没有容器来继承主题。
Pull your panel out of the individual pages and place it as a child of the body element. Make sure you apply a data-theme to it, as it has no container to inherit themes from.
<div data-role="panel" id="bioPanel" data-theme="a">
<ul id="menu">
<li><a href="#Bio">Bio</a>
</li>
<li><a href="#Media">Media</a>
</li>
<li><a href="#Booking">Booking</a>
</li>
</ul>
</div>
然后在文档准备好时，将小部件初始化为面板，并初始化其中的列表视图：
Then on document ready, initialize the widget as a panel and also initialize the listview within it:
$(function () {
$("body>[data-role='panel']").panel().find("ul").listview();
});
这是一个工作的 DEMO
Here is a working DEMO
这篇关于jQuery mobile - 具有多个内部页面的面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
