Как добавить логику для конкретной страницы в jQuery Mobile? - PullRequest
Новая
       10

Как добавить логику для конкретной страницы в jQuery Mobile?

3 голосов
/ 29 ноября 2011

Я прочитал здесь , что вы не можете использовать $(document).ready() на каждой странице jqMobile.Вместо этого рекомендуем использовать pageInit() и pageCreate().Это все хорошо, но я не совсем уверен, как это осуществить.

Допустим, у меня есть список URL-адресов, которые ведут к отдельным отчетам.Каждый отчет будет содержать различные вещи, которые должны произойти при загрузке страницы.

Нужно ли размещать всю логику страницы на главной странице?

Это общий вопрос, но я приведу конкретный пример того, что я пытаюсь сделать.

Страница MVC3 Layout содержит элемент 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>

Моя цель - загрузить отчет из списка, а при загрузке отчета показать диалоговое окно параметров.Если я помещаю его в строку внутри страницы, он всегда возвращается к параметрам, потому что срабатывает при закрытии диалога (я полагаю, это полная перезагрузка страницы под ним?).

Короче говоря: как сделатьЯ загружаю диалоговое окно, когда загружается страница моего отчета, а затем делаю что-то , когда диалоговое окно параметров закрывается?Заранее спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 30 ноября 2011

"он всегда возвращается к параметрам, потому что срабатывает при закрытии диалога (я полагаю, это полная перезагрузка страницы под ним?)."

Я думаю, это потому, что вам не хватает свойства 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
});

Надеюсь, это поможет

1 голос
/ 29 ноября 2011

Мне нравится включать мой 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 Mobile версии $(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 будет сразу несколько страниц.

...