1

ここのソリューションを使用して、jquery mobile を使用して、html/css/js アプリの複数のページに同じパネルを作成しようとしています。残念ながら、パネルのコンテンツのように、jquery モバイル スタイルは適用されません....代わりに、単なる古い html です。

パネルのコンテンツにjqueryモバイルスタイルを適用するにはどうすればよいですか? これにはある種の更新コマンドがありますか?

これが私のパネルです：

$(document).on('pagebeforeshow', '#welcome-page', function(){                
  $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
  $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
  $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
  $('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');        
  $.mobile.activePage.find('#mypanel').panel();
  $(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
  });
  //LISTENERS:
  //$("#mypanel").panel("close");
});

ここにページがあります：

<div id="welcome-page" data-role="page">    
    <!--<div data-role="panel" id="mypanel">
    </div>-->                   
<header data-role="header"> 
</header>
<div id="content" data-role="content">              
</div>
<footer data-role="footer">
</footer>

ありがとう

4

1 に答える 1

2

pagebeforeshowオリジナルの投稿を作成したので、使用できるイベントを使用する代わりに、別の方法をお見せしましょうpagebeforecreate。その時点ではまだコンテンツのスタイルが設定されていないため、これは重要です。動的に追加されたコンテンツは自動的にスタイル設定されるため、心配する必要はありません。

$(document).on('pagebeforecreate', '#welcome-page', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
    $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
    $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
    $('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');        
    $(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
    });
    //LISTENERS:
    //$("#mypanel").panel("close");
});

私の元の回答に基づいて作成された実例: http://jsfiddle.net/Gajotres/pZzrk/60/

于 2013-06-06T10:29:25.180 に答える