jQuery Mobile 动态列表视图
Posted
技术标签:
【中文标题】jQuery Mobile 动态列表视图【英文标题】：jQuery Mobile dynamic listview 【发布时间】：2016-09-30 03:14:41 【问题描述】：我创建了一个 jquery mobile phonegap 移动应用程序，用于显示来自 rss 提要的技术新闻。在网络导航器上它可以正常工作，但是当我创建 .apk 文件时，标题和内容未显示在列表中
My app on web navigator
My app .apk installed on mobile
应用程序代码：
<html>
<head>
<meta charset="utf-8">
<title>Technologia</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0-rc.1.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
// ISCPA added search filter, home icon, updated CDN-Hosted links
// forked from sumukh1's "forked: RSS Reader with jQuery Mobile" http://jsdo.it/sumukh1/4Ton
/* configuration */
var maxLength = 20;
/* writing HTML */
document.write(
'<div data-role="page" id="list">' +
'<div data-role="panel" data-theme="b" id="menu" data-position="left" data-display="overlay" >' +
'<ul data-role="listview" data-theme="c">' +
'<li data-icon="false"><a href="actu.html" rel="external"> <img src="img/actu.png" class="ui-li-icon ui-corner-none"> Acualités</a></li>' +
'<li data-icon="false"><a href="logiciel.html" rel="external"> <img src="img/logiciel.png" class="ui-li-icon ui-corner-none"> Applis,Logiciels</a></li>' +
'<li data-icon="false"><a href="jeux.html" rel="external"> <img src="img/jeux.png" class="ui-li-icon ui-corner-none"> Jeux</a></li>' +
'<li data-icon="false"><a href="pc.html" rel="external"> <img src="img/pc.png" class="ui-li-icon ui-corner-none"> PC Périphériques</a></li>' +
'<li data-icon="false"><a href="smartphone.html" rel="external"> <img src="img/mobile.png" class="ui-li-icon ui-corner-none"> Smartphone</a></li>' +
'<li data-icon="false"><a href="tablette.html" rel="external"> <img src="img/tablet.png" class="ui-li-icon ui-corner-none"> Tablette</a></li>' +
'<li data-icon="false"><a href="objets.html" rel="external"> <img src="img/objets.png" class="ui-li-icon ui-corner-none"> Objets connectés</a></li>' +
'<li data-icon="false"><a href="media.html" rel="external"> <img src="img/media.png" class="ui-li-icon ui-corner-none"> Culture, médias</a></li>' +
'<li data-icon="false"><a href="politique.html" rel="external"> <img src="img/politique.png" class="ui-li-icon ui-corner-none"> Politique, Droits</a></li>' +
'<li data-icon="false"><a href="propos.html" rel="external"> <img src="img/propos.png" class="ui-li-icon ui-corner-none"> À propos</a></li>' +
'</ul>' +
'</div>' +
' <div data-role="header" data-position="fixed">' +
' <a data-iconpos="notext" href="#menu" data-display="overlay" data-role="button" data-icon="bars"></a>' +
' <h1>Actualités</h1>' +
' </div>' +
' <div data-role="content">' +
' <ul data-role="listview" data-theme="b" data-filter="true" data-filter-placeholder="Chercher" data-inset="true" id="articleList">'
);
for (var i = 1; i <= maxLength; i++)
document.write(
'<li data-icon="false" id="list' + i + '"><a href="#article' + i + '" id="link' + i + '"> </a></li>'
);
document.write(
' </ul>' +
' </div>' +
'</div>'
);
for (i = 1; i <= maxLength; i++)
document.write(
'<div data-role="page" id="article' + i + '">' +
' <div data-role="header" data-position="inline">' +
' <a href="#list" data-role="button" data-icon="carat-l" data-iconpos="notext" data-back="true">Home</a>' +
' <h1 id="articleHeader' + i + '"> </h1>' +
' </div>' +
' <div data-role="content">' +
' <div id="articleContent' + i + '" class="articleContent"></div>' +
' <div data-role="controlgroup" data-type="horizontal">' +
' <a href="#article' + String(i - 1) + '" data-role="button" data-icon="arrow-l"' +
' data-inline="true" class="prevButton">Précident</a>' +
' <a href="#article' + String(i + 1) + '" data-role="button" data-icon="arrow-r"' +
' data-inline="true" class="nextButton" data-iconpos="right">Suivant</a>' +
' </div>' +
' </div>' +
'</div>'
);
/* JSONP */
$(function ()
getOnlineFeed('http://www.01net.com/rss/info/flux-rss/flux-toutes-les-actualites/');
);
/* functions */
var listEntries = function (json)
if (!json.responseData.feed.entries)
return false;
var articleLength = json.responseData.feed.entries.length;
articleLength = (articleLength > maxLength) ? maxLength : articleLength;
for (var i = 1; i <= articleLength; i++)
var entry = json.responseData.feed.entries[i - 1];
var des = entry.content;
var ctn;
var lnn = des.length;
var fn = des.indexOf("<img");
ctn = des.substr(0, fn - 1);
var start = des.indexOf("src=");
var end = lnn - (start + 5);
var imgs = des.substr(start + 5, end - 2);
var date = entry.publishedDate.substr(5, 11);
var liste =
Jan: 'Janvier',
Feb: 'Février',
Mar: 'Mars',
Apr: 'Avril',
May: 'Mai',
Jun: 'juin',
Jul: 'juillet',
Aug: 'août',
Sep: 'septembre',
Oct: 'octobre',
Nov: 'novembre',
Dec: 'décembre'
;
var jour = date.substr(0, 2);
var bl = date.indexOf(" 2");
var xs = date.substr(3, 3);
var annes = date.substr(bl, date.length);
var mois = liste[xs];
$('#link' + i).html("<h5>" + entry.title + "</h5>" + "<p>" + ctn + "</p>");
$('#articleHeader' + i).text("Actualités");
$('#openButton' + i).attr('href', entry.link);
$('#articleContent' + i).append("<strong>" + entry.title + "</strong><br><br>" + ctn);
$('#articleContent' + i).append('<img class="pic" src="' + imgs + '">');
$('#articleContent' + i).append("<br> Date de publication : " + jour + " " + mois + annes);
$('#articleContent' + i).append('<br><br><center><a class="ui-btn ui-icon-search ui-btn-icon-left" href="' + entry.link + '" onclick="window.open(this.href); return false;" >Voir plus</a></center>');
$('#article1 .prevButton').remove();
$('#article' + articleLength + ' .nextButton').remove();
if (articleLength < maxLength)
for (i = articleLength + 1; i <= maxLength; i++)
$('#list' + i).remove();
$('#article' + i).remove();
;
var getOnlineFeed = function (url)
var script = document.createElement('script');
script.setAttribute('src', 'http://ajax.googleapis.com/ajax/services/feed/load?callback=listEntries&hl=ja&output=json-in-script&q='
+ encodeURIComponent(url)
+ '&v=1.0&num=' + maxLength);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
;
var getOfflineFeed = function (url)
var script = document.createElement('script');
script.setAttribute('src', url);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
;
$(document).on('click', ".external", function (e)
e.preventDefault();
var targetURL = $(this).attr("href");
window.open(targetURL, "_system");
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：看起来它无法连接到您的 API，您可能没有将远程连接列入白名单吗？
如果没有下载cordova whitelist plugin并将以下内容添加到您的config.xml
<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
<allow-navigation href="*"/>
<allow-navigation href="http://*/*"/>
<allow-navigation href="https://*/*"/>
<allow-navigation href="data:*"/>
<allow-intent href="*"/>
<access origin="*"/>
【讨论】：
以上是关于jQuery Mobile 动态列表视图的主要内容，如果未能解决你的问题，请参考以下文章
寻找一种将更多列表动态添加到 jQuery Mobile 列表视图底部的方法