jQuery的移动外部面板不采取样式 [英] jquery mobile external panel not taking on styling

问题描述

我正在尝试实现jQuery mobile 1.4 rc1中提供的新外部面板.我可以让面板按原样进入和关闭所有页面，但是，面板不继承默认主题(c)的样式，如果使用data-theme = a定义了主题，则面板也不会继承.除非我在url中导航到#app-menu，然后样式才会出现，否则面板将加载未样式化的列表视图.有人知道为什么会这样吗?

I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?

<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>

推荐答案

注意:应该将data-theme属性添加到外部面板中，因为它不会继承 parent 容器的样式/主题. 内部面板从包含它的 page div 继承样式/主题.

Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.

jQuery Mobile现在提供外部面板和工具栏.那些小部件不是由jQM自动启动的.它们需要手动启动，然后按.enhanceWithin()可以增强其中的内容.

jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.

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

演示

Demo

这篇关于jQuery的移动外部面板不采取样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！