2

ドキュメントは、 data-role = "horizo​​ntal" を使用するボタンでうまく機能します

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-grouped.html

しかし、リストビューhttp://jsfiddle.net/sHtfY/では機能しません

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <div data-role="controlgroup" data-type="horizontal">
            <ul data-inset="true" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Destination" data-inset="true">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Cherry</a></li>
                    <li><a href="#">Cranberry</a></li>
                    <li><a href="#">Grape</a></li>
                    <li><a href="#">Orange</a></li>
                </ul>

            <ul data-inset="true" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Destination" data-inset="true">
                    <li><a href="#">Apple</a></li>
                    <li><a href="#">Banana</a></li>
                    <li><a href="#">Cherry</a></li>
                    <li><a href="#">Cranberry</a></li>
                    <li><a href="#">Grape</a></li>
                    <li><a href="#">Orange</a></li>
                </ul>
        </div>
    </div><!-- /content -->

どんな助けでも大歓迎です。

4

1 に答える 1

1

水平方向のリスト ビューにはui-grid、jQuery Mobile が提供するレイアウトを使用します。

デモ

<div class="ui-grid-a">
 <div class="list ui-block-a">
  <ul data-role="listview">
  </ul>
 </div>
 <div class="list ui-block-a">
  <ul data-role="listview">
  </ul>
 </div>
</div>

CSS -使用されている他のものと競合しないように、ui-block-aとクラスの両方を指定します。ui-block-bui-grid

.list.ui-block-a, .list.ui-block-b { margin-top: 15px !important }
于 2013-06-09T15:33:48.957 に答える