多页面样式上的 jQuery 移动面板消失了

Question

我正在使用 jQuery mobile 为 phonegap 编写移动应用程序，它在同一个 html 页面中使用多个页面。我已经设置好了，所以所有页面都使用同一个面板，但现在的问题是常规 jQuery 移动“listview”数据角色的样式已经消失了。我仍然得到正常的 html 列表格式，但没有 Flash jQuery 移动的东西。我试过搞乱.enhanceWithin，但似乎没有帮助。

以下是代码示例：

<div data-role="page" class="ui-responsive-panel" data-theme="b"  id="page">

    <div data-role="header"  data-position="fixed">
        <h1>Alpha</h1>
        <a href="#left-panel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-grid ui-corner-all" data-role="button" data-inline="true" data-mini="true"></a>
    </div><!-- /header -->

    <div data-role="content">
        <h1>News and Features</h1>
        <p>Lorem ipsum </p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <p class="jqm-version"></p>
        <p>Content TBD</p>
    </div>  

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


<!-- Start of second page -->
<div data-role="page" class="ui-responsive-panel" data-theme="b"  id="personal-settings">

    <div data-role="header"  data-position="fixed">
       <h1>Alpha</h1>
       <a href="#left-panel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-grid ui-corner-all" data-role="button" data-inline="true" data-mini="true"></a>
    </div><!-- /header -->

    <div data-role="content">
        <h1>Personal Settings</h1>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <p class="jqm-version"></p>
        <p>Content TBD</p> 
    </div>

<!-- /page two -->
<!-- Universal Panel code -->
<script type='text/javascript'>
var panel = '<div data-role="panel" id="left-panel" data-position="left" data-display="push" data-theme="b"><h1>Panel</h1><p>stuff</p><ul data-role="listview" data-theme="a"><li>hi</li></ul></div>';

$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend(panel);
  $("#left-panel").panel();
});
</script>

我是 jQuery mobile 的新手，所以我希望这不是一个太愚蠢的问题，任何帮助将不胜感激。

Answer 1

想通了，您需要将 data-theme="" 添加到 ul 和 listview 以显示样式。将其添加到面板似乎不起作用。除非有人告诉我把它取下来，否则我会留下它，以防它帮助任何人。