2

私はjQueryMobileの内部ページ機能を使用していますが、これは正常に機能しますが、特定の場合に限られます。アプリケーション内のほとんどのリンクは、jQueryの「標準」ロード機能を使用します（目的のページがAJAXを介してロードされ、最初のコンテナーがdata-role="page"DOMに配置されます）。

data-role="page"ただし、内部ページとして使用することを目的とした、が付いた複数のコンテナを含むページがいくつかあります。つまり、HTMLドキュメントの最初のpageコンテナには、DOM内の他のページに内部的にリンクするリンクが含まれています。

上記の「標準」ロード方法を使用すると、内部リンクは機能しません。ただし、DOM全体がロードされるようにページをリロードすると、この問題は解決します。

リンクの属性を追加することでこのページにリンクできることはわかっていrel="external"ますが、そうすることで、jQueryMobileが「標準」の読み込み方法で提供する優れたトランジションがすべて削除されます。

rel="external"属性を追加せずにこの問題を解決するにはどうすればよいですか？

お時間をいただきありがとうございます。

4

2 に答える 2

2

私は、この解決策が私の状況を処理するための最も効率的な方法であることに気づきました。リンクに個別のページが含まれるかどうかを示すために、アンカータグでクラスを使用する必要はありません。このコードは、すべて単一のHTTPリクエスト内で追加のページを検索するだけです。

ジャスパーは私の車輪を正しい方向に回転させました。

(function($) {
/**
 * This code will load all of the internal pages within the DOM of an HTML element
 * and transition the first one into place, just as the "standard" way of loading
 * a page, but it includes all internal pages
*/

  $(document).bind('pageload', function(event, ui) {
  //Find all of the pages and dialogs in the DOM
    var response = ui.xhr.responseText;
    var data = $(response).filter('section[data-role="page"], section[data-role="dialog"]');

  //Make sure that the given psuedo page does not already exist before adding it
  //Skip the first matched element, since jQM automatically inserted it for us
    for (var i = 1; i <= data.length - 1; i++) {
      var current = data.eq(i);

      if (current.attr('id') && !document.getElementById(current.attr('id'))) {
        current.appendTo('body');
      }
    }
  });
})(jQuery);
于 2012-08-08T22:11:31.317 に答える
1

デフォルトでは、jQuery Mobileは外部ドキュメントから最初data-role="page"または最初の要素のみを読み込みます。セクションも省略されていますdata-role="dialog"。<head>

解決策は、すべてのページを 1 つの HTML ドキュメントに入れるか、各疑似ページを独自の HTML ドキュメントに入れることです。

外部ドキュメント内のすべての疑似ページを手動で取得するコードを作成できます。

HTML --

<a class="multi-page-link" href="some-external-document.html"></a>

JS --

//when a pseudo-page initializes this code will run
$(document).delegate('.ui-page', 'pageinit', function () {

    //find elements tagged with the above class and bind to their `click` events
    $(this).find('.multi-page-link').bind('click', function () {

        //show the loading spinner
        $.mobile.showPageLoadingMsg();

        //create AJAX request for href of link
        $.ajax({
            url      : this.href,
            dataType : 'html',
            success  : function (response) {

                //on successful response, find all the pseudo-page elements in the external document and append them to the `<BODY>`
                var $pseudoPages = $(response).filter('[data-role="page"], [data-role="dialog"]').appendTo('body');

                //now hide the loading spinner
                $.mobile.hidePageLoadingMsg();

                //and navigate to the first pseudo-page that was just added to the DOM
                $.mobile.changePage($pseudoPages.eq(0));
            },
            error    : function (a, b, c) { /*Don't for get to handle errors*/ }
        });
        return false;
    });
});

これにはプラグインがあると思いますが、それがどこにあるか、サポートされているかどうかはわかりません。

于 2012-08-07T21:05:32.117 に答える