タブ名に基づいてページの名前を変更します。

Question

jquery mobileとnativedroid2を使用して作成された小さなアプリです。

タブ名に基づいてページ見出し名を変更できるかどうかを知りたいですか？

例の場合http://jsfiddle.net/livewirerules/2a7so7r5/1/ページ見出しがFriendsで、アクティブなタブがFriendsなので、次のタブに移動すると表示されます。 Workページタイトルは以下に応じ

を変更する必要があり、私のデモJSコード

$(document).on("pagecreate", "#page1", function() { 
    $("div[role=main]").on("swipeleft", function (event) { 
     changeNavTab(true); 
    }); 

    $("div[role=main]").on("swiperight", function (event) { 
     changeNavTab(false); 
    }); 
}); 

function changeNavTab(left) { 
    var $tabs = $('ul[data-role="nd2tabs"] li'); 
    console.log($tabs); 
    var len = $tabs.length; 
    var curidx = 0; 
    $tabs.each(function(idx){ 
     if ($(this).hasClass("nd2Tabs-active")){ 
      curidx = idx; 
     } 
    }); 

    var nextidx = 0; 
    if (left) { 
     nextidx = (curidx >= len - 1) ? 0 : curidx + 1; 
    } else { 
     nextidx = (curidx <= 0) ? len - 1 : curidx - 1; 
    } 
    $tabs.eq(nextidx).click(); 

} 

任意のヘルプを使用すると、各タブ項目のクリックハンドラに添付する

Answer 1

を理解されるであろうさ。このコードブロックを$(document)関数に追加するだけです。あなたのページ見出し要素のIDを設定します。

<h1 id="heading" class="wow fadeIn" data-wow-delay='0.4s'>Friends</h1> 

$('ul[data-role="nd2tabs"] li').on('click',function(){ 
    $("#heading").html($(this).html()); 
}); 

は、ここに私が期待したものかわからない更新フィドル http://jsfiddle.net/2a7so7r5/18/

Answer 2

だが、これは私のaproach Modified example

function changeNavTab(left) { 
    var $active = $('ul[data-role="nd2tabs"] li.nd2Tabs-active'); 
    if(left){ 
     var $moveto = $active.next().length ? $active.next() : $('ul[data-role="nd2tabs"] li:first'); 
    }else{ 
     var $moveto = $active.prev().length ? $active.prev() : $('ul[data-role="nd2tabs"] li:last'); 
    } 
    var title = $moveto.text(); 
    $("h1.ui-title").text(title); 
}