5

jQuery Mobile を使用して仮想ページをリンクしようとしましたが、次の 2 つの問題があります。

  • 初めてページを読み込んだときに、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();

            });

何が問題なのか、またはそれを行うためのより良い方法があるかどうかを教えてください。

ありがとうございました。

4

3 に答える 3

2

アップデート

data-rel="internal"リンクも削除しました。

答え

私は以下を行いました。

それ以外の

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

これを追加します

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

ページ1を更新p1して、スタイルを再読み込みします。

実例。_

于 2013-03-21T15:02:03.910 に答える
2

少なくとも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 pageイベントを使用して、新しい動的ページを作成する必要があります。ページが作成されたら、ページの変更を使用して最初の表示ページを表示します。

于 2013-03-21T14:52:02.903 に答える
-1

$("#p1").trigger('create');CSS スタイルを適用するには、最後の行として次のよう に追加します。$("#p1").show();

于 2013-07-11T07:46:21.517 に答える