2012-03-12 26 views
1

私はPhonegapのアプリケーションをHTML(5)、CSS3、Javscript(およびfriends)を使ってプログラミングしています。私は問題があります:XMLの解析がうまくいけば、私はXMLファイル内のすべてのアイテムを画面に表示し、CSSでスタイルを設定できます。XMLファイルから1つの結果を分離する

すべてのXMLアイテムには、タイトル、画像、ティーザー、および「リーズ・ベルダー」(ほとんどが埋め込みビデオのみを含む「もっと読む」)があります。

これ、私はすべての項目のタイトル、画像やティーザーを表示するために使用するスクリプトです:

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

私が今欲しいが、私は、新しいページやショーで開く項目、をクリックしてくださいということですタイトル、イメージ、ティーザー、そして "lees-verder"。ユーザーがクリックしたときにすべてのXMLコンテンツが消えてしまった場合、別の可能性があります。 "lees-verder"もロードする必要があります。なぜなら、単に "display:none;"で非表示にしてしまうからです。とにかくそれらをロードして、アプリケーションを大幅に遅くします。私はもちろん、ウェブを検索しているが、私は必要なものを見つけることができない。

これは私のXMLファイルの1つで、それがあなたにとってより簡単になる場合です。 :)

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

ありがとうございました!ご質問がある場合、または私が十分明確でない場合は、尋ねてください。私は明確にしようとします!

重要: Phonegapはそれをサポートしていないため、私はPHPを使用できません。受け入れられる言語:HTML(5)、CSS(3)、Javascript(Jquery、Ajaxなどを含む)

答えて

0

元のXMLを保存してから処理することをお勧めします。 このようにして、 のようにすることができます。ユーザーがshowElement(id)のような関数を呼び出した要素をタップし、保存されたxml(マスターリストまたはデータベースとして参照)から詳細を取得します。

これはほとんどのWebアプリケーションの作成方法です。

+0

お世話になります。 悲しいことに、これは私が探しているブログではありません。私はブログからのフィードを使用しています。 私はすべてのコンテンツを読み込まずに文書全体を解析することができると言う人から、Twitterでいくつかの助けを得ました。次に、 "$("#id_title ")。click()"をクリックすると、読み込みが可能になります。 しかし、私はどのようにロードせずに解析し、クリックしたときに読み込むのか分かりません。再度、感謝します! – Rvervuurt

関連する問題