Tworzenie stron wirtualnych dynamicznie przy użyciu jQuery Mobile,

próbuję połączyć wirtualnych stron przy użyciu jQuery Mobile, ale mam dwa problemy:Tworzenie stron wirtualnych dynamicznie przy użyciu jQuery Mobile,

Za pierwszym razem, kiedy załadować stronę, CSS nie jest stosowana.
Po kiedy wybrać stronę i chcę zmienić na inną stronę, widzę, że za każdym razem kiedy przeszedł przez stronę 1.

To mój example.

Kod:

  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(); 

      });

Czy możesz mi powiedzieć, co jest problemem czy istnieje lepszy sposób to zrobić.

Dziękuję.

Źródło

2013-03-21 Mils

Aktualizacja

Ja również usunąć data-rel="internal" w linkach.

Odpowiedź

zrobiłem poniżej.

zamiast

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

dodam ten

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

Będzie odświeżyć stronę-1 p1 przeładować style.

Praca użytkownika example.

Źródło

2013-03-21 15:02:03 Omar

Świetnie! pozostaje drugim problemem. Dziękuję Ci. – Mils

Strona 1 nie pojawi się podczas przechodzenia do innych stron. czy to twój drugi problem? – Omar

sprawdź link w mojej zaktualizowanej odpowiedzi. http://jsfiddle.net/Palestinian/AS6s7/ – Omar

Nie można dynamicznie tworzyć nowej strony jQuery Mobile (można, ale strona nie ma stylów), chyba że istnieje co najmniej jedna z nich. Tutaj jest obejście problemu, możesz utworzyć pustą stronę mobilną jQuery i użyć jej do utworzenia nowej.

Oto przykład praca:

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

Teraz należy użyć zdarzenia stronę pageshow pierwszego ukrytej strony do tworzenia nowych stron dynamicznych. Po utworzeniu strony wystarczy użyć strony zmiany, aby wyświetlić pierwszą widoczną stronę.

Źródło

2013-03-21 14:52:02 Gajotres

Problem polega na tym, że nie wiem z góry liczbę stron .. Dziękuję. – Mils

Eleganckie rozwiązanie :) – Omar

Dlaczego jest to problem w przypadku mojego przykładu? Po prostu skopiuj swój kod do przykładu stron. – Gajotres

-1

Aby zastosować style CSS tylko dodać $("#p1").trigger('create'); jako ostatnią linię po $("#p1").show();

Źródło

2013-07-11 07:46:21 Motoo

Tworzenie stron wirtualnych dynamicznie przy użyciu jQuery Mobile,

Odpowiedz

Powiązane problemy