JqMOBI更改“关于按钮”目标

Question

您可以在jqMOBI标题栏中找到按钮。我希望根据您所在的页面设置不同的目标。我似乎无法在页面转换结束时找到一个事件。所以我能看到这样做的唯一方法就是为每个点击添加一个看起来有点OTT的功能。

标题看起来像这样..

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

跟踪活动哈希并更改按钮目标的任何建议或有效方法？

Answer 1

我看到3个解决方案：

1.为每个面板指定一个自定义标题块，并通过向每个面板div添加data-header ='main-header'来链接它们。例如

注意：出于某种原因，Stackoverflow无法格式化我的答案，因此我将小提琴作为参考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.指定自定义功能以在所有面板更改/加载上运行。与＃1类似，将data-load ='MyOnPageLoadFunc'添加到所有面板div。 （请参阅jqMobi kitchennsink演示，了解函数'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.同为＃2，但为标题添加您自己的自定义'data-'属性。例如data-header-link ='＃about'到所有面板div。 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>

然后创建此功能

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