Question

我正在尝试实现jQuery mobile 1.4 rc1中提供的新外部面板。我可以让面板在所有页面中进入和关闭，但是面板不会从默认主题（c）继承样式，如果使用data-theme = a定义主题也不会。面板将加载一个无样式的列表视图，除非我导航到url中的＃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>

Answer 1

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

jQuery Mobile现在提供外部面板和工具栏。这些小部件不是由jQM自动启动的。需要手动启动它们，然后.enhanceWithin()加入内容。

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

<强> Demo

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

jquery移动外部面板不承担造型

2 个答案: