Geek asks and answers

Dynamically create virtual pages using jQuery Mobile

I am trying to link virtual pages using jQuery Mobile, but I have two problems:

  • The first time I load the page, CSS is not applied.
  • After I select a page and want to go to another page, I notice that every time I passed page 1.

This is my example .

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

            });

Could you tell me what the problem is, or if there is a better way to do this.

Thank.

+5
source share
3 answers

Update

I also deleted data-rel="internal"in the links.

Answer

I did the following.

instead

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

I add this

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

He will refresh page-1 p1to reload the styles.

.

+2

jQuery Mobile ( , ), . , jQuery .

:

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

. , , , .

+2

To apply CSS styles, just add $("#p1").trigger('create');as the last line after$("#p1").show();

-1
source

More articles:


All Articles