在Android上使用带有Jquery mobile + phonegap的固定页脚答案

【问题标题】：Using fixed footer with Jquery mobile + phonegap on android在Android上使用带有Jquery mobile + phonegap的固定页脚
【发布时间】：2012-08-14 13:40:18
【问题描述】：

我正在使用 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 的手机上进行测试时，我观察到了奇怪的行为。假设页脚将选择列表隐藏在下面，如果我单击导航栏上的任何选项卡，则会弹出选择列表，而我希望转换到新页面。这就好像选择列表正在获取单击事件而不是页脚。这对用户来说非常烦人。我已经搜索了谷歌，但没有看到其他地方报告过这个问题。

【问题讨论】：

我很确定这是一个已知的错误，我今天至少看到了另一个与此有关的问题。看看这个：code.google.com/p/android/issues/detail?id=6721

标签： jquery-mobile cordova footer fixed

【解决方案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;
        });

【讨论】：

【解决方案2】：

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

        $(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();
                }
        });

【讨论】：

【解决方案3】：

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

$(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();
        }
});

【讨论】：