Как создать боковую панель на мобильных веб-сайтах jQuery?

Я хочу просто создать боковую панель, как на jQuery Mobile Демонстрационные документы здесь.

Я прочитал этот вопрос и не совсем понял, как его реализовать .

Дело в том, что я делаю веб-сайт, используя jQuery Mobile для больших экранов, таких как настольные компьютеры, нетбуки, планшеты и многое другое. Для мобильного сайта я просто буду использовать сайт без боковой панели.

Я также попробовал SplitView (здесь), но я думаю, что это немного глючит, потому что jQuery Mobile ненавидит боковые панели...

So:

  1. Либо мне нужно решение для реализации простой боковой панели, как на Документы jQuery Mobile.
  2. Или мне нужна готовая библиотека, такая как SplitView, для создания боковой панели.
  3. Или мне нужна альтернатива jQuery Mobile (которая поддерживает большинство функций jQuery Mobile), которая поддерживает боковую панель.

Спасибо д


sidebar jquery-mobile uisplitview
person Arjun Bajaj    schedule 14.02.2012    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Я создал образец мобильного приложения jQuery, которое работает следующим образом: при большом размере экрана будет отображаться макет с разделенным представлением. В противном случае навигация может выполняться с помощью кнопки в заголовке. Для иллюстрации этого в настольном браузере у меня есть учитывая ширину, которую нужно проверить как 500 пикселей. Если ширина> 500 пикселей, разделите представление. Если ширина ‹500 пикселей, кнопка в заголовке

Вот исходный код:

<!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 - свернуть навигацию по содержимому кнопка в портретной ориентации

person user700284    schedule 15.02.2012

arrow_upward
1
arrow_downward

«Боковая панель» на стороне 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 для управления этим:

person Phill Pafford    schedule 14.02.2012
comment
я пробовал это, но это просто не имеет значения... я пытался применить float:left к боковой панели и float:right к области содержимого, но ширина обеих областей автоматически устанавливается в соответствии с размером их содержимого . Можете помочь дальше... спасибо... :D - person Arjun Bajaj; 14.02.2012
comment
какую версию jQM вы используете? Версия jQuery и устройство, на котором вы тестируете? - person Phill Pafford; 14.02.2012
comment
jQuery: 1.6.4, jQuery Mobile: 1.0.1, Браузеры: Chrome 16, Firefox, Safari. Все дают одинаковые результаты... :P - person Arjun Bajaj; 14.02.2012
comment
И я думаю, что для классов, которые вы применили к элементам div в jQm, кодирование не выполняется. - person Arjun Bajaj; 14.02.2012
comment
добавление обертки содержимого к моему сообщению, помогает ли это - person Phill Pafford; 14.02.2012
comment
эй, спасибо за обновление, хотя оболочка ничего не сделала, файл CSS, на который вы ссылались, я попытался прикрепить его к странице, и он внес некоторые изменения. Позже я просмотрю код, чтобы увидеть, что делает работу, а затем я изолирую и попробую его, и вернусь к вам... большое спасибо... :D - person Arjun Bajaj; 14.02.2012
comment
но из-за вашей обертки мне будет легче понять код... спасибо,,, :D - person Arjun Bajaj; 14.02.2012

arrow_upward
0
arrow_downward

Создать боковую панель с помощью jQuery Mobile очень просто! Просто взгляните на этот пример: http://lab.cubiq.org/iscroll/examples/ipad/

Это работает с jQuery mobile, загрузите его под названием iScroll, и вы можете скачать его здесь: http://cubiq.org/iscroll -4

person Random78952    schedule 14.08.2012

arrow_upward
0
arrow_downward

Большинство плагинов, которые вы найдете для этого, не будут работать с JQuery Mobile.

iScroll 4 НЕ РАБОТАЕТ С JQUERY MOBILE.

Существует очень глючный форк, который пытается заставить его работать с JQM, но пример разделенного просмотра, размещенный в этой теме, не работает с ним и не включен.

person Jon    schedule 24.08.2012
comment
... iScroll работает с jQuery mobile! Я сделал приложение с jQuery mobile и iScroll 4... - person Random78952; 28.08.2012