1

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>

残念ながら、すべての等しい値を一緒にマージするわけではありません。問題をよりよく示すために画像を添付しました。

jquery モバイル自動分割の問題

4

2 に答える 2