4つのボタンでフッターを修正しました。リストアイテムがこのフッターの下(フッターの後ろ)にあり、フッターボタンをクリックしたとき。
期待-フッターボタンクリックイベントを発生させる必要があります。実際-フッターの背後にあるListItemがトリガーされています。
アップデート -
index.htmlページ
<div data-role="header" data-position="fixed" data-theme="f">
<a href='#'><img class="back"/></a>
<div class="logo"><img class="logoimg"/></div>
<a href='#' class="ui-btn-right"><img class="btn_toplogout"/></a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-caption"><span id="txt_airtime_topup"></span></div>
<form name="topup" autocomplete="off">
<h4><span id="txt_operator"></span>:</h4>
<div class="ui-droplist" id="topup_operatordroplist">
<select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d">
</select>
</div>
<h4><span id="txt_recptmsisdn"></span>:</h4>
<div class="ui-droplist" id="topup_persondroplist">
<select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();">
</select>
</div>
<div class="input-contain">
<input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<h4><span id="txt_amount2"></span>:</h4>
<div class="input-contain amount-margin">
<input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
</div>
</div>
<div class="ui-block-b">
<h4><span id="txt_currency"></span>:</h4>
<div class="ui-droplist">
<select id="p_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
</div>
</fieldset>
</form>
<a href="#" id="btn_topup" class="ui-button" data-role="button" data-theme="red"></a>
</div><!-- /content -->
<div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">
<div data-role="navbar"><ul>
**<li><a href="#home">Home</a></li> //this is footer
<li><a href="#transfer">Send Money</a></li>
<li><a href="#paybill">Pay Bills</a></li>
<li><a href="#manage">Manage Accounts</a></li>**
</ul></div>
</div><!-- /footer -->
フッターの下にあるドロップダウンリスト-
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
CSS-
.ui-droplist .ui-btn-active {
border: 1px solid #808080;
background: #fdfdfd;
font-weight: bold;
color: #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from( #eee ), to( #fdfdfd )); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd ); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
-moz-linear-gradient(#eee , #fdfdfd ); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
-ms-linear-gradient(#eee , #fdfdfd ); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
-o-linear-gradient(#eee , #fdfdfd ); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
linear-gradient(#eee , #fdfdfd );
background-position: right center !important;
background-repeat: no-repeat !important;
}
フッターcss-
.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}