1

JQuery Mobile 1.3 で折りたたみ可能な下部メニューを作成しようとしています。一番下に上向きの矢印が付いた水平フッターが欲しいだけです。フッターをクリックすると、メニューが展開され、矢印が下向きになります。これはほとんど私が欲しいものです:

http://jsfiddle.net/6F2XU/

しかし、ボタンをまったく中央に配置できないようです。

<div data-role="footer" data-theme="a" data-content-theme="a" data-inset="false"   data-type="horizontal"  data-iconpos="notext" data-position="fixed" class="foot">
<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button" >
<h3>Pets</h3>
<ul data-role="listview">
    <li><a href="#">Canary</a></li>
    <li><a href="#">Cat</a></li>
    <li><a href="#">Dog</a></li>
    <li><a href="#">Gerbil</a></li>
    <li><a href="#">Iguana</a></li>
    <li><a href="#">Mouse</a></li>
</ul>
</div>
</div>

Javascript

.foot{
margin:0;
padding:0;
}
.ui-btn { width: 100%; height:30px;}
.center-button{
margin: 0 auto;
padding:0 20px 0 20px;
}

ヒントはありますか？

4

2 に答える 2

2

解決

ここに実用的なソリューションがあります：http://jsfiddle.net/Gajotres/HHnzH/

#custom-collapsible h3 a span span.ui-icon {
    margin: 0 auto !important;
    margin-top: 2px !important;
    float: none !important;
}

これからのHTMLの変更：

<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button">

に：

<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button" id="custom-collapsible">

これがあなたの望むものであることを願っています。

より詳しい情報

この種の変更を自分で行う方法を学びたい場合は、この記事をチェックしてください。自分でこれを行う方法を教えてくれます。

于 2013-03-19T15:18:01.540 に答える
0

これを .center-button に追加します。

position:relative;
于 2013-03-19T15:13:07.997 に答える