Comment ajouter une logique spécifique à une page à jQuery Mobile ?

StackOverflow https://stackoverflow.com/questions/8313480

Question

j'ai lu ici que tu ne peux pas utiliser $(document).ready() sur chaque page jqMobile.Au lieu de cela, il est recommandé d'utiliser pageInit() et pageCreate().Tout cela est bien beau, mais je ne sais pas trop comment procéder pour le mettre en œuvre.

Disons que j'ai une liste d'URL qui mènent toutes à des rapports distincts.Chaque rapport comportera diverses choses qui doivent se produire lors du chargement de la page.

Dois-je mettre toute la logique de la page dans la page principale ?

C'est une question générique, mais je vais donner un exemple spécifique de ce que j'essaie de faire.

Un MVC3 Layout la page contient mon élément head avec toutes les références de script.

Ensuite, j'ai ma page d'index :

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

Puis une page de destination distincte pour mon rapport :

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

Ensuite, j'ai une dernière page pour ma boîte de dialogue d'options :

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

Mon objectif est de charger le rapport à partir de la liste et, lorsque le rapport est chargé, d'afficher la boîte de dialogue d'options.Si je le mets en ligne dans la page, il revient toujours aux options car il se déclenche lorsque la boîte de dialogue se ferme (je suppose que c'est un rechargement complet de la page en dessous ?).

Donc en bref :Comment puis-je charger la boîte de dialogue lorsque ma page de rapport se charge, puis faire quelque chose quand la boîte de dialogue des options se ferme-t-elle ?

Était-ce utile?

La solution

Je souhaite inclure mon JavaScript site à l'échelle à la fin de chaque document HTML, donc si l'utilisateur rafraîchi la page sur une page du site, que JavaScript se charge et être disponible pour le site. Ma structure ressemble à quelque chose comme ceci: 

<!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>

Notez que jQuery Mobile est inclus dans le <head> du document et mon JavaScript personnalisée (default.js) est inclus au bas de la page pour ne pas bloquer le rendu des pages.

Maintenant, pour utiliser la version 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
});

Il faut aussi prudent d'utiliser des ID car ils doivent être l'ensemble du site unique si deux pages ont un élément avec le même ID, il causera des problèmes autant de pages seront dans les DOM à la fois.

Autres conseils

"il revient toujours aux options car il se déclenche lorsque la boîte de dialogue se ferme (je suppose que c'est un rechargement complet de la page en dessous ?)."

Je pense que c'est parce qu'il vous manque la propriété HREF sur votre balise A - quel est le nom de la boîte de dialogue que vous essayez d'ouvrir ?

<a id="btnOpts" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="pop">Options</a>

C'est peut-être la raison pour laquelle la page entière est actualisée au lieu de simplement laisser JQM charger cette boîte de dialogue pour vous.Une fois que cela fonctionne, vous pouvez utiliser la suggestion fournie par @Jasper, c'est-à-dire

$("#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
});

J'espère que cela t'aides

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top