我是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" });
})