JqMOBI change 'about button' target

Question

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?

Answer 1

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);
}