JqMOBI更改“about button”目标

Question

您可以在jqMOBI标题栏中使用按钮。我希望这有一个不同的目标取决于你在什么页面上。我似乎找不到一个事件来结束页面转换。因此，我能看到的唯一方法是为每个点击添加一个函数，这看起来有点OTT。

标题看起来像这样。

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

有什么建议或有效的方法来跟踪活动的散列并更改按钮的目标吗？

Answer 1

我看到了3种解决方案：

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

注意:由于某些原因，Stackoverflow在格式化我的答案时遇到了问题，所以我将该小提琴作为 **的参考资料包括在内

<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。(有关'loadedPanel‘功能，请参阅jqMobi厨房链接演示。这基本上就是解决方案。

<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相同，但为header添加您自己的自定义“data-”属性。例如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);
}