zRSSFeed08
☆★データーでの確認★☆
zRSSFeed
RSS Feeds Reader Plugin for jQuery - Zazar Online Website Builder
Selecting RSS feeds from a menu
使用.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>
ソースコード
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>zRSSFeed - Selecting RSS feeds from a menu</title> <link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.zrssfeed.min.js" type="text/javascript"></script> </head> <body> <h1>zRSSFeed - Selecting RSS feeds from a menu</h1> <h4>AKB48, 小池里奈, 飯田里穂セレクション</h4> <select id="menu"> <option value="http://rssblog.ameba.jp/akihabara48/rss.html">AKB48 Official Blog 〜1830mから〜</option> <option value="http://rssblog.ameba.jp/koikerina/rss20.xml">小池里奈オフィシャルブログ</option> <option value="http://rssblog.ameba.jp/rippi-aloha/rss20.xml">飯田里穂オフィシャルブログ「リッピーアロハ」</option> </select> <h4>選択されたRSSを表示</h4> <div id="test"></div> <script type="text/javascript"> $(document).ready(function() { setRSSFeed('#menu'); $('#menu').change(function() { setRSSFeed(this); }); function setRSSFeed(obj) { var feedurl = $('option:selected', obj).val(); if (feedurl) { $('#test').rssfeed(feedurl); } } }); </script> </body> </html>
@charset "UTF-8"; /* * Example of zRSSFeed Styling (Optional) * * Version: 1.2.0 * (c) Copyright 2011-2013, Zazar Ltd * */ body { margin: 1em 3em; font-family: Tahoma, Genevam, sans-serif; } .rssFeed { font-family: Arial, Helvetica, sans-serif; font-size: 90%; margin: 2em 3em; } .rssFeed a { color: #444; text-decoration: none; } .rssFeed a:hover { color: #000; text-decoration: underline; } .rssHeader { padding: 0.2em 0; } .rssBody { border: 1px solid #999; } .rssBody ul { list-style: none; } .rssBody ul, .rssRow, .rssRow h4, .rssRow p { margin: 0; padding: 0; } .rssRow { padding: 0.8em; } .rssRow h4 { font-size: 1.1em; } .rssRow div { font-size: 90%; color: #666; margin: 0.2em 0 0.4em 0; } .odd { background-color: #e8e8fc; } .even { background-color: #d4d4e8; } .rssRow .rssMedia { padding: 0.5em; font-size: 1em; }
ブラウザで表示【 FireFox 】
- 小池里奈オフィシャルブログ
- 飯田里穂オフィシャルブログ「リッピーアロハ」
IEtester【 IE7 】
IEtester【 IE8 】
IEtester【 IE9 】
ブラウザで表示【 Chrome 】