I'm programming an app in Phonegap, using HTML(5), CSS3 and Javscript (and friends). I have a problem though: Parsing the XML works great, I get all the items in the XML file on my screen and I can style them through CSS.
我正在使用HTML(5),CSS3和Javscript(以及朋友)在Phonegap中编写应用程序。我有一个问题:解析XML工作得很好,我在屏幕上的XML文件中获取所有项目,我可以通过CSS设置它们。
Every XML item has a title, image, teaser and "lees-verder" ("read more" which mostly only contains an embedded video).
每个XML项目都有标题,图像,传情和“lees-verder”(“阅读更多”,其中大部分只包含嵌入的视频)。
This is the script I use to view the title, image and teaser of every item:
这是我用来查看每个项目的标题,图像和预告片的脚本:
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "webzap.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var urllist = $(this).find('link').text();
var node = urllist.substring(urllist.lastIndexOf('-')+1);
var id = node;
var total = $(this).find('id').text();
var title = $(this).find('title').text();
var url = $(this).find('link').text();
var brief = $(this).find('teaser').text();
var long = $(this).find('lees-verder').text();
var pubDate = $(this).find('pubDate').text();
var img = $(this).find('image').text();
$('<a href="http://www.flabber.nl/node/'+id+'"><div class="items" id="link_'+id+'"></div></a>').appendTo('.class2');
$('<h2 class="title_list" style="margin-top: 40px;"></h2>').html(title).appendTo('#link_'+id);
$('<h6 class="pubDate"></h6>').html('Dit is node nummer '+id).appendTo('#link_'+id);
$('<div class="introtekst"></div>').html(brief).appendTo('#link_'+id);
$('<div class="introtekst"></div>').html(total).appendTo('#link_'+id);
$('<div class="screenshot"></div>').html('<img src="'+img+'" height="120"/><br />').appendTo('#link_'+id);
$('<h2 class="title"></h2>').html(title).appendTo('#link_'+id);
/*$('<div class="content"></div>').html(long).appendTo('#link_'+id); */
/*$('<div class="introtekst" id="link_'+id+'"></div>').html('<a href="'+url+'">Open volledige website</a>').appendTo('#link_'+id);*/
});
}
});
});
</script>
What I now want is that I click on an item, which then opens in a new page and shows the title, image, teaser AND "lees-verder". Another possibility would be if all XML-content disappears when a user clicks on an item, except the item he/she clicked on. The "lees-verder" should than also be loaded, because when I simply hide it with "display: none;" in CSS, it loads them anyway and slows down the app drastically. I have of course been searching the web, but I can't find what I need.
我现在想要的是点击一个项目,然后在新页面中打开并显示标题,图像,预告片和“lees-verder”。另一种可能性是,当用户点击某个项目时,除了他/她点击的项目之外,所有XML内容都会消失。应该加载“lees-verder”,因为当我只是用“display:none;”隐藏它时在CSS中,无论如何它都会加载它们并大大减慢应用程序的速度。我当然一直在网上搜索,但我找不到我需要的东西。
Here is a piece of my XML file if that makes it easier for you lot. :)
这是我的XML文件的一部分,如果这使你更容易。 :)
<item>
<title>Wat is een schrikkeljaar?</title>
<link>
http://www.flabber.nl/linkdump/video/wat-is-een-schrikkeljaar-10653
</link>
<teaser>
<![CDATA[
Het is 29 februari, tijd om uit te leggen wat een schrikkeljaar is.
]]>
</teaser>
<lees-verder>
<![CDATA[
<p><iframe width="720" height="396" src="http://www.youtube.com/embed/xX96xng7sAE?rel=0" frameborder="0" allowfullscreen></iframe></p> <p>Check ook <a href="http://www.youtube.com/watch?v=53glKEPzElA">de video van MinutePhysics</a>.</p>
]]>
</lees-verder>
<image>
http://images.flabber.net/files/linkdump/schrikkeljaarwatishet.jpg
</image>
<pubDate>Wed, 29 Feb 2012 11:19:00 +0100</pubDate>
</item>
Thanks a bunch in advance! If you have any questions or if I was not clear enough, just ask and I'll try to clarify!
先谢谢了!如果您有任何疑问或者我不够清楚,请询问,我会尽力澄清!
IMPORTANT: I can't use PHP, as Phonegap does not support that. Languages that are accepted: HTML(5), CSS(3) and Javascript (including Jquery, Ajax etc.)
重要提示:我不能使用PHP,因为Phonegap不支持。接受的语言:HTML(5),CSS(3)和Javascript(包括Jquery,Ajax等)
1 个解决方案
#1
0
I would advise storing the original xml and then processing it. This way, you can do something like: when the user taps on an element you call a function like showElement(id) and then retrieves the details from the stored xml (see it as a master list or database).
我建议存储原始的xml然后处理它。这样,您可以执行以下操作:当用户点击元素时,您调用showElement(id)之类的函数,然后从存储的xml中检索详细信息(将其视为主列表或数据库)。
This is the way most webapps are made.
这是大多数Web应用程序的制作方式。
#1
0
I would advise storing the original xml and then processing it. This way, you can do something like: when the user taps on an element you call a function like showElement(id) and then retrieves the details from the stored xml (see it as a master list or database).
我建议存储原始的xml然后处理它。这样,您可以执行以下操作:当用户点击元素时,您调用showElement(id)之类的函数,然后从存储的xml中检索详细信息(将其视为主列表或数据库)。
This is the way most webapps are made.
这是大多数Web应用程序的制作方式。