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('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 に答える
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 に答える