jQuery Mobile外部面板没有采用样式。

Question

我正在尝试实现jQuery mobile 1.4 rc1中提供的新外部面板。 我能够使该面板按预期进入和退出所有页面，但是该面板不会继承默认主题（c）的样式，即使使用data-theme = a定义主题也不行。 该面板将加载未经样式处理的列表视图，除非我在网址中导航到#app-menu，然后样式才会出现。 有人知道这可能是为什么吗？

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

- Mark Hollas

Answer 1

注意：需要将 data-theme 属性添加到 外部面板 中，因为它不会从 父容器 继承样式/主题。而 内部面板 则从包含它的 页面 div 继承样式/主题。

jQuery Mobile 现在提供了外部面板和工具栏。这些小部件不会自动通过 jQM 初始化，需要手动初始化，并跟随 .enhanceWithin() 来增强其中的内容。

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

演示

- Omar

---

搞定了，谢谢！我常常想人们怎么知道这些事情。在这种情况下，即使在jQeryMobile网站的演示中创建外部面板时也没有使用此方法，并且其中有一个完全样式化的按钮。再次感谢！ - Mark Hollas

@MarkHollas，你说得对，在jQM演示页面上没有解释。甚至没有提到.enhanceWithin()可以替换.trigger("create")的作用。 - Omar

它实际上在演示中的某个地方，隐藏在一个洞穴深处。 JQM文档的问题是似乎每个代码库都有2或3个版本，并且每个版本都以不同的方式讲述。但是最新的文档中肯定有它。那就是我找到它并最近与@Omar讨论的地方。但是JQM文档还有很多需要改进的地方。 - Phill Healey

Answer 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>将使图标显示出来，但不会移动文本，因此仍然看起来很糟糕。

- user3344434