使用jQuery Mobile動態創建虛擬頁面

Question

我嘗試使用jQuery Mobile鏈接虛擬頁面，但我有兩個問題：

我第一次加載頁面時，不會應用CSS。
當我選擇一個頁面並且我想要更改到另一個頁面時，我注意到每次經過頁面1。

這是我的榜樣。

代碼：

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

            });

你能告訴我這是什么問題，或者是否有更好的方法可以做到這一點。

謝謝。

Answer 1

您不能動態創建新的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>

現在，您應該使用第一個隱藏頁面的pageshow頁面事件來創建新的動態頁面。 頁面創建后，只需使用更改頁面顯示第一個可見頁面。

Answer 2

更新

我還刪除了鏈接中的data-rel="internal" 。

回答

我做了以下。

代替

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

我加上這個

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

它將刷新Page-1 p1以重新加載樣式。

工作實例。

Answer 3

要應用CSS樣式，只需添加$("#p1").trigger('create'); $("#p1").show();之后的最后一行$("#p1").show();

使用jQuery Mobile動態創建虛擬頁面

問題描述

3 個解決方案

解決方案1
2 2013-03-21 14:52:02

解決方案2
2 已采納 2013-03-21 15:02:03

解決方案3
-1 2013-07-11 07:46:21

使用jQuery Mobile動態創建虛擬頁面

問題描述

3 個解決方案

解決方案1 2 2013-03-21 14:52:02

解決方案2 2 已采納 2013-03-21 15:02:03

解決方案3 -1 2013-07-11 07:46:21

解決方案1
2 2013-03-21 14:52:02

解決方案2
2 已采納 2013-03-21 15:02:03

解決方案3
-1 2013-07-11 07:46:21