jQuery Mobile内部页面问题

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

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

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

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

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

谢谢你的时间。

来源

2012-08-07 Oliver Spryn

我发现此解决方案是处理我的情况的最有效方式。它不需要使用锚标签上的类来指示链接是否包含单独的页面。这段代码只会查找其他页面，全部在一个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-08 22:11:31

您的'document.pageload'事件处理程序将在每次页面初始化时被绑定。你已经有了'if/then'语句，所以你不会多次添加伪页面，但是你仍然为每个初始化的伪页面运行一次'document.pageload'事件。所以通过第四页，“document.pageload”事件处理程序将运行4次而不是一次。基本上你可以删除外部的委托事件处理程序，因为你的'document.pageload'几乎是一样的东西。好东西，但清理了一下，我一定会投票。 – Jasper 2012-08-08 22:32:18

@Jasper哈哈甚至没有想到这一点。谢谢你收到。 – 2012-08-08 22:44:13

当我运行这个代码时，数据总是有0的计数。我在属性中有几个带'data-role =“page”'的div。有任何想法吗？ – ZeroDivide 2012-11-07 21:36:55

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-07 21:05:32 Jasper

啊....好主意！让我试试看，我会让你知道我的结果。只是出于好奇。如果用户在一个会话中多次访问该页面。这看起来像它会继续将内部页面添加到DOM，即使这些页面已经存在并且具有相同的ID。我应该检查这个，因为我将页面添加到DOM，不是吗？ – 2012-08-07 21:12:31

我实际上刚刚在jQM文档页面上发现了这个：https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget – 2012-08-07 21:15:18

@ spryno724是的，你会想检查假的页面是否已经在DOM中。这很简单，您可以通过ID选择，如果出现问题，只需将其替换为新的，或者保留旧的。 – Jasper 2012-08-07 21:21:22

jQuery Mobile内部页面问题

回答

相关问题