Подтвердить что ты не робот

Мобильная внешняя панель jquery не принимает стиль

Я пытаюсь реализовать новую внешнюю панель, предлагаемую в jQuery mobile 1.4 rc1. Я могу заставить панель вводить и отклонять все страницы, как следует, однако панель не наследует стили из темы по умолчанию (c), и не будет, если тема определена с помощью data-theme = a. Панель будет загружать развернутый список, если я не перейду в меню приложений в URL-адресе, тогда появятся стили. Кто-нибудь знает, почему это может быть?

<script id="panel-init">
        $(function () {
            $("body > [data-role='panel']").panel();

        });
    </script>

<div data-role="panel" id="app-menu" data-display="push" data-position="left">
        <ul data-role="listview">
            <li data-role="list-divider">Menu</li>
            <li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>

        </ul>
    </div>
4b9b3361

Ответ 1

Примечание. data-theme атрибут должен быть добавлен на внешнюю панель, поскольку он не наследует стиль/тему из родительского контейнера. Внутренняя панель наследует стили/тему из раздела страницы, содержащего ее.

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

$(function () {
  $("[data-role=panel]").panel().enhanceWithin();
});

Демо

Ответ 2

Мне не разрешено комментировать, но в демонстрации @Omar не отображаются многие значки data-icon="home", и если я добавлю class="ui-btn ui-icon-arrow-l" в Anchor, он не появится ни в одном из них, что еще нужно сделать.

С небольшим расследованием я обнаружил, что добавление добавления ui-btn-icon-left так же будет фиксировать привязки

<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Anchor</a>

добавление этих классов в <li data-icon="home" не совсем работает, но изменение <li data-icon="home">item</li> на <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> приведет к тому, что значок появится, но не будет перемещать текст, чтобы он по-прежнему выглядел плохим.