Jquery 手机不显示数据图标（正确）

Question

所以，我在页眉上添加了一个弹出菜单，它工作正常……除了一件小事外，实际上工作得很好。对于我的生活，我无法让它以我想要的方式显示图标！

在第一个

中，我强行将数据图标强行放入

中，它显示了但没有位于左侧。在其他情况下，我将数据图标留在了我习惯离开的地方（它们在其他任何地方都可以正常工作）并且它们根本不显示。

有什么建议吗？

<div id="header" data-role="header" data-theme="b">
  <h1>MyApp</h1>
  <a href="#popupMenu" data-rel="popup" data-transition="slide" data-icon="bars" class="ui-btn-right"> Menu </a>
  <div data-role="popup" id="popupMenu" data-theme="b">
    <ul data-role="listview" data-inset="true">
      <li data-icon="gear" data-iconpos="left"><a href="#">Settings</a></li>
      <li><a href="#" data-icon="location">GPS</a></li>
      <li><a href="#" data-icon="info">About</a></li>
    </ul>
  </div>
</div>
<!-- /header -->

JSFiddle

Answer 1

没有为常规列表项定义的 data-iconpos 属性，仅当

项位于导航栏小部件内时才有效：http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp

请看一下我制作的fiddle：https://jsfiddle.net/xbo8npng/1/

我使用 css 将图标放在左侧：

<div id="header" data-role="header" data-theme="b">
  <h1>MyApp</h1>
  <a href="#popupMenu" data-rel="popup" data-transition="slide" data-icon="bars" class="ui-btn-right"> Menu </a>
  <div data-role="popup" id="popupMenu" data-theme="b">
    <ul data-role="listview" data-inset="true">
      <li class="left" data-icon="gear"><a href="#">Settings</a></li>
      <li class="left"><a href="#" data-icon="location">GPS</a></li>
      <li class="left"><a href="#" data-icon="info">About</a></li>
    </ul>
  </div>
</div>

和样式：

 .left a{
        padding-left: 2.5em !important;
        padding-right: 1em !important;
  }
  .left a:after{
        left: 2px;
        right: auto;
  }

希望对您有所帮助！

Jquery 手机不显示数据图标（正确）

Jquery Mobile not displaying data-icons (correctly)

header

popup

navbar

jquery-mobile