Erstellen von dynamischen Dialogseite in jQuery Mobile

Der folgende Code erstellt eine Dialogseite in jQuery Mobile:Erstellen von dynamischen Dialogseite in jQuery Mobile

<a href="#dialogPage" data-transition="none">open dialog page</a>

Wie kann ich diese Dialogseite dynamisch:

<div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right"> 
    <div data-role="header"> 
    <h2> replace html </h2> 
    </div> 
     <div role="main" class="ui-content"> 
     <p> replace html </p> 
     <a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">close dialog page</a> 
     </div> 

</div>

Die Seite zur Zeit mit aufgerufen wird damit ich den html in den Inhaltsbereichen "header" und "main" ersetzen kann, wenn der Benutzer auf ein eindeutiges Ankerelement klickt. Ich muss in der Lage sein, mehrere Anchor-Tags zu erstellen, die jeweils den Inhalt derselben Dialogseite dynamisch ändern können. Zum Beispiel:

<a href="#button1" data-transition="none">button1</a> 

<a href="#button2" data-transition="none">button2</a>

Quelle

2017-12-24 user3334789

Sie müssen nur die pagecontainerbeforeshow Trigger verwenden:

var data = { 
 
    "dialog-1": { 
 
     title: "Choose one:", 
 
     content: [ 
 
     '<fieldset data-role="controlgroup" data-type="horizontal">', 
 
     '<legend>Horizontal controlgroup, checkbox:</legend>', 
 
     '<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">', 
 
     '<label for="checkbox-h-2a">One</label>', 
 
     '<input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">', 
 
     '<label for="checkbox-h-2b">Two</label>', 
 
     '<input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">', 
 
     '<label for="checkbox-h-2c">Three</label>', 
 
     '</fieldset>' 
 
     ].join("") 
 
    }, 
 
    "dialog-2": { 
 
     title: "Search:", 
 
     content: [ 
 
     '<label for="search-2">Search Input:</label>', 
 
     '<input name="search-2" id="search-2" value="" type="search">' 
 

 
     ].join("") 
 
    } 
 
    }, 
 
    calle = ""; 
 

 
$(document).on("vclick", "a[data-dialog]", function(e) { 
 
    calle = $(this).data("dialog"); 
 
}); 
 

 
$(document).on("pagecontainerbeforeshow", function(e, ui) { 
 
    var pageId = ui.toPage.attr("id"); 
 
    if (pageId == "dialogPage") { 
 
    $("#dialogPage .ui-title").text(data[calle].title); 
 
    $("#dialogContent").html(data[calle].content); 
 
    $("#dialogPage").enhanceWithin(); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page" id="page-one"> 
 
    <div data-theme="a" data-role="header" data-position="fixed"> 
 
     <h2>List Page</h2> 
 
    </div> 
 
    <div data-role="content"> 
 
     <a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-1" data-transition="none">Callee 1</a> 
 
     <a class="ui-btn ui-btn-inline" href="#dialogPage" data-dialog="dialog-2" data-transition="none">Callee 2</a> 
 
    </div> 
 
    <div data-theme="a" data-role="footer" data-position="fixed"> 
 
     <h3>Footer</h3> 
 
    </div> 
 
    </div> 
 
    <div data-role="page" id="dialogPage" data-dialog="true" data-theme="b" data-close-btn="right"> 
 
    <div data-role="header"> 
 
     <h2> replace html </h2> 
 
    </div> 
 
    <div role="main" class="ui-content ui-page-theme-b"> 
 
     <div id="dialogContent"> replace html </div> 
 
     <a href="pg_2" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">close dialog page</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-12-24 17:57:46 deblocker

ich mehr klar gewesen, in meiner Frage haben sollte. Der Code, den du gepostet hast, funktioniert großartig, aber wie würde ich ihn ändern, so dass ich mehrere Ankerelemente mit jeweils einer eigenen 'ID' aufrufen und dann dynamisch die Dialogseite ändern könnte, je nachdem, welcher Anker gedrückt wurde? Ich habe die Frage aktualisiert, also macht es hoffentlich mehr Sinn, was ich gefragt habe. – user3334789

Sie müssen den Ursprung der Daten festlegen, wenn der Anker verwendet wird (angeklickt oder geklopft). Siehe meine aktualisierte Antwort. – deblocker

Funktioniert gut! Vielen Dank. Ich habe versucht, den "href" für die "close dialog page" von "pg_2" auf "#" zu ändern. Es ist eine viel bessere Möglichkeit, eine Zurück-Schaltfläche zu erstellen. Ich wollte nur diesen Wert für jeden ändern, der dies in der Zukunft nutzt. – user3334789

Erstellen von dynamischen Dialogseite in jQuery Mobile

Antwort

Verwandte Themen