jquery移动外部面板不采取造型

我正在尝试实现jQuery Mobile 1.4 rc1中提供的新外部面板。 我可以让面板在所有页面上进入和退出，但面板不会从默认主题（c）inheritance样式，也不会使用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> 

Answer 1

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

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

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

演示

Answer 2

我不允许评论，但在演示@Omar提供的许多data-icon="home"图标没有显示出来，如果我添加到锚， class="ui-btn ui-icon-arrow-l"它也没有出现，所以似乎还有更多需要做的事情。

经过一番调查，我发现像这样添加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>会显示图标，但不会移动文本，因此看起来仍然很糟糕。