导航到JQuery Mobile中的div标签内的页面(1.4.5)

时间:2017-03-21 11:34:02

标签: jquery jquery-mobile navigation riot.js

我的jQm程序需要生成包含jqm页面的嵌套标签(通过riotjs)。这导致jqm 1.4.5找不到嵌套页面。我在Navigate to page that is inside div tag in JQuery Mobile找到了jqm 1.3.2的解决方案,但1.4.5我在代码和http://api.jquerymobile.com/pagecontainer/中挣扎。我的多页设置如下:

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1> 
  </div>
  <div data-role="content">
    <a href="#page2" data-role="button" class="to-body-page">Go to Page 2 - body container</a>
    <a href="#page2" data-role="button" class="to-container-page">Go to Page 2 - different container</a>
  </div>
</div>
<div data-role="page" id="page2" >
  <div data-role="header">
    <h1>Page 2 - body container</h1> 
  </div>
  <div data-role="content">
    <a href="#page1" data-role="button">Go to Page 1</a>
  </div>
</div>
<!-- container 2 -->
<decision-keys>
  <decisiontree>
    <decision>
      <div id="Container2">
        <div data-role="page" id="page2" data-theme="a">
          <div data-role="header">
            <h1>Page 2 - different Container</h1> 
          </div>
          <div data-role="content">
            <a href="#page1" data-role="button">Go to Page 1</a>
          </div>
        </div>
      </div>
      <!-- /container 2 -->
    </decision>
  </decisiontree>
</decision-keys>

JavaScript的:

// modified from http://jsfiddle.net/Palestinian/b4YJL/
$(".to-container-page").on("click", function (e) {
  /* Version jQm 1.3.2
    $.mobile.pageContainer = $("#Container2");
    $.mobile.changePage("#page2", {
        transition: "none"
    });
    */
  /* Version jQm 1.4.5 */
  $('#Container2').pagecontainer( );// ?correct
  $('#Container2').pagecontainer( 
    "change", "#page2"
  );
});
$(".to-body-page").on("click", function (e) {
    /* Version jQm 1.3.2
    $.mobile.pageContainer = $("body");
    $.mobile.changePage("#page2");
    */
  /* Version jQm 1.4.5 */
  $('body').pagecontainer();
  $('body').pagecontainer( 
    "change", "#page2"
  );
});

如果我只使用$('#Container2').pagecontainer("change", "#page2"); jQuery报告:

  

错误:在初始化之前无法调用pagecontainer上的方法;试图调用方法&#39;更改&#39;

我创建了一个演示,但它从嵌套的pagecontainer返回到body-pagecontainer:https://jsfiddle.net/InfiniteDao/3vnsho76/

如果页面容器不是body的直接子项,那么它是否正确使用了什么?我想知道如何在jqm 1.4.5中正确使用它,你能提供任何帮助吗?

非常感谢。

0 个答案:

没有答案