zRSSFeed09

API jQuery





☆★データーでの確認★☆

zRSSFeed




RSS Feeds Reader Plugin for jQuery - Zazar Online Website Builder


Displaying RSS feeds with jQuery Mobile


使用.jsファイル

【 外部読み込みファイル 】

《 1.7.1jquery.min 》

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>

《 jquery.zrssfeed.min 》

<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

《 jquery.mobile-1.1.0.min 》

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>

使用.cssファイル

【 外部読み込みファイル 】

《 jquery.mobile-1.1.0.min.css 》

<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" />


ソースコード


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>zRSSFeed - Displaying RSS feeds with jQuery Mobile</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
	<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

	<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" />


	<style>
		.rssBody ul, .rssRow {
			margin-left: 0;
			padding-left: 0;
			list-style: none;
		}
		.rssRow h4 { margin: 0; font-size: 1.8em; letter-spacing: -1px; }
		.rssRow h4 a { text-decoration: none; }
		.rssRow h4 a:hover { color: darkblue; }
		.rssRow div { font-size: 0.9em; color: #999; }
		#zazar { color: #fff; }
	</style>

</head>
<body>

<div data-role="page">

	<div data-role="header">
		<h1>zRSSFeed - Displaying RSS feeds with jQuery Mobile</h1>
	</div>

	<div data-role="content">	
<h2>川島 海荷オフィシャルブログ</h2>
		<div id="test"></div>
	</div>
	
	<div data-role="footer">
		<h4><a id="zazar" href="http://www.zazar.net/developers/jquery/zrssfeed/">Zazar zRSSFeed Plugin</a></h4>
	</div>
	
</div>

	<script type="text/javascript">
	$(document).ready(function () {
		$('#test').rssfeed('http://rssblog.ameba.jp/kawashima-umika/rss20.xml', {
			limit: 5
		});
	});
	</script>
</body>
</html>


ブラウザで表示【 FireFox 】



IEtester【 IE7 】



IEtester【 IE8 】



IEtester【 IE9 】



ブラウザで表示【 Chrome 】



HTML5 Outliner【 Chrome 】