Question

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

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

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

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

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

感谢您的时间。

Answer 1

我发现这个解决方案是处理我情况的最有效方式。它不需要在锚标记上使用类来指示链接是否包含单独的页面。此代码只会在单个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);

Answer 2

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;
    });
});

我认为有一个插件，但我不知道它在哪里或是否得到支持。

jQuery Mobile内部页面问题

2 个答案: