我是 JQuery Mobile 的新手，我想知道如何使用下面的 API 创建一个动态 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 网站并了解页面 http://demos.jquerymobile.com/1.4.5/pages/ -- ListView http://demos.jquerymobile.com/1.4.5/listview/ -- 以及 ListView 小部件 -- https://api.jquerymobile.com/listview/
我创建了一个演示来帮助您入门。您可以搜索电影，因此插入 API key 并单击蓝色菜单栏上的“运行”即可尝试。如有任何问题，请报告，因为我没有 API key 来正确测试它。
如果您遇到矩形缩略图的任何显示问题，烂番茄使用这里的头来学习如何修复它们 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 项创建另一个点击函数来收集数据
$(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" });
})
关于javascript - JQuery 移动动态 ListView API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29685043/