2

您可以在 jqMOBI 标题栏中使用按钮。我希望这有一个不同的目标，具体取决于您所在的页面。我似乎找不到页面转换结束的事件。所以我能看到的唯一方法是为每个水龙头添加一个功能，这似乎有点 OTT。

标题看起来像这样..

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

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

4

1 回答 1

0

我看到 3 个解决方案：

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

注意：由于某种原因，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。（有关“loadedPanel”功能，请参阅 jqMobi kitchensink 演示。这基本上是解决方案）例如

<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-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);
}
于 2013-05-18T14:51:18.723 回答