我想简单地创建一个类似jQuery Mobile Demo Docs here 的侧边栏。
我已阅读this question 并不太了解如何实现它。
重点是，我正在使用 jQuery Mobile 为大屏幕制作网站，例如台式机、上网本、平板电脑等。对于移动网站，我将只使用没有侧边栏的网站。
我也尝试过SplitView (code here)，但它有点错误，我认为是因为 jQuery Mobile 讨厌侧边栏...
所以：
谢谢... :D
【问题讨论】：
标签： jquery-mobile sidebar uisplitview
我已经创建了一个示例 jQuery Mobile 应用程序，它的工作原理是这样的 - 当屏幕尺寸很大时，将显示拆分视图布局。否则，可以通过标题中的按钮完成导航。在桌面浏览器中说明这一点，我给了宽度检查为500px。如果宽度> 500 px，拆分视图。如果宽度
这里是源代码：
<!DOCTYPE html>
<html>
<head>
<title>Page</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" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
@media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
@media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2" data-icon="false">Page 2</a>
</li>
<li>
<a href="#page3" data-icon="false">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li class="ui-btn-active" data-icon="false" >
<a href="#page2">Page 2</a>
</li>
<li data-icon="false">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
<a href="#page1">Page 1</a>
</li>
<li data-icon="false">
<a href="#page2">Page 2</a>
</li>
<li data-icon="false" class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
<a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li class="ui-btn-active">
<a href="#page3">Page 3</a>
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
现场演示 - http://pastehtml.com/view/bo99qejac.html
相关问题 - JQuery mobile - content navigation collapse on a button on portrait
【讨论】：
jQM 侧的“侧边栏”用于平板电脑/桌面显示，我认为移动设备会堆叠它们。
如果您查看源代码，您可以看到 jQM 对此有单独的内容容器：
<div data-role="page" class="type-home">
<div data-role="content">
<div class="content-secondary">
// sidebar here
</div>
<div class="content-primary">
// content here
</div>
</div>
</div>
更新：
看起来 jQM 添加了另一个 CSS 文件来控制它：
【讨论】：
用 jQuery mobile 创建侧边栏非常简单！看看这个例子：http://lab.cubiq.org/iscroll/examples/ipad/
这适用于 jQuery mobile，下载名为 iScroll，您可以在这里下载：http://cubiq.org/iscroll-4
【讨论】：
您发现的大多数插件都不能与 Jquery mobile 一起使用。
iScroll 4 不适用于 JQUERY MOBILE。
有一个非常有缺陷的 fork 试图使其与 JQM 一起工作，但在此线程中发布的 splitview 示例不能与它一起工作并且不包括在内。
【讨论】：