強制的にリフレッシュするヘッダーの後ろのボタン

this techniqueを使用して強制的にリフレッシュする必要がありました。私が新しいページに移動すると、jQMは私のヘッダーに戻るボタンを正しく追加します。しかし、私が最初のページに戻ると、戻るボタンが間違って表示されます。条件付きで戻るボタンを作成することは可能ですか？手動でバックボタンを作成し、URIのパラメータに基づいて条件付きでそれを隠そうとしましたが、ボタンが表示されたら再び隠すことはできません。強制的にリフレッシュするヘッダーの後ろのボタン

編集：ここに問題を示すコードがあります。ページ1に戻ったときにカスタムバックボタンを隠すだけでなく、ページ2にいるときに「ページ1」のコンテンツを隠すことも、逆もありません。何かが表示されたら、再表示することはできないようです。

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
     <script> 
      var backButtonVar = null; 
      var page1Var = null; 
      var page2Var = null; 
     </script> 
    </head> 

    <body> 
     <div data-role="page" data-add-back-btn="false"> 
      <div data-role="header"> 
       <h1>Test</h1> 
       <a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">MyBack</a> 
      </div> 

      <div id="page1" data-role="content"> 
       <a href="index.html?id=2">Go to page 2</a> 
      </div> 

      <div id="page2" data-role"content"> 
       This is page 2 
      </div> 

      <script> 
       $(document).ready(function() { 
        jQuery(document).on('pagehide', 'div', function(event, ui) { 
         var page = jQuery(event.target); 
         page.remove(); 
        }); 

        backButtonVar = $('#backButton'); 
        page1Var = $('#page1'); 
        page2Var = $('#page2'); 
        // Is this the root? 
        if (window.location.search == '') { 
         backButtonVar.hide(); 
         page1Var.show() 
         page2Var.hide() 
        } else { 
         backButtonVar.show(); 
         page1Var.hide() 
         page2Var.show() 
        } 
       }); 
      </script> 
     </div> 
    </body> 
</html>

出典

2013-05-02 stdout

ここではページを変更していないので、 'pagehide'イベントはトリガーしません。あなたがしようとしているのは、同じページ内のコンテンツを表示/非表示にすることです。 – Omar

実際それがそうであるようです。 'on（ 'pagehide'）'関数に 'alert（ 'foo'）;を置くと、すべてのページが変更されたときに起動します。 – stdout

ページを変更すると起動するはずですが、同じページ内でdivを表示/非表示にした場合は表示されません。ただし、上記のコードには1ページしかありません。この回答を確認して、これがあなたが探しているものかどうか教えてくださいhttp://stackoverflow.com/questions/16374046/jquery-mobile-back-buttons/16374970#16374970 – Omar

ここに修正があります。戻るボタンにクラスbackButtonを付けます。 .hide()アクティブなページがホームページの場合page1、そうでない場合は.show()です。

Demo

$('.backButton').hide(); 
$(document).on('pagebeforeshow', function() { 
var activePage = $.mobile.activePage; 
if (activePage[0].id != 'page1') { 
    $('.backButton').show(); 
} 
else { 
    $('.backButton').hide(); 
} 
});

何か質問がある場合は、私に知らせてください。

出典

2013-05-07 07:56:14 Omar

強制的にリフレッシュするヘッダーの後ろのボタン

答えて

関連する問題