关键词：
【中文标题】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 列表视图中的图标
】动态更改jQueryMobile列表视图中的图标【英文标题】：DynamicallychangeiconinjQueryMobilelistview【发布时间】：2013-02-1310:40:25【问题描述】：当我动态更改图标时，它不会反映页面上的更改，即使在标记中它已更改。例子：<uldata-role="... 查看详情
寻找一种将更多列表动态添加到 jQuery Mobile 列表视图底部的方法
】寻找一种将更多列表动态添加到jQueryMobile列表视图底部的方法【英文标题】：LookingforawaytodynamicallyaddmoreliststothebottomofjQueryMobilelistview【发布时间】：2012-03-2606:55:51【问题描述】：我正在寻找一种在向下滚动后将更多列表添加到... 查看详情
Jquery Mobile 1.2.0 Alpha 1 弹出和动态列表视图
】JqueryMobile1.2.0Alpha1弹出和动态列表视图【英文标题】：JqueryMobile1.2.0Alpha1popupanddynamiclistview【发布时间】：2012-08-2614:40:38【问题描述】：我在让我的移动应用程序为1.2更改和升级做好准备时遇到了问题。在使用新的弹出窗口时，... 查看详情
Jquery mobile：更改列表视图的标题
】Jquerymobile：更改列表视图的标题【英文标题】：Jquerymobile:Changetheheaderofalistview【发布时间】：2016-12-2300:25:28【问题描述】：对于我认为有点简单的问题，我已经四处寻找答案。我看到的所有答案都是说使用不起作用的\'.text（... 查看详情
jQuery Mobile 列表视图：初始化错误
】jQueryMobile列表视图：初始化错误【英文标题】：jQueryMobileListView:initializeerror【发布时间】：2012-03-2701:59:52【问题描述】：我认为这有一个简单的解决方案。我有一个列表，我想把它做成一个列表视图。东西是动态添加的。HTML... 查看详情
jQuery Mobile 列表视图：单击时更改值
】jQueryMobile列表视图：单击时更改值【英文标题】：jQueryMobileListView:ChangeaValueWhenClicked【发布时间】：2012-03-2410:30:36【问题描述】：我在表述我的问题时遇到了问题。所以我在jQuerymobile中有一个列表视图，它是动态创建的。我不... 查看详情
将第 n 项焦点放在 Jquery Mobile 列表视图上
】将第n项焦点放在JqueryMobile列表视图上【英文标题】：focusnthitemonJqueryMobilelistview【发布时间】：2012-03-2522:57:59【问题描述】：我在一个jQueryMobilelistivew中有大约100个项目。是否可以关注动态生成的列表视图中的第N个元素？？我... 查看详情
面板内的 JQuery Mobile 列表视图
】面板内的JQueryMobile列表视图【英文标题】：JQueryMobilelistviewinsideapanel【发布时间】：2015-09-0216:20:03【问题描述】：我正在尝试在面板中使用带有可折叠项目的列表视图，但我得到了奇怪的结果。具体来说，这是我正在使用的最... 查看详情
JQuery Mobile：拉动以刷新列表视图[重复]
】JQueryMobile：拉动以刷新列表视图[重复]【英文标题】：JQueryMobile:Pulltorefreshlistview[duplicate]【发布时间】：2012-02-1723:47:35【问题描述】：可能重复：Howtodothispull-to-refreshinwebapp?是否有可用的插件为列表视图的列表项设置动画，以... 查看详情
jquery mobile自定义列表视图格式
】jquerymobile自定义列表视图格式【英文标题】：jquerymobilecustomlistviewformatting【发布时间】：2011-12-3123:18:28【问题描述】：所以我正在开发一个使用jquery移动框架的网络应用程序，我希望有一种方法可以进一步自定义列表视图元素... 查看详情
jQuery mobile折叠列表视图，搜索不起作用
】jQuerymobile折叠列表视图，搜索不起作用【英文标题】：jQuerymobilecollapsedlistviewwithsearchnotworking【发布时间】：2013-06-2215:59:57【问题描述】：我在jquery中创建了一个带有过滤器的listdivider的列表视图。过滤器按预期工作，但只要您... 查看详情
使用jquery mobile创建动态下拉列表
】使用jquerymobile创建动态下拉列表【英文标题】：dynamicdropdowncreationusingjquerymobile【发布时间】：2013-11-0702:37:26【问题描述】：当我使用jquerymobile创建下拉列表时，以下代码不起作用$(function()$(\'#hello\').append(\'<selectid="myselect"data... 查看详情
如何防止jquery mobile中的默认列表视图点击？
】如何防止jquerymobile中的默认列表视图点击？【英文标题】：Howtopreventdefaultlistviewclickinjquerymobile?【发布时间】：2013-01-2504:36:59【问题描述】：我创建一个列表视图..在列表视图中我放了一个按钮..喜欢<ulclass="ui-listview"><li&... 查看详情
如何将数据绑定到 Jquery Mobile 列表视图
】如何将数据绑定到JqueryMobile列表视图【英文标题】：HowtobinddatatoJqueryMobilelistview【发布时间】：2013-02-1516:40:16【问题描述】：下面是我的代码，数据没有绑定到列表视图。显示一个空白页面。<divdata-role="page"id="index"><divda... 查看详情
如何在 Jquery Mobile 的可点击列表项中创建带有按钮的列表视图
】如何在JqueryMobile的可点击列表项中创建带有按钮的列表视图【英文标题】：HowtocreatelistviewwithbuttonsinsideclickablelistitemsinJqueryMobile【发布时间】：2014-06-1110:22:22【问题描述】：有什么方法可以在JqueryMobile中创建一个列表视图，该... 查看详情
在 jQuery Mobile 中单击按钮时对列表视图进行排序
】在jQueryMobile中单击按钮时对列表视图进行排序【英文标题】：SortlistviewonbuttonclickinjQueryMobile【发布时间】：2020-03-2805:02:23【问题描述】：我是jQuery移动新手。我希望能够在单击按钮时按定价（例如，低高）对列表视图项目进行... 查看详情
在 div 中导航 jQuery Mobile 嵌套列表视图
】在div中导航jQueryMobile嵌套列表视图【英文标题】：NavigatejQueryMobilenestedlistviewwithinadiv【发布时间】：2015-02-0204:14:57【问题描述】：我正在尝试将页面上的嵌套列表放入div元素中，它工作正常，直到我单击一些具有后代元素的项... 查看详情
JQuery Mobile swiperight 事件触发先前触发的列表视图元素
】JQueryMobileswiperight事件触发先前触发的列表视图元素【英文标题】：JQueryMobileswiperighteventfirespreviouslyfiredlistviewelements【发布时间】：2015-06-2307:56:18【问题描述】：我正在尝试使用\'swiperight\'事件来删除列表视图项，但似乎该事件... 查看详情