2

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;
}
4

1 に答える 1

0

次のことをしている間、あなたが言及した問題は発生しませんでした:

の例index.html:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

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

        <!-- THIS FILE CONTAINS THE CSS YOU POSTED -->
        <link rel="stylesheet" href="./css/test.css" />        
    </head>

    <body>

        <!-- THIS PAGE CONTAINS THE HTML CODE YOU POSTED + SEVERAL DROP DOWN LIST IN QUESTION -->
        <div data-role="page" id="mine">

            <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>

                <!-- DROP DOWN LISTS IN QUESTION -->    
                <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>

                <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>

                <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>

                <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>
                <!-- DROP DOWN LISTS IN QUESTION -- END -->

            </div><!-- /content -->

            <div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">

                <!-- YOUR FOOTER'S BUTTONS -->
                <div data-role="navbar"><ul>
                    <li><a href="#home">Home</a></li> 
                    <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 -->

        </div>

        <!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -->
        <div data-role="page" id="home">
            <div data-role="content">
                1 - HOME
            </div>
        </div>

        <div data-role="page" id="transfer">
            <div data-role="content">
                2 - TRANSFER
            </div>
        </div>

        <div data-role="page" id="paybill">
            <div data-role="content">
                3 - PAYBILL
            </div>
        </div>

    <div data-role="page" id="manage">
            <div data-role="content">
        4 - MANAGE
            </div>
    </div>
        <!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -- END -->

    </body>
</html>


に含まれる CSS test.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;
}

.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;
}

フッターのボタンをクリックすると、ドロップダウン リストがフッターの背後にあるときに、ボタン/リンクが正常にトリガーされ、関連付けられたページにリダイレクトされます。

たとえば、フッターのボタン/リンクをクリックすると、次のように呼び出さManageれます。

フッターの後ろのドロップダウンリスト

ドロップダウン リストがトリガーされずManage、期待どおりにページにリダイレクトされます。

ボタン/リンク成功

問題が jQuery Mobile のバージョンに関連しているのか、それとも使用しているデバイス (Android、iPhone、Blackberry など) に関連しているのかはわかりません...

参考までに、私は jQuery Mobile バージョン 1.1.1 を使用し、上記の例を iPhone 5 でテストしました。

jQuery Mobile バージョン 1.1.1 を使用してコードをテストしましたが、最新バージョンを使用することをお勧めします(現時点では 1.2、http://jquerymobile.com/blog/2012/10/02/announce-jquery-mobileを確認してください)。 -1-2-0-final/ )、古いバージョンで見つかった多くのバグを修正しました。

これがうまくいくことを願っています。

于 2012-10-04T04:27:43.523 に答える