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/announcing-jquery-mobile -1-2-0-final/),它纠正了旧版本中发现的许多错误。

希望这对你有用。

于 2012-10-04T04:27:43.523 回答