我必须为每个页面创建一个新面板吗？ [英] Do I have to create a new panel for every page?

问题描述

我想在jqm网站中使用面板作为我的选择语言组件。因此，该组件将需要存在于每个页面上。以下是单页面板的设置。

从 jquerymobile.com （...我添加了标题按钮）

 < div id =mypaneldata-role =panel> 
<！ -  panel content goes here  - > 
< / div><！ -  / panel  - > 
 
< div id =myheaderdata-role =header> 
< a id ='panel_toggle'data-role ='button'>选择语言< / a> 
< / div><！ -  / header  - > 
 
<！ -  content  - > 
<！ -  footer  - > 
 
< / div><！ -  page  - > 
  

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

• A - 在每个页面上创建面板的副本
  ----这将是一个问题，如果page_N的状态更改，那么所有其他人将需要




• B - 创建一个在页面更改上被移动的单个面板
  ----这看起来像一个hack




• C - 发现如果jqm已经有这个问题的解决方案
  ----因此我问的问题：）

  j>
  
  >
  
  
  

  我让你成为一个工作范例： 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 mypanel'）; 
   $ .mobile.activePage.find（'＃mypanel'）。panel（）; 
   $（document）.on（'click'，'＃open-panel'，function（）{
   $ .mobile.activePage.find（'＃mypanel'）。 ; 
  }）; 
  }）; 
    

  几个说明：

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

  jQuery Mobile开发人员表示，面板小部件将不再需要是页面的一部分，而是将其放置在与页面div相同的级别。所以一个面板将需要。很遗憾，您需要动态创建它。

  
  

  I would like to use a Panel in a jqm site for my Choose Language component. So that component will need to be present on every page. Here is the setup for a single-page panel.

  from jquerymobile.com ( ... I added a header button)

    <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 -->
  

  I figure that I have 3 solutions:

  • A - create a duplicate copy of the panel on every page ---- this will be a problem if the state on page_N changes, then all others will need to be synshronized

  • B - create a single panel that is pro-grammatically moved on page changes ---- this seems like a hack

  • C - discover if jqm already has a solution to this problem ---- hence I am asking the question :)

  Does jqm have a way to move a Panel from page to page?

  解决方案

  Your best course of action is to dynamically create a panel for every page.

  I made you a working example: 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");       
      });    
  });
  

  Few descriptions:

  • $.mobile.activePage is needed because we will have same panel in every page, and all of them will have same id. If we open it without active page we will open its first occurrence inside the DOM.

  jQuery Mobile developers have stated that in next major version panel widget will no longer need to be part of a page, instead it will be placed in a same level as a page div. So one panel will ne needed. Unfortunately you will need to dynamically create it.

  这篇关于我必须为每个页面创建一个新面板吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！