Как внедрить одну и ту же панель в несколько страниц, используя jquery mobile

jQuery Mobile 1.3.1 имеет очень приятную функцию скользящей панели, но код панели должен быть размещен на той же странице, на которой он используется.

Я работаю над приложением, которое должно иметь одну и ту же панель на многих страницах. Вместо репликации кода есть ли способ динамически внедрить панель в эти страницы, чтобы она все еще сохраняла функциональность панели jqm?

Источник

4 ответа

Решение

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() не .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);
  }
});

Обновить

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

Источник

Для тех, кто сталкивается с этой проблемой, в 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>
Источник

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

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

Источник

Для того, чтобы хэш-кодер реагировал на его работу, вам нужно инициализировать внешнюю панель. Также добавьте .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>
Источник
Другие вопросы по тегам