JqMOBI更改'關於按鈕'目標

Question

您有jqMOBI標題欄中按鈕的功能。我希望這有不同的目標取決於你在哪個頁面上。我似乎無法找到頁面轉換結束的事件。所以我能看到做到這一點的唯一方法是爲每個輕拍添加一個功能，這似乎有點OTT。

頭看起來像這樣..

 <div id="header"> 
     <a href="#About" class="button" style="float:right">About</a> 
     </div> 

任何建議或一種有效的方法，以保持活性散列軌道和改變按鈕的目標？

Answer 1

我看到3種溶液：

1.Specify每個面板的自定義首部塊，並通過添加數據頭=「主報頭」到每個面板的div鏈接它們。例如

注：由於某些原因，＃2是有，所以我已經包括了小提琴作爲參考麻煩格式化我的回答http://jsfiddle.net/JeEMf/ **

<div id='page1' class='panel' data-header='page1-header'>page 1</div> 
<div id='page2' class='panel' data-header='page2-header'>page 2</div> 

<div id='page1-header'> 
    <a href='#About1' class='button' style='float:right'>About Page 1</a> 
</div> 

<div id='page2-header'> 
    <a href='#About2' class='button' style='float:right'>About Page 2</a> 
</div> 

2.Specify一個自定義的函數，在運行所有面板更改/加載。與＃1類似，將data-load ='MyOnPageLoadFunc'添加到所有面板div。 （請參閱jqMobi kitchensink演示函數'loadedPanel'。這基本上是解決方案）例如

<div id='global-header'> 
    <a id='global-header-href' href='#About' class='button' style='float:right'>About</a> 
</div> 

<div id='page1' class='panel' data-load='MyOnPageLoadFunc'>page 1</div> 
<div id='page2' class='panel' data-load='MyOnPageLoadFunc'>page 2</div> 

然後建立這個功能

function loadedPanel(pageDiv){ 
    var href = ''; 
    switch (pageDiv){ 
     case 'page1': href='#about1'; 
      break; 
     case 'page2': href='#about2'; 
      break; 
     case 'page2': href='#about2'; 
      break; 
     default : href='#about'; 
    } 
    $('#global-header-href').attr('href', href); 
} 

3.Same爲＃2，但增加了自己的自定義頁眉 '數據 - ' 屬性。例如data-header-link ='＃about'給所有面板div。例如

<div id='global-header'> 
    <a id='global-header-href' href='#About' class='button' style='float:right'>About</a> 
</div> 

<div id='page1' class='panel' data-load='MyOnPageLoadFunc' data-header-link='#about1'>page 1</div> 
<div id='page2' class='panel' data-load='MyOnPageLoadFunc' data-header-link='#about2'>page 2</div> 
<div id='page3' class='panel' data-load='MyOnPageLoadFunc' data-header-link='#about3'>page 3</div> 

然後建立這個功能

function loadedPanel(pageDiv){ 
    var href = $('#'+pageDiv).data('header-link'); 
    $('#global-header-href').attr('href', href); 
}