it-swarm.com.de

Erstellen Sie nach dem Klicken dynamisch eine jQuery Mobile-Seite über JavaScript

Meine jQuery Mobile-App besteht aus einer einzelnen index.html-Seite und enthält beim Start nur eine Seite mit einem Link:

<div data-role="page">
  <div data-role="content">
    <a id="startPageLink" href="startPage">start</a>
  </div>
</div>

Wenn der Benutzer auf den Startlink klickt, möchte ich den Inhalt für die startPage asynchron von meiner JSON-API laden. Beim Callback möchte ich alle erforderlichen DOM-Elemente für startPage über JavaScript erstellen und den Inhalt hinzufügen. Ich habe dafür eine createStartPage(data)-Methode erstellt.

Was ist der richtige Weg, um solche dynamisch erstellten Seiten zu implementieren, damit auch index.html#startPage funktioniert? Ich denke, es sollte eine Möglichkeit geben, in $.mobile.changePage() eine Verbindung herzustellen, um benutzerdefinierten Code zum Laden/Erstellen von Seiten einzuschließen, aber ich habe nichts gefunden. Oder gibt es eine bessere Lösung für dieses Problem?

21
Witek

Ich hatte etwas Zeit damit herumzuspielen und ich habe eine Lösung gefunden, die funktioniert (getestet).

EINIGE NOTIZEN:

  1. das in $ (document) .ready () gekapselte Javascript; ist für das dynamische Erstellen einer Seite, wenn der Benutzer zu Ihrer index.html-Datei mit bereits angehängtem Hash-Zeichen navigiert (d. h. index.html # some_hash_mark).
  2. Die Funktion create_page (page_id) dient zum Erstellen einer Seite aus einem Link (oder programmgesteuert, wenn Sie möchten).
  3. Beachten Sie, dass das Jquery-Kernskript und das mobile Jquery-Css vor der Anweisung $ (document) .ready () geladen werden, das mobile Jquery-Skript jedoch danach geladen wird.
  4. Stellen Sie sicher, dass dem body-Tag eine ID zugewiesen wurde, die beim Anhängen von Seiten aufgefrischt wird.

Belegmuster

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

    //check if hash exists and that it is not for the home screen
    if (window.location.hash != '' && window.location.hash != '#page_0') {

        //set whatever content you want to put into the new page
        var content_string = 'Some ' + window.location.hash + ' text...<br><br><a href="#page_0">go to home screen</a>';

        //append the new page onto the end of the body
        $('#page_body').append('<div data-role="page" id="' + window.location.hash.replace('#','') + '"><div data-role="content">' + content_string + '</div></div>');

        //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
        $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + window.location.hash.replace('#','') + '">go to ' + window.location.hash.replace('#','') + ' page</a>');
    }
});
function create_page(page_id) {

    //set whatever content you want to put into the new page
    var string = 'FOO BAR page...<br><br><a href="#page_0">return to home screen</a>';

    //append the new page onto the end of the body
    $('#page_body').append('<div data-role="page" id="' + page_id + '"><div data-role="content">' + string + '</div></div>');

    //initialize the new page 
    $.mobile.initializePage();

    //navigate to the new page
    $.mobile.changePage("#" + page_id, "pop", false, true);

    //add a link on the home screen to navaigate to the new page (just so nav isn't broken if user goes from new page to home screen)
    $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');

    //refresh the home screen so new link is given proper css
    $('#page_0 div[data-role="content"]').page();
}
</script>
<title>Fixed Headers Example</title>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body id="page_body">
<div data-role="page" id="page_0">
<div data-role="content">Some #page_0 text...<br><br><a href="javascript: create_page('foo_bar_page');">create new page</a></div>
</div>


</body>
</html>
23
Jasper

Hier ist meine Methode zum dynamischen Hinzufügen von Inhalten zu meinen Jquery Mobile-Websites:

  1. Zuerst erstelle ich eine "Wrapper" -Datenrolle = Seitendiv wie folgt:

    <div data-role="page" id="my_page_id">
    <div data-role="content">
        <script>
        $('#my_page_id').live('pageshow', function() {
            my_data_loading_function('my_page_id');
        });
        </script>
    <div id="my_page_id-content"></div>
    </div><!--/content-->
    </div><!--/page-->
    
  2. Als nächstes lade ich Daten von einer externen Quelle in ein div-Tag auf meiner "Wrapper" -Seite: 

    function my_data_loading_function(page) {
        if ($('#' + page + '-content').is(':empty')) {
            $.mobile.pageLoading();
            $('#' + page + '-content').load("my_external_script.php", function() {
                $.mobile.pageLoading(true);
                $('#' + page + '-content ul').listview();
                $('#' + page + '-content ul').page();
            });
        }
    }
    

Einige Notizen:

  • $ .mobile.pageLoading (); und $ .mobile.pageLoading (true); Den Jquery Mobile-Ladespinner ein- bzw. ausblenden.

  • if ($ ('#' + page + '-content'). is (': empty')) {gibt dem Benutzer die Möglichkeit, sich von der dynamisch erstellten Seite zu entfernen und dann zurückzukehren und die Daten erst erneut laden zu müssen Eine vollständige Seitenaktualisierung findet statt.

  • Meine dynamisch erstellte Seite enthielt größtenteils eine Liste, so dass listview () das mobile Framework von jquery dazu veranlasst, die Liste zu aktualisieren, um die richtige CSS hinzuzufügen. Page () macht dasselbe mit anderen Seitenelementen; Abhängig von Ihrem Inhalt müssen Sie möglicherweise nur den einen oder den anderen verwenden (oder gar keinen, wenn es sich nur um Text handelt).

  • Ich stelle fest, dass das Erstellen einer ganzen Seite nicht dynamisch erfolgt, da die "Wrapper" -Seite bereits hartcodiert ist. Wenn Sie jedoch eine ganze neue Seite hinzufügen möchten, können Sie wahrscheinlich Folgendes verwenden: (ungeprüft)

    $(document).append('<div data-role="page" id="my_page_id"><div data-role="content">FOO BAR</div></div>');
    $('#my_page_id').page();
    

Wenn Sie wirklich alles dynamisch erstellen möchten, können Sie nach window.location.hash suchen und Ihre data-role = page div mit der als window.location.hash festgelegten ID erstellen.

Ich verwende auch Jquery 1.6 und Jquery Mobile 1.0a4.1

Ich hoffe, da drinnen kann jemand da draußen helfen :)

4
Jasper

Für mich funktioniert die Jasper-Lösung nicht, aber ich habe diese Lösung gefunden, die sauberer aussehen und gut funktionieren

4
wezzy

Haben Sie sich die Ajax-Lademethode von Jquery angesehen? Sieht so aus, als könnten Sie einfach die gewünschte Seite laden und den Körper jedes Mal ersetzen, wenn Sie eine Anfrage erhalten haben.

Referenz

0
RyanJM

In diesem Beispiel nehme ich bei JSFiddle einen API-Aufruf von Flickr und führe die Ergebnisse über die Jquery-Engine für tmpl aus, um die neue Seite an das Dokument anzuhängen und dann $ .mobile.changePage () für die neu eingefügte Seite aufzurufen. Ich denke, Sie werden sehen, wie nützlich die Kombination von jquery tmpl + apis + jquery mobile ist. 

http://jsfiddle.net/sgliser/8Yq36/5/

0
sgliser