jQuery Mobile одно меню (только один HTML-код) - PullRequest
Новая
       11

jQuery Mobile одно меню (только один HTML-код)

1 голос
/ 02 апреля 2012

То, как я делаю меню в jQuery Mobile (JQM), теперь выглядит следующим образом: для каждой страницы (data-role="page") я создаю навигацию (data-role="navbar"), поэтому есть повторение, которое противоречит принципу «Не повторять» Принцип себя.

Есть ли способ создать только одно меню, и оно будет показано на всех страницах?

1 Ответ

1 голос
/ 02 апреля 2012

Создайте страницу, которая является вашим меню, затем просто укажите ссылку на «страницу меню» со всех других страниц.Я бы либо добавил код для «страницы меню» к каждому документу на сайте, либо написал бы некоторый код JS, который динамически внедряет «страницу меню» в DOM (только один раз при полной загрузке страницы). 

<body>

    <div data-role="page" id="home">
        <div data-role="content">
            <a data-role="button" href="#menu">Menu</a>
        </div>
    </div>

    <div data-role="page" id="menu">
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#home">Home</a></li>
                ...
            </ul>
        </div>
    </div>

</body>

Этот метод хорош тем, что не требует никакого специального кодирования, и вы можете анимировать анимацию входа / выхода меню, как и любую другую страницу.И теперь, когда jQuery Mobile 1.1.0+ обнаруживает и обслуживает переходы по возможностям устройства, это еще лучше использовать.

Вы также можете добавить страницу меню через JS, например: 

//wait for the DOM.ready event
$(function () {
    $('body').append('\
        <div data-role="page" id="menu">\
            <div data-role="content">\
                <ul data-role="listview">\
                    <li><a href="#home">Home</a></li>\
                    ...\
                </ul>\
            </div>\
        </div>');
});

Обратите внимание, что я избежал окончания строки, так что это не выдает ошибку.

...