jQuery Mobile的内部网页问题 [英] jQuery Mobile Internal Pages Issue

问题描述

我现在用的是内部网页jQuery Mobile的工作正常，但只有在特定的情况下，内部功能。大多数应用程序内的链接中使用jQuery（其中所需的页面通过AJAX加载，第一个容器的标准加载功能与数据角色=页面被放置在DOM）。

I am using the internal pages feature within jQuery Mobile that works fine, but only in specific cases. Most of the links within the application use the "standard" loading features of jQuery (where the desired page is loaded via AJAX, and the first container with data-role="page" is placed in the DOM).

不过，也有包含多个容器用数据角色=页面几页，它的目的是作为内部网页。换句话说，第一个页容器中的HTML文档中包含的链接，将内部的DOM中链接到其他网页。

However, there are several pages that contain multiple containers with a data-role="page", which are intended to used as internal pages. In other words, the first page container in the HTML document contains links which will internally link to the other pages within the DOM.

使用上述标准加载方法，内部链接不工作。然而，这样，整个DOM装载重载页面解决了这个问题。

Using the "standard" loading method described above, the internal links do not work. However, reloading the page so that the entire DOM is loaded solves this issue.

我知道我可以通过添加网页链接一个相对=外部属性链接，但这样做的方式来消除所有的好的转变了jQuery Mobile的通过加载的标准方法提供。

I know I could link to this page by adding a rel="external" attribute the link, but doing it that way removes all of the nice transitions that jQuery Mobile provides via the "standard" method of loading.

我该如何解决，而不添加相对=外部属性这个问题？

How can I solve this issue without adding a rel="external" attribute?

感谢您的时间。

推荐答案

我发现这个解决方案是最有效的方式来处理我的处境。它不需要使用类上的锚标签，以指示链路是否将包括多个网页。这code就干脆寻找更多的页面，都在一个HTTP请求。​​

I have found this solution to be the most efficient manner for handling my situation. It does not require the use of classes on anchor tags to indicate whether or not the link will include separate pages. This code will simply look for additional pages, all within a single HTTP request.

碧玉得到了我的车轮旋转方向是正确的。

Jasper got my wheels spinning in the right direction.

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

这篇关于jQuery Mobile的内部网页问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！