使用jquery mobile为RSS Feed设计样式 [英] Styling RSS feeds using jquery mobile
问题描述
我正在使用PhoneGap编写iPhone应用程序。我试图解析一个Facebook RSS源和使用jFeed这样做。我得到饲料，我可以显示给用户。然而，当涉及到样式的RSS源使它看起来不错（使用JQuery Mobile CSS属性），它不考虑属性（ul和li标记）。
是否有一种方法来使用JQuery Mobile创建RSS源？
下面是我使用的代码（index.html）：
I am writing an iPhone application with PhoneGap. I'm trying to parse a Facebook RSS Feed and use jFeed to do so. I get the feed, and I can display it to the user. However, when it comes to styling the RSS Feed to make it look good (using JQuery Mobile CSS attributes) it doesn't take into account the attributes (ul and li markers). Is there a way to style the RSS Feed using JQuery Mobile? Here is the code I am using (index.html) :
<!DOCTYPE html>
<html>
<head>
<title>BDA Audencia</title>
<meta charset="utf-8" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />
<!-- JQUERY CSS -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<!-- CORDOVA - PHONE GAP -->
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="style/site.css">
<!-- RSS FEED -->
<script type="text/javascript" src="js/jquery.jfeed.pack.js"></script>
<script>
jQuery(function() {
jQuery.getFeed({
url: 'http://www.facebook.com/feeds/page.php?id=360453900718092&format=atom10',
success: function(feed) {
var html = '';
for(var i = 0; i < feed.items.length && i < 5; i++) {
var item = feed.items[i];
html += '<li data-role="list-divider"><span style=" right: 45px;position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.95em;; right: 10px;">'
+ item.updated
+ '</span></li>'
+ '<li>'
+ item.description
+ '</li>';
}
html += html + '';
jQuery('#result').append(html);
}
});
});
</script>
<!-- Changing the position of this code will not make $.mobile.defaultPageTransition work. DO NOT CHANGE IT -->
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Test RSS</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-theme="d" data-divider-theme="d">
<div id="result"></div>
</ul>
</div>
</div>
<div data-role="footer" data-theme="d">
</div>
</div><!-- /page one -->
推荐答案
div direct inside ul 是不正确的HTML结构。
div direct inside ul is incorrect HTML structure.
<ul data-role="listview" data-theme="d" data-divider-theme="d">
<div id="result"></div>
</ul>
请将其更改如下
<ul id="result" data-role="listview" data-theme="d" data-divider-theme="d">
</ul>
然后在 jQuery（'＃result'）。append（html）; 此代码，添加代码以刷新列表视图。因为jquery移动标记是在pagecreate生成的。在你的情况下，你是动态获取数据和构建listview。因此，您必须通过uisng .listview（refresh）刷新列表视图
Then after jQuery('#result').append(html); this code, add code to refresh the listview. Because the jquery mobile marker was generated when pagecreate. In your case, you are dynamic getting data and build the listview. So, you have to refresh the listview by uisng .listview( "refresh" )
修改后的代码应如下：
$('#result').append(html);
$('#result').listview("refresh");
更多关于jquery mobile的listview。
参考资料： http：// jquerymobile .com / demos / 1.2.0 / docs / lists / lists-methods.html
More about listview in jquery mobile.
Reference : http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html
这篇关于使用jquery mobile为RSS Feed设计样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
