1

jQuery Mobile NavBar のアイコンが 2 回表示され、理由がわかりません。コードは jQuery ドキュメントからコピーされました

<link rel="stylesheet"
      href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

そしてナビゲーションバー自体

<div data-role="navbar" class="ui-navbar" role="navigation">
  <ul class="ui-grid-b">
    <li class="ui-block-a">
      <a id="showlatest" data-icon="grid" data-theme="a"
         class="ui-btn-active ui-btn-icon-top ui-btn-up-a">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Latest</span>
          <span class="ui-icon ui-icon-grid ui-icon-shadow"></span>
        </span>
      </a>
    </li>
    <li class="ui-block-b">
      <a id="showstages" data-icon="star"
         class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Top</span>
          <span class="ui-icon ui-icon-star ui-icon-shadow"></span>
        </span>
      </a>
    </li>
    <li class="ui-block-c">
      <a id="showclass" data-icon="gear" data-theme="a"
         class="ui-btn ui-btn-up-a ui-btn-icon-top">
        <span class="ui-btn-inner" aria-hidden="true">
          <span class="ui-btn-text">Other</span>
          <span class="ui-icon ui-icon-gear ui-icon-shadow"></span>
        </span>
      </a>
    </li>
  </ul>
</div>

出力は次の図のようになります。

ここに画像の説明を入力

なぜこれが起こっているのかについての提案はありますか？

4

2 に答える 2

1

span タグを明示的に指定する必要はありません。これらは、jQuery プラグイン自体によって生成されます。このコードで置き換えてみてください。

<div data-role="navbar" class="ui-navbar" role="navigation">
  <ul class="ui-grid-b">
    <li class="ui-block-a">
      <a id="showlatest" data-icon="grid" data-theme="a"
         class="ui-btn-active ui-btn-icon-top ui-btn-up-a">Latest</a>
    </li>
    <li class="ui-block-b">
      <a id="showstages" data-icon="star"
         class="ui-btn ui-btn ui-btn-up-a ui-btn-icon-top" data-theme="a">Top</a>
    </li>
    <li class="ui-block-c">
      <a id="showclass" data-icon="gear" data-theme="a"
         class="ui-btn ui-btn-up-a ui-btn-icon-top">Other</a>
    </li>
  </ul>
</div>
于 2013-05-02T13:38:49.990 に答える