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=""与listview一起添加到ul以获得样式显示。将其添加到面板中似乎不起作用。除非有人让我把它取下来，否则我就把它挂在上面，以防它能帮到谁。