Question

我想简单地创建一个类似于jQuery Mobile Demo Docs here上的侧边栏。

我已阅读this question，但对如何实施它并不太了解。

重点是，我正在制作一个使用jQuery Mobile进行大屏幕的网站，如桌面，网络书籍，平板电脑等。对于移动网站，我将使用没有侧边栏的网站。

我也试过SplitView（code here），但它有点儿麻烦，我想因为jQuery Mobile讨厌侧边栏...

所以：

我想要一个解决方案来实现像jQuery Mobile's Docs上的简单侧边栏。
或者我想要一个像SplitView这样的准备好的库来制作侧边栏。
或者我想要一个支持侧边栏的jQuery Mobile（它支持jQuery Mobile的大多数功能）的替代方案。

谢谢......：D

Answer 1

我创建了一个示例jQuery Mobile应用程序，其工作方式如下 - 当屏幕尺寸很大时，将显示拆分视图布局。否则，可以通过标题中的按钮进行导航。在桌面浏览器中进行说明，我已将宽度检查为500px。如果宽度> 500 px，则拆分视图。如果宽度<500px，标题中的按钮

以下是源代码：

<!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

Answer 2

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文件来控制它：

http://jquerymobile.com/demos/1.0.1/docs/_assets/css/jqm-docs.css

Answer 3

使用jQuery mobile创建一个侧边栏非常简单！请看一下这个例子：http://lab.cubiq.org/iscroll/examples/ipad/

这与jQuery mobile一起使用，下载它名为iScroll，你可以在这里下载：http://cubiq.org/iscroll-4

Answer 4

您发现执行此操作的大多数插件都无法与Jquery mobile一起使用。

iScroll 4不适用于JQUERY MOBILE。

有一个非常错误的分支试图使它与JQM一起工作，但是发布在这个线程中的splitview示例不适用于它并且不包括在内。

如何在jQuery Mobile网站中创建侧边栏？

4 个答案: