我是否必须为每个页面创建一个新面板？

Question

我想在jqm站点中使用Panel来选择我的选择语言组件.因此,每个页面都需要存在该组件.以下是单页面板的设置.

来自jquerymobile.com(...我添加了一个标题按钮)

  <div id="mypanel" data-role="panel" >
    <!-- panel content goes here -->
  </div><!-- /panel -->

  <div id="myheader" data-role="header" >
    <a id='panel_toggle' data-role='button'>choose language</a>
  </div><!-- /header -->

  <!-- content -->
<!-- footer -->

</div><!-- page -->

我认为我有3个解决方案:

• A - 在每个页面上创建一个面板的副本----如果page_N上的状态发生变化,那么这将是一个问题,那么所有其他的都需要进行同步

• B - 创建一个在页面更改时以编程方式移动的单个面板 - 这看起来像是一个黑客

• C - 发现jqm是否已经解决了这个问题----因此我问的问题:)

jqm是否有办法将Panel从一个页面移动到另一个页面？

Answer 1

您最好的做法是为每个页面动态创建一个面板.

我给你一个有用的例子:http://jsfiddle.net/Gajotres/pZzrk/

$(document).on('pagebeforeshow', '[data-role="page"]', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
    $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('mypanel');
    $.mobile.activePage.find('#mypanel').panel();
    $(document).on('click', '#open-panel', function(){   
         $.mobile.activePage.find('#mypanel').panel("open");       
    });    
});

几个描述:

• $ .mobile.activePage是必需的,因为我们将在每个页面中都有相同的面板,并且所有这些面板都具有相同的ID.如果我们打开它没有活动页面,我们将在DOM中打开它的第一个出现.

jQuery Mobile开发人员已经声明,在下一个主要版本面板小部件中将不再需要成为页面的一部分,而是将其放置在与页面div相同的级别中.因此需要一个小组.不幸的是,您需要动态创建它.

Answer 2

面板是1.3中引入的新概念。所以我们希望更多的教程很快就会出现。至于你的问题，我想最好在每个页面中编写一个面板。您可以实时更改页面，但请确保调用文档中记录的以下方法。

$( "#mypanel" ).trigger( "updatelayout" );

我不确定其他方法是否可行。