JQuery mobile - навигация по контенту, сворачивание кнопки на портрет - PullRequest
Новая
       32

JQuery mobile - навигация по контенту, сворачивание кнопки на портрет

2 голосов
/ 11 января 2012

Мы разрабатываем приложение с макетом, близким к примерам jqm здесь (оглавление слева и оглавление справа), но нам нужно то же поведение, что и для мобильного телефона Sencha, когда оно в портретной ориентации,оглавление сворачивается в навигационной кнопке здесь

Можно ли сделать с jqm?

1 Ответ

3 голосов
/ 12 января 2012

Я создал пример мобильного приложения jQuery Mobile, которое работает следующим образом. В портретном режиме будет отображаться макет с разделенным видом. В ландшафтном режиме навигацию можно выполнять с помощью кнопки в заголовке. в настольном браузере я дал width для проверки как 500px .If width>500 px, разделенный вид. Если width <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>

Это не защищенное от ошибок приложение. Но просто черновик, чтобы проиллюстрировать, как эта функция может быть реализована. Есть еще много вещей, которые нужно сделать, чтобы эта работа отлично работала.

Чтобы это работало, я использовал концепцию media queries. Используя ее, вы можете выборочно скрывать / отображать макет в зависимости от ширины браузера (ориентация устройства).

PS Я использовал jqm-docs.css для этого примера. У этого css есть другие медиазапросы, тоже нацеленные на другую ширину. Так что при тестировании этого кода могут быть некоторые странные проблемы с компоновкой. Пожалуйста, измените этот css на удалите ненужные медиазапросы.

Дайте мне знать, если это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...