href vs scripted page transitions and button highlighting

问题

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.

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>

回答1:

This problem is not yet fixed apparently. changePage function for some reason interferes with button styling. This was also a problem with a navbar and changepage when I was creating my last app.

You can solve it with a little jQuery fix, you will find everything in my 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");
});

To adjust example to your needs use .each( on every a element with custom class name. Timeout function is a necessity, without it changePage would trigger before styles can be applied. You can play a bit with timeout. Sometimes, if you lower it changePage will trigger before styles are applied.

You want see this problem on a buttons with href because they already have a slight delay.

回答2:

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>

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

来源：https://stackoverflow.com/questions/13953768/href-vs-scripted-page-transitions-and-button-highlighting