href与脚本化页面转换和按钮突出显示 [英] href vs scripted page transitions and button highlighting

问题描述

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

I am building a number of jQuery Mobile SPAs along with knockout.js and in general having great success. I did notice what is mostly a cosmetic issue an now hope to solve it.

通过 href 链接的锚标签在页面转换期间产生一个漂亮的按钮突出显示（默认主题为蓝色），但是通过knockout 点击绑定/ $。mobile.changePage 没有产生这样的亮点。我意识到这可能与淘汰无关。

Anchor tags that link via href produce a nice button highlight (in blue for the default theme) affect during a page transition but navigation via knockout's click binding / $.mobile.changePage produces no such highlight. I realize this likely has nothing to do with knockout.

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

Is there any general purpose way that scripted page transitions could be made to work the same way? I have a large number of click bindings given my use of knockout.

<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>

推荐答案

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

On a lark, I tried providing both href and onclick attributes and this seems to solve the problem. So long as the href points to the correct / resulting page, the JavaScript invocation still works and the button gets highlighted. I would love some comments on this approach.

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

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

Based on testing, it appears that both the href and onclick are firing.

这篇关于href与脚本化页面转换和按钮突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！