jQuery Mobile 1.3.1 имеет очень приятную функцию раздвижной панели, но код панели должен быть размещен на той же странице, на которой он использовался.
Я работаю над приложением, которое должно иметь одну и ту же панель на многих страницах. Вместо того, чтобы копировать код, есть ли способ динамически вводить панель на эти страницы, чтобы она все еще сохраняла функциональность панели jqm?
Решение:
Используйте внешнюю панель, доступ к которой можно получить с любой страницы, это значит, что вы хотите иметь одно и то же содержимое панели на всех страницах.
Приложите панель к $.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(), если вы используете последний, панели будут добавляться всякий раз, когда создается страница.
Вы можете сделать это таким образом, используя событие 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>
Вы также можете сделать одну вещь, создающую панель в конце или в начале всех страниц, и откройте ее с помощью кода 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>Для того, чтобы 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>