JQM 外部面板不包含自定义颜色答案

【问题标题】：JQM external panel doesn't include custom colorsJQM 外部面板不包含自定义颜色
【发布时间】：2016-11-21 19:20:33
【问题描述】：

我只是尝试将 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 -->

【问题讨论】：

只需将类ui-page-theme-b 添加到body，因为面板继承自页面。
@Omar 你是对的！您能否将其发布为答案，因为您实际上为我解决了它。非常感谢！ ;)
很高兴它有帮助 :) 发布带有一些解释的答案 ;)

标签： jquery html css jquery-mobile

【解决方案1】：

如果有人遇到类似问题 - 解决方案是：

将ui-page-theme-b 类添加到body 标签，因为面板继承自页面。

奥马尔在他的评论中告诉我这一点，并建议我自己发布作为答案。

【讨论】：