実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- Feed -->
<link rel="alternate" type="application/rss+xml" title="PHP & JavaScript Room" href="http://feeds.feedburner.com/PhpJavascriptRoom" />
<link rel="alternate" type="application/atom+xml" title="My Blogger" href="http://feeds.feedburner.com/CocoismsDailyTweets" />
<link rel="alternate" type="application/rss+xml" title="My Flickr" href="http://api.flickr.com/services/feeds/photos_public.gne?id=22559849@N06&lang=en-us&format=rss_200n" />
<link rel="alternate" type="application/rss+xml" title="My Twitter Feed (RSS)" href="http://twitter.com/statuses/user_timeline/7948862.rss" />
<link rel="alternate" type="application/atom+xml" title="My Twitter Feed (Atom)" href="http://twitter.com/statuses/user_timeline/7948862.atom" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/feed_menu.js"></script>
<script type="text/javascript">
$(function(){
/* すべて */
var fm = new FeedMenu();fm.write('#jquery_feed_menu');
/* Atomフィードのみ */
var fm = new FeedMenu('link[type*=atom]');
fm.write('#jquery_feed_menu_atom');
/* RSSフィードのみ */
var fm = new FeedMenu('link[type*=rss]');
fm.write('#jquery_feed_menu_rss');
});
</script>
<!-- CSS -->
<style type="text/css">
body {
background:#fff;
}
.feed_menu{
background: url(/content/img/ajax/feed_menu_orange.png) 0 center no-repeat;
padding:2px 0;
display:-moz-inline-box;
display:inline-block;
width:38px;
vertical-align:middle;
overflow: hidden;
margin:0 .25em;
}
.feed_menu.open{
background-position: -38px center !important;
}
.feed_menu select{
opacity:0;
margin:0;
padding:0;
border:0;
}
.feed_menu option img{
border:0;
margin:2px;
vertical-align: middle;
}
/* for ie */
.feed_menu select{
filter:alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
* html .feed_menu{
width:auto;
background:none;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p><a href='http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/'>jQuery Feed Menus</a></p>
<!-- CODE -->
<h2>フィードメニュー</h2>
<p><span id="jquery_feed_menu"></span></p>
<h2>Atomフィードのみ</h2>
<p><span id="jquery_feed_menu_atom"></span></p>
<h2>RSSフィードのみ</h2>
<p><span id="jquery_feed_menu_rss"></span></p>
<!-- / CODE -->
</div>
</body>
</html>