如何将下一个按钮添加到详细信息页面jquery mobile

Question

我正在尝试在详细信息页面中添加“下一步”按钮以进入下一个详细信息页面。我是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');
    }
}

Answer 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);
        }
    });    
});

然后单击 Next 按钮，我只需检查索引是否小于数组长度，如果是，则将其递增并将表单重新绑定到下一个电影：

$(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');              
}

您当然可以实现上一个按钮，也可以在到达数组的开头/结尾时启用/禁用按钮。