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

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

1 голос
/ 14 февраля 2012

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

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

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

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

Итак:

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

Спасибо ...: D

Ответы [ 4 ]

2 голосов
/ 15 февраля 2012

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

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

<!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 - сворачивание контента при нажатии кнопки на портрете

1 голос
/ 14 февраля 2012

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

0 голосов
/ 24 августа 2012

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

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

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

0 голосов
/ 14 августа 2012

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

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

...