jQuery Mobile のレンダリング データをページにロードする方法を探しています。非常によく似たトピックが過去に議論されたことは知っていますが、完全に一致するものはないようです (または、答えが見つかるほど近いものはありません)。
問題は、ページが読み込まれたときに、jQuery モバイルが動的にクラスを HTML 要素に適用することです。JavaScript コンテンツがページに配置される前にプロセスが実行されるため、JavaScript を介して取り込まれたコンテンツは変換されません。これを修正するには、おそらく .trigger('create') 関数を使用します。load() 関数を使用して外部ページからコンテンツを取得する場合、これは機能しないようです。
twitter.html ファイル (下の例) からデータを取得できますが、jQuery Mobile を介してフォーマットされていません。
私の主張を実証するために、スクリプトのいくつかのスターター サンプルをまとめてみました。残念ながら、外部ファイルを読み込んでいるため、ファイルをコンピューターに保存してテストしない限り、この問題を簡単に表現する方法はありません。
メインファイル(index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://jquerymobile.com/demos/1.1.1/js/jquery.mobile-1.1.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.1.1/css/themes/default/jquery.mobile-1.1.1.css" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$('#container').load('twitter.html');
$('#container').trigger('create');
});
});//]]>
</script>
</head>
<body>
<div data-role="page" class="type-home">
<div data-role="content">
<!-- Load the Twitter Data -->
<div id="container"></div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Sample</li>
<li><a href="#">Ignore this</a></li>
<li><a href="#">And look for Twitter data above</a></li>
</ul>
</div><!--/content-->
</div>
</body>
</html>
呼び出されるファイル(twitter.html)
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
var url = "http://search.twitter.com/search.json?callback=?&rpp=10&q='jquery'";
$.getJSON( url, function( data ) {
var twitterList = $( "<ul data-role='listview' data-inset='true' data-theme='c' data-dividertheme='b' />" );
$.each( data.results, function( index, item ) {
$( "<li />", { "text" : item.text } )
.appendTo( twitterList );
});
$( "#tweets" ).fadeOut( "fast", function(){
$( this ).empty()
.append( twitterList )
.fadeIn( "slow" );
});
});
});
</script>
<div id="tweets">Loading Tweets...</div>
この方法でファイルを呼び出す作業方法の例を誰かが提供できますか?
これに関連して私が調べたページ：
参照するページは 10 ページほどありますが、私はこのサイトの初心者なので、2 ページに制限されています。
- http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/
- http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content
私はこれを解決するために文字通り過去 7 時間を費やしてきたので、どんな助けも大歓迎です。私は JavaScript の世界にまったく慣れていないので、気楽にやってください。