2

我正在使用 jQuery Mobile 中的内部页面功能，它可以正常工作，但仅限于特定情况。应用程序中的大多数链接都使用 jQuery 的“标准”加载功能（通过 AJAX 加载所需的页面，并将第一个容器data-role="page"放置在 DOM 中）。

但是，有几个页面包含多个带有 的容器data-role="page"，这些容器旨在用作内部页面。换句话说，pageHTML 文档中的第一个容器包含链接，这些链接将在内部链接到 DOM 中的其他页面。

使用上述“标准”加载方法，内部链接不起作用。但是，重新加载页面以加载整个 DOM 可以解决此问题。

我知道我可以通过在链接中添加一个属性来链接到该页面rel="external"，但是这样做会删除 jQuery Mobile 通过“标准”加载方法提供的所有漂亮转换。

如何在不添加rel="external"属性的情况下解决此问题？

感谢您的时间。

4

2 回答 2

2

我发现此解决方案是处理我的情况的最有效方式。它不需要在锚标记上使用类来指示链接是否包含单独的页面。此代码将仅在单个 HTTP 请求中查找其他页面。

Jasper 让我的轮子朝着正确的方向旋转。

(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>部分甚至被省略。

解决方法是将所有页面放入单个 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 回答