デモページでは、xmlを読み込んで更新情報を表示しています。
list.xmlデータを読み込んで上位5件のみ表示しています。
list.xmlの中身はこちらから確認できます。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/xmldata.js"></script>
[xmldata.js]JavaScript
$(function(){ function fresh(){ var dlbody = $("#news"); $.ajax({ type: 'GET', url: 'list.xml', dataType: 'xml', success: function(xml){ var newslist = $(xml); newslist.find('item').each(function(i){ i = i + 1; if(i == 6) { return false; } var newsitem = $(this); var newsitem_title = newsitem.find('title').text(); var newsitem_date = newsitem.find('date').text(); var newsitem_link = newsitem.find('link').text(); var dt = $('<dt />').text(newsitem_date); //var ddlink = $('<a />').text(newsitem_link); var dd = '<dd><a href="'+newsitem_link+'">'+newsitem_title+'</a></dd>'; dlbody.append(dt); dlbody.append(dd); }); } }); } fresh(); });
HTMl
<div class="mod_news"> <dl id="news"> </dl> <!-- /mod_news --></div>
CSS
/* mod_news -----------------------------------------*/ .mod_news{ margin:50px 0 0 0; } .mod_news dl{ position:relative; overflow:hidden; } .mod_news dt{ float:left; width:130px; padding:15px 0 0 0; } .mod_news dd{ border-bottom:dotted 1px #CCCCCC; padding:15px 0 10px 130px; line-height:1.3; }