jQuery Mobile 动态列表视图 API答案

【问题标题】：JQuery Mobile Dynamic Listview APIjQuery Mobile 动态列表视图 API
【发布时间】：2015-04-16 20:10:33
【问题描述】：

我是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>

【问题讨论】：

标签： javascript jquery api listview jquery-mobile

【解决方案1】：

这很简单，但您需要前往 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>

关于点击item时创建详细页面，有很多方法，一种是使用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" }); 
})

【讨论】：

它似乎在 JSFiddle 上运行良好，但不适用于我个人。当我输入某些内容并单击“开始”时 - 没有任何反应。我已经复制了代码，但没有运气。有任何想法吗？谢谢
看看浏览器控制台。你看到任何错误吗？通常是红色的。如果你不知道怎么做，请点击这里 -- webmasters.stackexchange.com/questions/8525/…