Layout JQuery mobile-内容导航折叠在纵向按钮上_Layout_Jquery Mobile_Portrait

Layout JQuery mobile-内容导航折叠在纵向按钮上

layout jquery-mobile

Layout JQuery mobile-内容导航折叠在纵向按钮上,layout,jquery-mobile,portrait,Layout,Jquery Mobile,Portrait,我们正在开发一个布局接近jqm示例（目录在左边，目录在右边）的应用程序，但我们希望与Sencha mobile具有相同的行为，当它处于纵向时，目录在导航按钮中折叠是否可以使用jqm？我创建了一个示例jQuery移动应用程序，其工作原理如下-在纵向模式下，将显示分割视图布局。在横向模式下，可以通过标题中的按钮进行导航。要在桌面浏览器中对此进行说明，我已经给了宽度以检查为500px。如果width>500px，则分割视图。如果宽度第2页内容2

我们正在开发一个布局接近jqm示例（目录在左边，目录在右边）的应用程序，但我们希望与Sencha mobile具有相同的行为，当它处于纵向时，目录在导航按钮中折叠

是否可以使用jqm？

我创建了一个示例jQuery移动应用程序，其工作原理如下-在纵向模式下，将显示分割视图布局。在横向模式下，可以通过标题中的按钮进行导航。要在桌面浏览器中对此进行说明，我已经给了

宽度

以检查为

500px

。如果

width>500px

，则分割视图。如果

宽度










第2页
内容2


















第3页
内容3

这不是一个万无一失的应用程序。但只是一个粗略的副本来说明如何实现此功能。要使此功能完美运行，还有很多事情要做

为了使其工作，我使用了

媒体查询的概念

。使用它，您可以根据浏览器宽度（设备方向）有选择地隐藏/显示布局

p.S.我在这个例子中使用了

jqm docs.css

。这个css也有针对其他宽度的其他媒体查询。因此，测试这个代码时可能会出现一些奇怪的布局问题。请修改这个css以删除不需要的媒体查询

如果有帮助请告诉我

谢谢@user700284！它工作得很好，也许菜单的样式很简单，但别担心，我们知道如何修复它。非常感谢。

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