Как вы добавляете логику, специфичную для страницы, в jQuery Mobile?
-
25-10-2019 - |
Вопрос
Я читал здесь которые вы не можете использовать $(document).ready()
на каждой странице JQMobile.Вместо этого рекомендуется использовать pageInit()
и pageCreate()
.Все это прекрасно, но я не совсем уверен, как это реализовать.
Допустим, у меня есть список URL-адресов, которые ведут к отдельным отчетам.В каждом отчете будут содержаться различные вещи, которые должны произойти при загрузке страницы.
Должен ли я поместить всю логику страницы на главную страницу?
Это общий вопрос, но я приведу конкретный пример того, что я пытаюсь сделать.
MVC3 Layout
на странице есть элемент my head со всеми ссылками на скрипт.
Тогда у меня есть моя индексная страница:
<div data-role="page" data-add-back-btn="true">
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-theme="a">
<li data-role="list-divider" data-theme="a">Category 1</li>
<li><a href="someUrl" data-transition="slideup">Link 1</a></li>
</ul>
</div>
</div>
Затем отдельная целевая страница для моего отчета:
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-theme="a">
<h1>Report 1</h1>
<a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>
</div>
Затем у меня есть последняя страница для моего диалогового окна параметров:
<div id="dlgOpts" data-role="page" data-theme="a">
<div data-role="content">
<h2>Please select the report options:</h2>
<div data-role="fieldcontain">
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" data-role="datebox" data-options='{"mode": "datebox"}' />
</div>
<div data-role="fieldcontain">
<label for="endDate">End Date:</label>
<input type="date" id="endDate" data-role="datebox" data-options='{"mode": "calbox"}' />
</div>
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-icon="back" data-role="button" data-rel="back">Cancel</a></div>
<div class="ui-block-b"><a href="#" data-icon="check" data-role="button" data-rel="back">Ok</a></div>
</div>
</div>
Моя цель - загрузить отчет из списка, а когда отчет загрузится, показать диалоговое окно параметров.Если я помещаю его встроенным на страницу, он всегда возвращается к параметрам, потому что он срабатывает при закрытии диалогового окна (я предполагаю, что это полная перезагрузка страницы под ним?).
Итак, вкратце:Как мне загрузить диалоговое окно при загрузке страницы моего отчета, а затем выполнить что - то когда закроется диалоговое окно параметров?
Решение
Мне нравится включать мой JavaScript в конце каждого документа HTML, поэтому, если пользователь обновил страницу на любой странице на сайте, JavaScript загрузится и будет доступен для сайта. Моя структура выглядит примерно так:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>My Fancy Mobile Title</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="library/css/default.css">
<script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<!-- Content Here -->
</div>
</div>
<script src="library/js/default.js"></script></script>
</body>
</html>
Обратите внимание, что JQuery Mobile включен в <head>
о документе и моем пользовательском JavaScript (default.js
) включен в нижней части страницы, чтобы не блокировать рендеринг страницы.
Теперь использовать мобильную версию jQuery $(document).ready();
:
$('[data-role="page"]').live('pagecreate', function () {
//code here will run each time a page is enhanced by jQuery Mobile, which will be once per page
});
$('[data-role="page"]').live('pageshow', function () {
//code here will run each time a page is navigated to, which can be many times if the user navigates away and back
});
//you can also bind to specific pages
$('#home').live('pageshow', function () {
//code here will run each time the `#home` page is shown
});
//you can bind to any selector that selects the `data-role="page"` elements
$('.page_element_class').live('pageshow', function () {
//code here will run each time any page with the `.page_element_class` class is shown
});
Также будьте осторожны с использованием идентификаторов, так как они должны быть уникальными по всему сайту, если у двух страниц есть элемент с тем же идентификатором, это вызовет проблемы, поскольку многие страницы будут в DOM сразу.
Другие советы
"он всегда возвращается к параметрам, потому что срабатывает при закрытии диалогового окна (я предполагаю, что это полная перезагрузка страницы под ним?)".
Я думаю, это потому, что вам не хватает свойства HREF в вашем теге A - как называется диалоговое окно, которое вы пытаетесь открыть?
<a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>
Возможно, это причина, по которой обновляется вся страница вместо того, чтобы просто позволить JQM загрузить это диалоговое окно для вас.Как только это сработает, вы можете использовать предложение, предоставленное @Jasper, т.е.
$("#dialogname").live("pagebeforeshow", function(e, data){
// here you prepare your dialog contents
});
$("#dialogname").live("pagebeforehide", function(e, data){
// here you finalize before your dialog disappears
});
Надеюсь, это поможет