0

詳細ページに「次へ」ボタンを追加して、次の詳細ページに移動しようとしています。私はjqmが初めてです。それは可能ですか？次のページの詳細をロードする方法はありますか? ページの読み込みごとに json データをリクエストすることは解決策かもしれませんが、良い方法ではありません。

どんな解決策も役に立ちます。

ありがとう。html は次のとおりです。

<div data-role="page" id="home">
    <div data-theme="a" data-role="header">
        <h3>
            Movie List
        </h3>
    </div>        
    <div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview"  id="movie-list" data-theme="a">

            </ul>
        </div>
    </div>
    <div data-theme="a" data-role="footer">
        <h1>Copyright 2013</h1>
    </div>              
</div>
<div data-role="page" id="headline">
    <div data-theme="a" data-role="header">
        <a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>                        
        <h3>
            Movie Info
        </h3>
    </div>        
    <div data-role="content">
        <ul data-role="listview"  id="movie-data" data-theme="a">

        </ul>
    </div>
</div>

これがJavaScriptです：

$(document).on('pagebeforeshow', '#headline', function(){      
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {

            $('#movie-data').append('<li><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"></li>');
            $('#movie-data').append('<li>Title: '+row.original_title+'</li>');
            $('#movie-data').append('<li>Release date'+row.release_date+'</li>');
            $('#movie-data').append('<li>Popularity : '+row.popularity+'</li>');   
            $('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');             
            $('#movie-data').listview('refresh');            
        }
    });    
});

$(document).on('vclick', '#movie-list li a', function(){  
    movieInfo.id = $(this).attr('data-id');

    $.mobile.changePage( "#headline", { transition: "slide", changeHash: false });

});


var movieInfo = {
    id : null,
    result : null
}

var ajax = {  
    parseJSONP:function(result){  
        movieInfo.result = result.results;
        $.each(result.results, function(i, row) {
            console.log(JSON.stringify(row));

            $('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
        });
        $('#movie-list').listview('refresh');
    }
}
4

1 に答える 1

1

更新: デモには同じページ スライド トランジションが含まれるようになりました。

詳細ページに次のボタンがある更新されたフィドルは次のとおりです。 http://jsfiddle.net/ezanker/8uac7/354/

現在のページ インデックスを保持する変数を追加しました。

var currentIndex = 0;

次に、pagebeforeshow で currentindex を配列インデックスに設定します。

$(document).on('pagebeforeshow', '#headline', function(){      
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {
            currentIndex = i;
            BindHeadline(row);
        }
    });    
});

次に、[次へ] ボタンをクリックすると、インデックスが配列の長さよりも小さいかどうかを確認し、そうであればインクリメントしてフォームを次のムービーに再バインドします。

$(document).on('click', '#btnNext', function(){  
    currentIndex++;
    if (currentIndex < movieInfo.result.length){
        var row = movieInfo.result[currentIndex]
        movieInfo.id = row.id;
        BindHeadline(row);
        $.mobile.changePage( "#headline", { transition: "slide", allowSamePageTransition: true } );           
    }
});

function BindHeadline(row){   
    $('#movie-data').empty();
    $('#movie-data').append('<li><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"></li>');
    $('#movie-data').append('<li>Title: '+row.original_title+'</li>');
    $('#movie-data').append('<li>Release date'+row.release_date+'</li>');
    $('#movie-data').append('<li>Popularity : '+row.popularity+'</li>');   
    $('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');             
    $('#movie-data').listview('refresh');              
}

もちろん、前へボタンを実装し、配列の先頭/末尾に到達したときにボタンを有効/無効にすることもできます。

于 2013-11-15T14:44:00.127 に答える