Question

我正在与knockout.js一起构建一些jQuery Mobile SPA，并且总的来说非常成功。我确实注意到了什么是化妆品问题，现在希望解决它。

通过href链接的锚标记会在页面转换期间产生一个漂亮的按钮突出显示（默认主题为蓝色），但是通过基于敲门的click绑定/ $.mobile.changePage的导航不会产生这样的效果突出。我意识到这可能与淘汰无关。

是否有任何通用的方式可以使脚本化页面转换以相同的方式工作？鉴于我使用淘汰赛，我有大量的click绑定。

<div id="page1" data-role="page">
    <div data-role="content">   
        <h1>Page 1</h1>
        <a href="#page2" data-role="button">
                Page 2 via href (with highlight)</a>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">   
        <h1>Page 2</h1>
        <a data-role="button"
            onclick="$.mobile.changePage('#page3');">
               Page 3 via script (no highlight)</a>
    </div>
</div>

<div id="page3" data-role="page">
    <div data-role="content">   
        <h1>Page 3</h1>
    </div>
</div>

Answer 1

这个问题显然尚未解决。由于某种原因，changePage函数会干扰按钮样式。当我创建我的上一个应用程序时，这也是导航栏和更改页面的问题。

你可以通过一点jQuery修复解决它，你会发现我example中的所有内容：

$('#index').live('pagebeforeshow',function(e,data){  
    $('#custom-highlight').live('click', function(e) {
        $(this).addClass("ui-focus ui-btn-active");
        setTimeout(function(){$.mobile.changePage('#second');},50)
    });
});


$("[data-role=page]").live('pagebeforeshow', function (e,data) {
    data.prevPage.find('#custom-highlight').removeClass("ui-focus ui-btn-active");
});

根据您的需要调整示例使用.each（在每个具有自定义类名称的元素上。超时功能是必需的，没有它在应用样式之前会触发changePage。您可以在超时时播放一些。有时，如果你降低了它，在应用样式之前会触发changePage。

您希望在带有href的按钮上看到此问题，因为它们已经有一点延迟。

Answer 2

在云端，我尝试同时提供href和onclick属性，这似乎解决了这个问题。只要href指向正确/结果页面，JavaScript调用仍然有效，按钮会突出显示。我希望对这种方法有一些评论。

<a data-role="button" href="#page4"
    onclick="$.mobile.changePage('#page4');">
    Page via script and href (with highlight)
</a>

根据测试，似乎href和onclick都在触发。

href与脚本化页面转换和按钮突出显示

2 个答案: