Question

我正在使用jQuery mobile为手机应用程序设计移动应用程序，它在同一个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以显示样式。将它添加到面板似乎不起作用。除非我被告知要把它拿下来，否则我会放弃它，以防它对任何人都有帮助。

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

1 个答案: