3

我正在构建许多 jQuery Mobile SPA 以及 knockout.js，并且总体上取得了巨大的成功。我确实注意到主要是一个外观问题，现在希望解决它。

通过链接的锚标签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>
4

2 回答 2

1

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

你可以用一点 jQuery 修复来解决它，你会在我的示例中找到所有内容：

$('#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 的按钮上看到这个问题，因为它们已经有一点延迟。

于 2012-12-19T15:31:11.013 回答
1

在云雀中，我尝试同时提供href和onclick属性，这似乎解决了问题。只要href指向正确/生成的页面，JavaScript 调用仍然有效并且按钮会突出显示。我很想对这种方法发表一些评论。

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

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

于 2012-12-20T21:11:09.753 回答