Erstellen von virtuellen Seiten mit jQuery Mobile dynamisch

Ich versuchen virtuelle Seiten mit jQuery Mobile zu verbinden, aber ich habe zwei Probleme:Erstellen von virtuellen Seiten mit jQuery Mobile dynamisch

Das erste Mal, wenn ich die Seite zu laden, wird die CSS nicht angewandt.
Nach wenn ich eine Seite wählen, und ich möchte auf eine andere Seite ändern, merke ich, dass jedes Mal, wenn ich von der Seite übergeben 1.

Das ist mein example.

Code:

  var nbrButton = 3; 
      $(document).ready(function(){ 
       for(i = 1;i <= nbrButton;i++) { 

        $("body").append('<div id="p'+i+'" data-role="page" class="pages"><div data-role="content">Page'+i+'</br><a data-role="button" rel="internal" href="#p1" data-inline="true">1</a><a data-role="button" rel="internal" href="#p2" data-inline="true">2</a><a data-role="button" rel="internal" href="#p3" data-inline="true">3</a></div></div>'); 

       } 
       $("#p1").show(); 

      });

Können Sie mir sagen, was das Problem ist, oder wenn es ein besserer Weg, das zu tun.

Vielen Dank.

Quelle

2013-03-21 Mils

aktualisieren

Ich entfernte auch data-rel="internal" in den Links.

Antwort

ich die unten getan haben.

statt

$('#p1').show();

füge ich diese

$.mobile.changePage('#p1', { allowSamePageTransition: true });

Es wird aktualisiert Seite-1 p1 Stile neu zu laden.

Arbeiten example.

Quelle

2013-03-21 15:02:03 Omar

Großartig! es bleibt das zweite Problem. Vielen Dank. – Mils

Page 1 wird nicht angezeigt, wenn Sie zu anderen Seiten wechseln. Ist das dein zweites Problem? – Omar

Überprüfen Sie den Link in meiner aktualisierten Antwort. http://jsfiddle.net/Palestinian/AS6s7/ – Omar

Sie können die neue jQuery Mobile-Seite nicht dynamisch erstellen (Sie können, aber diese Seite hat keine Stile), es sei denn, Sie haben mindestens einen vorhandenen. Hier gibt es einen Workaround. Sie können eine leere jQuery-Mobile-Seite erstellen und daraus eine neue erstellen.

Hier ist ein funktionierendes Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script> 
       $(document).on('pageshow', '#index', function(){  
        $('<div>').attr({'data-role':'page','id':'second'}).appendTo('body'); 
        $('<div>').attr({'data-role':'header','id':'second-header'}).append('<h3>Header Title</h3>').appendTo('#second'); 
        $.mobile.changePage("#second"); 
       });  
    </script> 
</head> 
<body> 
    <div data-role="page" id="index"> 

    </div> 
</body> 
</html>

Jetzt sollten Sie eine Seite pageshow bei einer ersten versteckten Seite nutzen, um neue dynamische Seiten zu erstellen. Nachdem die Seite erstellt wurde, verwenden Sie die Änderungsseite, um eine erste sichtbare Seite anzuzeigen.

Quelle

2013-03-21 14:52:02 Gajotres

Das Problem ist, dass ich nicht im Voraus wissen, die Anzahl der Seiten .. Danke gelten. – Mils

Elegante Lösung :) – Omar

Warum ist das ein Problem im Falle meines Beispiels? Kopieren Sie einfach Ihren Code in das Seitenschaubeispiel. – Gajotres

-1

Um CSS-Stile fügen Sie einfach $("#p1").trigger('create'); als letzte Zeile nach $("#p1").show();

Quelle

2013-07-11 07:46:21 Motoo

Erstellen von virtuellen Seiten mit jQuery Mobile dynamisch

Antwort

Verwandte Themen