PhoneGap と jQuery モバイルを使用して IOS アプリを作成しようとしています。対象は、Webサービスからニュースデータ(json)を受け取り、表示することです。jquery mobile の autodivider 機能以外はすべて動作しています。
JS:
<script>
$(document).on("pageinit", "#news", function(){
$("#newsContainer ul").listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.attr("category");
return out;
}
}).listview("refresh");
getNews(15);
function getNews(count){
$.ajax({
url: '*someURL*/file.php?count='+count,
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
$('#newsContainer ul').append('<li category="'+item.category+'"><a>'+item.image+'<div style="float:left;white-space:normal;">'+item.headline+'</div><div style="float:left">'+item.content+'</div></div style="clear:both"></div></a></li>').listview('refresh');
});
$('#newsContainer ul').listview('refresh');
},
error: function(){
console.log('Fehler bei JSON Verarbeitung');
$('#newsContainer ul').append('<li>Es ist ein Fehler beim Laden der News aufgetreten</li>').listview('refresh');
}
});
}
});
</script>
HTML:
<div data-role="page" id="news">
<div data-role="header">
<h1>News</h1>
</div>
<div data-role="content" id="newsContainer">
<ul data-role="listview" data-corners="false" data-inset="false" data-theme="a" data-dividertheme="a" data-filter="true" data-sort="true" data-autodividers="true">
</ul>
</div>
<div data-role="footer" class="ui-bar ui-block-a" data-position="fixed" data-id="myFooter">
<div data-role="navbar">
<ul>
<li><a href="#news" data-iconpos="top" data-icon="home">News </a> </li>
<li><a href="#site2" data-iconpos="top" data-icon="home">Seite2 </a> </li>
</ul>
</div>
</div>
</div>
残念ながら、すべての等しい値を一緒にマージするわけではありません。問題をよりよく示すために画像を添付しました。