我是JQuery Mobile的新手,我想知道如何使用下面的Dynamic Listview创建API,当单击某个项目时,它将创建一个包含更多详细信息的新页面。

我的页面内容/结构使用了多个DIV。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script>
var apikey = "myapikey";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

// construct the uri with our apikey
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = "Gone with the Wind";

$(document).ready(function() {

// send off the query
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp",
success: searchCallback
});
});

// callback for when we get back the results
function searchCallback(data) {
$(document.body).append('Found ' + data.total + ' results for ' + query);
var movies = data.movies;
$.each(movies, function(index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}

</script>

</head>
<body>
</body>
</html>

最佳答案

它很简单,但是您需要转到JQM站点并了解Pages http://demos.jquerymobile.com/1.4.5/pages/-listviews http://demos.jquerymobile.com/1.4.5/listview/-和listview小部件-https://api.jquerymobile.com/listview/

我创建了一个演示来帮助您入门。您可以搜索电影,因此插入您的API密钥,然后单击蓝色菜单栏上的“运行”以进行操作。如有任何问题,请向我报告,因为我没有API密钥来对其进行正确测试。

如果矩形缩略图出现任何显示问题,那么烂番茄可以直接在此处学习如何修复它们,https://jqmtricks.wordpress.com/2014/02/13/odd-sized-thumbnails-in-listview/或此处How do I get rid of whitespace under jQuery Mobile Listview thumbnail image

演示版

https://jsfiddle.net/u1LonxLf/



var smovie = "";
$(document).on("click", "#go", function () {
    smovie = $("#movie").val();
    if (smovie) {
    $("#movies").empty();
        var apikey = "myapikey"; // put your key here to test
        var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

        // construct the uri with our apikey
        var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
        var query = smovie;

        // send off the query
        $.ajax({
            url: moviesSearchUrl + '&q=' + encodeURI(query),
            dataType: "jsonp",
            success: searchCallback
        });

        // callback for when we get back the results
        function searchCallback(data) {
            $(".resluts").html('Found ' + data.total + ' results for ' + query);
            var movies = data.movies;
            $.each(movies, function (index, movie) {
                $("#movies").append("<li><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2></a></li>").listview().listview("refresh");
            });
        }
    }
})


JQM HTML

<div data-role="page">
    <div data-role="header" data-position="fixed">
            <h1>RottenTomatoes Movie Search</h1>
    </div>

    <div role="main" class="ui-content">
        <input type="search" name="movie" id="movie" value="" placeholder="Movie to  Search..." />
        <input type="button" id="go" value="Search" />
        <div class="resluts"></div>
        <ul data-role="listview" id="movies">  </ul>
    </div>

</div>


关于单击项目时创建详细页面的方法很多,一种方法是使用Data属性添加从JsonP回调数据返回的所有信息。即

 $("#movies").append("<li data-title='"+ movie.title +"' data-cast='"+ movie.cast +"' data-year='"+ movie.year +"'><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2></a></li>").listview().listview("refresh");


并为listview项目创建另一个click函数以收集数据

$(document).on("click", "#movies li", function(event, ui) {

var title = $(this).closest("li").attr('data-title');
var cast  = $(this).closest("li").attr('data-cast');
var year  = $(this).closest("li").attr('data-year');

// and then the rest of the code to append the data to your other page e.g (moviedetails) page

// and then change to that page. So you will need to add one more page to the html i provided above. Head over to the JQM site to learn about multipage template.

$( ":mobile-pagecontainer" ).pagecontainer( "change", "#moviedetails", { transition: "slide" });
})

09-10 10:30
查看更多