JQM 外部面板不包括自定义颜色

Question

我刚刚尝试将 nativedroid JQM 主题应用到外部面板。我知道 enhanceWithin() 应该可以完全解决这个问题，但事实并非如此。 Nativedroid css 颜色未应用于外部面板。我制作了一个 JSFiddle 来演示这种行为。使用普通面板一切正常，但外部面板出现时没有应有的绿色样式。

JSFiddle Example

如何解决这个问题？

<script id="panel-init">
  $(function() {
    $("#externalPanel").panel().enhanceWithin();
  });

</script>


<div data-role="panel" id="externalPanel" data-position-fixed="true" data-display="push" data-theme="b">
  <!-- panel content goes here -->
  <ul data-role="listview" data-theme="b" data-dividertheme="b" data-inset="false">
    <li>External Panel</li>
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-coffee'></i>Need a Coffee</a></li>
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-beer'></i>Have a Beer</a></li>
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-music'></i>Play Music</a></li>
    <li data-icon='false'><a href="#"><i class='lIcon fa fa-fire'></i>Make a fire</a></li>
  </ul>
</div>
<!-- /panel -->

<div data-role="page" id="one" data-theme='b'>
  <div data-role="panel" id="internalPanel" data-position-fixed="true" data-display="push" data-theme="b">
    <!-- panel content goes here -->
    <ul data-role="listview" data-theme="b" data-dividertheme="b" data-inset="false">
      <li>Internal Panel</li>
      <li data-icon='false'><a href="#"><i class='lIcon fa fa-coffee'></i>Need a Coffee</a></li>
      <li data-icon='false'><a href="#"><i class='lIcon fa fa-beer'></i>Have a Beer</a></li>
      <li data-icon='false'><a href="#"><i class='lIcon fa fa-music'></i>Play Music</a></li>
      <li data-icon='false'><a href="#"><i class='lIcon fa fa-fire'></i>Make a fire</a></li>
    </ul>
  </div>
  <!-- /panel -->
  <div data-role="header" data-theme='b'>
    <h1>Single page</h1>
  </div>
  <!-- /header -->

  <div role="main" class="ui-content">
    <a href="#externalPanel" data-theme="b" data-role="button">Open EXTERNAL panel</a>
    <a href="#internalPanel" data-theme="b" data-role="button">Open INTERNAL panel</a>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <!-- /content -->

</div>
<!-- /page -->

Answer 1

万一有人遇到类似问题 - 解决方案是：

将 class ui-page-theme-b 添加到正文标记中，因为面板继承自页面。

Omar 在他的评论中告诉了我这一点，并建议 post 自己作为答案。

JQM 外部面板不包括自定义颜色

JQM external panel doesn't include custom colors

html

css

jquery

jquery-mobile