Jquery Mobileネストされたリスト - 戻るボタンが消えましたか？

Question

最新のjQuery Mobileビルドでは、戻るボタンを追加する方法は、 'data-add-back-btn = "true"'を全体の "page" divに追加することです。

これは素晴らしいです。ただし、ネストされたリストのサブメニューを表示すると、戻るボタンは表示されなくなります。

出力コードを見ると、jquery mobileは元の「ページ」divを隠していて、新しいボタンを作成しています（戻るボタンの属性をtrueに設定していない）。

追加するためにそれを教えてくれます、私は追加する必要があるものは、そこにある、私の質問があるhttp://jquerymobile.com/test/docs/lists/lists-nested.html

私はこの時点でデモURLを持っていけない、しかし、あなたはデモページでアクションで問題を見ることができますネストされたメニューの戻るボタン？もしそうでなければ、すべての "ページ" divにバックボタン属性を自動的に追加するためにそれをハックすることができる何らかの方法がありますか？

この問題についてのお手伝いをお待ちしております。このような

Answer 1

何かが役立つはずです：

$(':jqmData(url^=MYPAGEID)').live('pagebeforecreate', 
    function(event) { 
    $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)') 
     .prepend('<a href="#" data-rel="back" data-icon="back">Back</a>') 
    }); 

は、リストを含むページのIDとMYPAGEIDを交換してください。

イベントは、サブページが動的に作成されたときにトリガーされ、ヘッダーの最初の項目として戻るボタンが挿入されます。その後、jQueryMobileのマジックが自動的に実行されると、それが取得され、素敵になります。

あなたはこの余分なフィルタリングなし（それはdata-urlに&上でつまずくと、あなたが.live()前にフィルタを使用することはできません表示されます）第1セレクタであなたをui-pageを参照することはできませんので、フィルタリングは少し奇妙です親ページの戻るボタンを取得します。

Answer 2

は同じ問題を持っていた、ここソリューションです：

バックボタンがデフォルトでオフになっているとして、あなたはjQueryのモバイルをロードする前に（とjQueryをロードした後に）それをオンにする必要があります。

<script type="text/javascript"> 
$(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.addBackBtn = true; 
});  
</script> 

今、jQueryの戻るボタンはバグであるため、表示されないことがある場所が表示されることがあります。これを防ぐには、ページのコンテナに次の行を追加します。

data-add-back-btn="false" 

これは、ページの更新と、それはすべきではない場所を示すことによって、混乱から戻るボタンを防ぐことができます。

Answer 3

上記の投稿された例を引用して、これは私が入れ子になったリストに戻るボタンを追加する方法です。

私がしていたことは、特定の条件が存在するときに親リストビュー（）を追加してから、特定のデータが利用可能なときにのみ子リストビュー（）を追加することでした。

状況によっては、0-5の子リストビューを持つことができます。例えば

：

self.cont.append($("<ul id='addtlInfo' />")); 
self.loadMeds(self.cont.attr("id")); 
self.loadContacts(self.cont.attr("id")); 
self.loadDX(self.cont.attr("id")); 
$.mobile.page.prototype.options.addBackBtn = true; 

自己。contは単に私のjQueryオブジェクトを追加するページのDIVです。 .loadXXX法の

一人一人が基本的には次のようになります。

self.loadMeds = function (client_id) { 
    if (!$("#clientMeds").exists()) { 
     cw.ds.executeSQL("SELECT * FROM CLIENTS_MEDS WHERE client_id = ?", [client_id], self.appendMeds); 
    }; 
}; 

self.appendMeds = function (tx, r) { 
    var $meds = $("<li>Medications</li>"); 
    var $medlist = $("<ul />"); 
    var rs, meds, med = ""; 
    var m = 0; 
    if (r.rows.length > 0) { 

     for (var i = 0; i < r.rows.length; i++) { 
      rs = r.rows.item(i); 
      meds = rs.data.split("\n"); 

      for (var j = 0; j < meds.length; j++) { 
       med = med + meds[j] + "<br />"; 

       if (m == 2) { 
        $medlist.append($("<li>" + med + "</li>")); 
        med = ""; 
        m = -1; 
       }; 
       m++; 
      }; 

     }; 
    }; 
    $meds.append($medlist); 
    var $m = $("<ul id='clientMeds' />").append($meds); 
    $("#addtlInfo").append($("<li />").append($m)); 
    $("#clientMeds").listview(); 
}; 

あなたが見ることができるように、私はそれぞれの子のリストを追加したら、私はリストビュー（）メソッドを呼び出します。これにより、独立した子リストビューを持つ親リストビューが作成されました。

親リストビュー（）内のアイテムをクリックした場合、予想通りに子アイテムを表示できましたが、親リストビューに戻る方法はありませんでした。これはiPad上で自分のコードをテストしているときには本当に問題になりました（DroidのネイティブBACKボタンがないため、実際の戻るボタンがあります）。

最初の修正を試みました：data-add-back-btn = "true"これは期待どおりに機能しませんでした。

2番目の修正。

<script type="text/javascript"> 
$(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.addBackBtn = true; 
});  
</script> 

ページ幅が広いので、私には優雅に見えませんでした。私は、実際にはネストされたリストビューになる予定だった場合にのみ、この設定を有効にするようにしていました。期待どおりに機能したときにうれしく驚いていました。