[jQuery Plugin] RssBinder
複数のRSS,XMLを統合して、日付順にソートしてくれるjQuery Pluginを作りました。
最近何度か同様の処理のjsを書いたので、プラグインとして纏めておきました。
[概要]
・複数のRSS,XMLを統合して、日付順にソートしてくれます。
・各ブログのタイトルを個別に任意のものに書き換える事も可能です。
[他に必要なプラグイン]
・jQuery v1.6 or later
・google Ajax API ※使用するドメインのAPIkeyを取得してください
[デモ]
http://is8r.github.com/jquery-rssbinder/htdocs/
[ソースコード]
https://github.com/is8r/jquery-rssbinder
※githubで公開しています。
[使い方]
ヘッダにスクリプトを読み込み、cssとjsを記載
<script type="text/javascript" src="./share/js/plugin/jquery.rssbinder-1.0.js"></script>
<script src="https://www.google.com/jsapi?key=取得したAPIKey" type="text/javascript"></script>
<!--dyrect-->
<style type="text/css">
/* rssbinder */
#feed
{
width: 500px;
margin: 0 auto;
}
ul.list-feed
{
_zoom: 1;
overflow: hidden;
border-top: 1px dotted #ddd;
border-bottom: 1px dotted #ddd;
}
ul.list-feed li
{
margin-top: -1px;
border-top: 1px dotted #ddd;
}
ul.list-feed li a
{
display: block;
padding: 10px;
font-size: 16px;
line-height: 1.8em;
text-decoration: none;
}
ul.list-feed li a:hover
{
background: #f2f2f2;
}
ul.list-feed li .date
{
font-size: 9px;
margin: 0 10px 0 0;
color: #222;
float:left;
display: block;
}
ul.list-feed li .title
{
overflow:auto;
zoom:1;
}
</style>
<script type="text/javascript"><!--
$(function() {
var urls = [
'http://b.hatena.ne.jp/hotentry.rss?mode=general',
'http://kyoko-np.net/index.xml',
'http://b.hatena.ne.jp/hotentry/knowledge.rss'
];
$('#feed ul.list-feed').rssbinder({
urls:urls,
max:20
});
});
// --></script>
bodyに要素を配置
<div id="feed"> <ul class="list-feed"> </ul> </div>