我是JQuery Mobile的新手，我想知道如何使用下面的API创建Dynamic Listview，当单击某个项目时，它将创建一个包含更多详细信息的新页面。
我正在为我的页面内容/结构使用多个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网站了解Pageshttp://demos.jquerymobile.com/1.4.5/pages/--列表视图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/或者在这里我如何去除jQuery Mobile Listview缩略图下的空白
演示
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");
并为列表视图项目创建另一个点击功能以收集数据
$(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" });
})