0

jQuery Mobile アプリケーションで、動的コンテンツを含むページをロードするために Ajax を使用しています。今、そのページに「リロード」ボタンを追加したいと思います。

考慮してくださいindex.html：

<div data-role="page" id="home">
  <div data-role="header"><h1>Home</h1></div>
  <div data-role="content"><a href="time.php">Time</a></div>
</div>

そしてtime.php：

<div data-role="page" data-add-back-btn="true" id="time">
  <div data-role="header"><h1>Time</h1></div>
  <div data-role="content">
     <p><?= date(DATE_RFC822)?></p>
     <a href="#" data-role="button" data-icon="refresh">Reload</a>
  </div>
</div>

「ホーム」ページと「時間」ページを行き来できるようになり、「時間」ページに到着すると時間が更新されますが、「時間」ページをリロードするには「リロード」ボタンが必要です。つまり、 に対して Ajax リクエストを実行しtime.php、レスポンスから「時間」ページを再作成する必要があります (その間、「ページの読み込み」インジケーターを表示します)。

どうやってやるの？

4

2 に答える 2

1

のコードを見てchangePage、loadPageより簡単な解決策を思いつきました。

$('.reload').live('click', function(e) {
  $.mobile.changePage($.mobile.activePage.jqmData('url'), {
    reloadPage: true,
    changeHash: false,
    transition: 'none'
  });
  e.preventDefault();
});

JQM は、古いバージョンのページと新しいバージョンの間で引き続き遷移することに注意してください。方向感覚の強いトランジション (「スライド」など) は使用しないことをお勧めします。

preventDefault厳密には必要ないようですが、念のため追加しました。

于 2012-09-24T10:40:40.950 に答える
0

hijax スタイルのリンクを使用している場合、これは不可能のようです。ただし、複数ページの HTML ドキュメントを使用して、動的なページ コンテンツを自分でpagebeforechangeイベントにロードすることはできます。

では、index.html空のコンテンツを含む「時間」ページを既に追加しています。

<div data-role="page" id="home"> 
  <div data-role="header"><h1>Home</h1></div> 
  <div data-role="content"><a href="#time">Time</a></div> 
</div> 

<div data-role="page" data-add-back-btn="true" id="time"> 
  <div data-role="header"> 
    <h1>Time</h1> 
    <a href="#" class="reload ui-btn-right" data-role="button" data-icon="refresh">Reload</a> 
  </div> 
  <div data-role="content"></div> 
</div>

次に、pagebeforechangeイベントをインターセプトします。「時間」ページの場合、URL からページ コンテンツを読み込みますtime.php。

$(document).bind('pagebeforechange', function(e, data) {
    if(typeof data.toPage == 'string') {
        var u = $.mobile.path.parseUrl(data.toPage);
        if(u.hash == "#time") {
            loadPageContent($('#time'), 'time.php', data.options);
            e.preventDefault();
        }
    }
});

ページを変更する前に Ajax リクエストが戻ってくるのを待ちたいので、ページの変更を防ぎます。loadPageContentこれを行う必要があります。

loadPageContent「リロード」ボタンについても同様のことができます。

$(document).ready(function() {
    $('#time .reload').bind('click', function(e) {
        loadPageContent($('#time'), 'time.php', undefined, $(e.target).closest(".ui-btn"));
    });
});

これはのコードですloadPageContent:

function loadPageContent(page, url, options, button) {
    if(typeof button != "undefined")
        button.addClass($.mobile.activeBtnClass);
    $.mobile.showPageLoadingMsg($.mobile.loadingMessageTheme, $.mobile.loadingMessage, $.mobile.loadingMessageTextVisible);
    var content = page.children(':jqmData(role=content)');
    content.load(url, function(response, status, xhr) {
        if(status == "success") {
            page.page();
            content.trigger('create');
            $.mobile.hidePageLoadingMsg();
            if(typeof button != "undefined")
                button.removeClass($.mobile.activeBtnClass);
            $.mobile.changePage(page, options);
        } else {
            $.mobile.hidePageLoadingMsg();
            $.mobile.showPageLoadingMsg($.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true);
            setTimeout(function() {
                $.mobile.hidePageLoadingMsg();
                if(typeof button != "undefined")
                    button.removeClass($.mobile.activeBtnClass);
            }, 1000);
        }
    });
}

これはすでに非常に手の込んだバージョンです。ページの読み込みメッセージが表示され、リクエストが失敗すると 1 秒間エラー メッセージが表示されます。createリクエストが成功すると、トリガーでコンテンツを強化し、ページの変更を行います。リロード ボタンが渡されると、操作の進行中にこのボタンがアクティブとしてマークされます。

于 2012-09-20T14:48:54.010 に答える