Как внедрить одну и ту же панель в несколько страниц с помощью jquery mobile

Ответ 1

jQuery Mobile >= 1.4

• Решение:

  Используйте внешнюю панель, доступ к которой можно получить с любой страницы, это значит, что вы хотите иметь одно и то же содержимое панели на всех страницах.

  Приложите панель к $.mobile.pageContainer один раз только на pagebeforecreate, а затем увеличьте панель с помощью $(".selector").panel().

  var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
  
  $(document).one('pagebeforecreate', function () {
    $.mobile.pageContainer.prepend(panel);
    $("#mypanel").panel();
  });
  

  Добавить кнопку, чтобы открыть панель в каждом заголовке (или где угодно).

  <a href="#mypanel" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>
  

Примечание. При использовании внешней панели data-theme следует добавить в панель div, так как она не наследует ни стилей/темы.

Демо

• Решение два:

  Если вы хотите внести изменения в панель перед ее добавлением, в зависимости от количества страниц в DOM, добавьте панель к каждому из них с другим идентификатором и кнопкой, чтобы открыть эту панель.

  Обратите внимание, что вам не нужно вызывать какие-либо улучшения, потому что вы добавляете панели на pagebeforecreate. Следовательно, панели будут автоматически инициализированы после создания страницы.

  var p = 1,
      b = 1;
  $(document).one('pagebeforecreate', function () {
      $.mobile.pageContainer.find("[data-role=page]").each(function () {
          var panel = '<div data-role="panel" id="mypanel' + p + '" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
          $(this).prepend(panel);
          p++;
      });
      $.mobile.pageContainer.find("[data-role=header]").each(function () {
          var panelBtn = '<a href="#mypanel' + b + '" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>'
          $(this).append(panelBtn);
          b++;
      });
  });
  

  Демо

Примечание. Убедитесь, что вы используете .one() not .on(), если вы используете последний, панели будут добавляться всякий раз, когда создается страница.

jQuery Mobile <= 1,3

Вы можете сделать это таким образом, используя событие pagebeforecreate и проверив, нет ли уже добавленной панели. Помня о том, что разметка панелей всегда должна быть помещена перед [data-role=header], поэтому я использовал .before().

Нет необходимости вызывать какой-либо метод улучшения, поскольку панели добавляются в pagebeforecreate. Они будут инициализированы во время этого события.

Демо

Ваша панель

var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';

Динамически добавлять панели

$(document).on('pagebeforecreate', '[data-role=page]', function () {
  if ($(this).find('[data-role=panel]').length === 0) {
    $('[data-role=header]').before(panel);
  }
});

Update

Существует два альтернативных метода для динамического ввода "Внешняя панель" .

Ответ 2

Для некоторых, кто сталкивается с этой проблемой, в JQuery Mobile 1.4+ есть что-то вроде внешних панелей, которые могут облегчить нашу жизнь.

http://demos.jquerymobile.com/1.4.0/panel-external/

Вы можете сделать что-то подобное.

<div data-role="panel" id="mainPanel">
    <!-- .... -->
</div>

<div data-role="page" id="page1" >
     <!-- .... -->
</div>

<div data-role="page" id="page2" >
     <!-- .... -->
</div>

Ответ 3

Вы также можете сделать одну вещь, создающую панель в конце или в начале всех страниц, и откройте ее с помощью кода Id и script, упомянутого ниже..... его работа отлично подходит для меня.

$(function(){
 $("#navigation").enhanceWithin().panel();
});

<div data-role="page" id="page1">
        <div data-role="main" class="ui-content ui-body-a ui-responsive">
            <div data-role="header">
                <div data-role="navbar">
                    <ul>
                        <li class=""> 
                            <a href="#navigation" id="navi_toggle" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext"></a> 
                        </li>
                        
                        </li>
                    </ul>
                </div>
            </div>
    </div>
</div>
<div data-role="page" id="page2">
        <div data-role="main" class="ui-content ui-body-a ui-responsive">
            <div data-role="header">
                <div data-role="navbar">
                    <ul>
                        <li class=""> 
                            <a href="#navigation" id="navi_toggle" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext"></a> 
                        </li>
                        
                        </li>
                    </ul>
                </div>
            </div>
    </div>
</div>
 <div class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-b ui-panel-animate ui-panel-open" data-role="panel" id="navigation" data-position="left" data-display="overlay" data-theme="b" data-dismissible="true" data-swipe-close="true">
        <div class="ui-panel-inner">
            <a href="#demo-links" data-rel="close" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext" id="navi_ref"></a>
            <ul class="">
                
            </ul>
        </div>
    </div>

Ответ 4

Для того, чтобы hashcoder ответил на работу, вам нужно инициализировать внешнюю панель. Также добавьте .enhanceWithin(), чтобы сделать просмотр списков и т.д. Правильно отображаемыми на панели.

Als добавляет атрибут data-rel=... к ссылке, через которую вы хотите открыть внешнюю панель.

<script>
    $(function () {
        $("div[data-role='panel']").panel().enhanceWithin();
    });
</script>

<div data-role="panel" id="mainMenu">
    <!-- .... -->
</div>

<div data-role="page" id="page1" >
    <a href="#mainMenu" data-rel="main-menu-panel">Open main menu panel</a>
    <!-- .... -->
</div>

<div data-role="page" id="page2" >
    <a href="#mainMenu" data-rel="main-menu-panel">Open main menu panel</a>
     <!-- .... -->
</div>