You have the facility for a button in the jqMOBI header bar. I would like this to have a different target depending on what page you are on. I can't seem to find a event for the end of a page transition. So The only way I can see to do this is to add a function to each tap which seems a bit OTT.
The header looks like this..
<div id="header">
<a href="#About" class="button" style="float:right">About</a>
</div>
Any suggestions or an efficient method to keep track of the active hash and change the target of the button?
i see 3 solutions:
1.Specify a custom header block for each panel, and link them by adding data-header='main-header' to each panel div. e.g.
Note: For some reason, Stackoverflow is having trouble formatting my answer so i've included the fiddle as reference 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 a custom function to run on all panel change/loads. Similar to #1, add data-load='MyOnPageLoadFunc' to all panel divs. (see the jqMobi kitchensink demo for the function 'loadedPanel'. That's basically the solution) e.g.
<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>
then create this function
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 as #2, but add your own custom 'data-' attribute for the header. e.g. data-header-link='#about' to all panel divs. e.g.
<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>
then create this function
function loadedPanel(pageDiv){
var href = $('#'+pageDiv).data('header-link');
$('#global-header-href').attr('href', href);
}