Jquery mobile 在android上使用Jquery mobile+phonegap的固定页脚_Jquery Mobile_Cordova_Footer_Fixed

Jquery mobile 在android上使用Jquery mobile+phonegap的固定页脚

jquery-mobile cordova

Jquery mobile 在android上使用Jquery mobile+phonegap的固定页脚,jquery-mobile,cordova,footer,fixed,Jquery Mobile,Cordova,Footer,Fixed,我正在使用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>

我正在使用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>

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

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

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

简化的“点击”事件处理程序。现在，它还可以处理标题区域中的单击

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

再次更新了解决方案

/* 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;
        });

我很确定这是一个已知的bug，今天我至少看到了另一个与此相关的问题。看看这个：