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

Question

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

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

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

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

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

Так:

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

Спасибо д

1

jquery-mobile sidebar uisplitview

Источник

user666761 14 фев '12 в 17:55

4 ответа

Другие вопросы по тегам jquery-mobile sidebar uisplitview

user700284 15 фев '12 в 18:47 2012-02-15 18:47 · Answer 1 · 2012-02-15 18:47

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

user93966 14 фев '12 в 18:12 2012-02-14 18:12 · Answer 2 · 2012-02-14 18:12

"Боковая панель" на стороне 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

user1598434 14 авг '12 в 18:37 2012-08-14 18:37 · Answer 3 · 2012-08-14 18:37

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

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

0

Источник

user1598434 14 авг '12 в 18:37

user1623605 24 авг '12 в 19:59 2012-08-24 19:59 · Answer 4 · 2012-08-24 19:59

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

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

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

0

Источник

user1623605 24 авг '12 в 19:59