3

私は、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>
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 に答える