0

我正在使用 jquery mobile 为 Android 构建一个 phonegap 应用程序，并且在固定页脚方面遇到了一些问题。

请参阅下面的 HTML 代码。

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
    </script>
    <script type="text/javascript" src="js/jquery-1.7.min.js">
    </script> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    <script src="js/jquery.mobile-1.1.1.min.js"> </script>

</head>
<body>
<div data-role="page" id="home">

    <div data-role="header" data-position="fixed"
     data-tap-toggle="false">
        <h1>Test</h1>
    </div><!-- /header -->

    <div data-role="content">   

    <form id="searchform" action="" method="post" onsubmit="return false;"
    data-ajax="false">

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>
    </form>

    <script type="text/javascript">
        $('.city').each(function() {
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
        });

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

    <div data-role="footer" data-position="fixed"
    data-tap-toggle="false">
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a href="#help" data-icon="info" 
                data-transition="none">Help</a></li>
                <li><a href="#help" data-icon="star"
                 data-transition="none" >Favorites</a></li>
                <li><a href="#help" data-icon="arrow-r"
                 data-transition="none" >Results</a></li>
            </ul>
        </div>
    </div>

</div><!-- /page -->

<div data-role="page" id="help">
    <div data-role="header" data-position="fixed"
         data-tap-toggle="false">
            <h1>Help</h1>
        </div><!-- /header -->

    </div>
</div>  
</body>
</html>

有一个包含多个字段的长表单，包括复选框、单选按钮、选择列表等（此处使用重复的选择列表来模拟）。底部有一个固定的页脚。在桌面浏览器上一切正常。但是当我在装有 Android 2.3 的手机上进行测试时，我观察到了奇怪的行为。假设页脚将选择列表隐藏在下面，如果我单击导航栏上的任何选项卡，则会弹出选择列表，而我希望转换到新页面。这就好像选择列表正在获取单击事件而不是页脚。这对用户来说非常烦人。我已经搜索了谷歌，但没有看到其他地方报告过这个问题。

4

3 回答 3

1

再次更新了解决方案。

/* HACK: when clicked on navbar the select list underneath pops up 
    for some reason. So we just hide all content as soon as 
    we click on navbar and then show it whenever we load new page*/



         $(document).bind('pagechange', function(e, data) {
            $('[data-role="content"]').show();
        });

        $(document).bind('tap', function(e) {

            if($("body").data("hold-flag") == true) {
                $("body").data('hold-flag', false);     
                return;
            }

            if($(e.target).closest("[class='ui-btn-inner']").length > 0 ||
                $(e.target).closest("[class~='ui-btn-right']").length > 0 ||
                $(e.target).closest("[class~='ui-btn-left']").length > 0) {
                    $('[data-role="content"]').hide();
            }
        });

        $(document).bind('taphold', function(e) {
            /* set a flag to mark this as a taphold event */        
            /* BIG assumption: a 'tap' event is always fired after a
               taphold event */
            $("body").data('hold-flag', true);      
            e.preventDefault();
            return false;
        });
于 2012-10-18T08:09:48.880 回答
0

我找到了解决方法。我添加了以下代码。本质上，我正在测试页脚区域是否有点击。如果是，那么我只是隐藏页面的内容。这似乎停止了烦人的弹出选择列表。当然，页面转换完成后必须恢复隐藏的页面内容。我不确定这段代码的可移植性和/或健壮性。希望有经验的开发人员发表评论。

        $(document).bind('pagechange', function(e, data) {
                $('[data-role="content"]').show();
                });

        $(document).bind('tap', function(e) {
                /* find the footer for this page*/
                var footer = $(e.target).
                             closest('[data-role="page"]').
                             find('[data-role="footer"]');

                var offset = footer.offset();

                var scroll = e.pageY - e.clientY;
                var pos = offset.top - scroll;

                if(e.clientY > pos) {
                    //click in footer area
                    $('[data-role="content"]').hide();
                }
        });
于 2012-08-19T09:08:14.357 回答
0

简化的“点击”事件处理程序。这现在也处理标题区域中的点击。

$(document).bind('tap', function(e) {
        if($(e.target).closest("[data-role='footer']").length > 0 ||
        $(e.target).closest("[data-role='header']").length > 0) {
            $('[data-role="content"]').hide();
        }
});
于 2012-08-21T07:30:44.663 回答