タブメニューにしました

2008/08/02
07:08

左のメニューを無くし、代わりにタブメニューを追加してみました。

いつもどおり？prototype.js依存です
同封していますが、不要ならば削除ください。

いかがでしょうか？

最近NZの話題全くしてませんねぇ。。。

今回も雨のオークランドの話です。
先週、アパートのマネージャから

明日ヤバいから、ベランダの椅子とかしまってくれ
携帯電話も充電とリチャージ(プリペイドだから)をしといてくれ
飲み物、食べ物を確保しといてくれ
おそらく、こちらで準備はできないからー

といった内容のメモをもらいました。

オール電化は怖いですね。
EFTPOSとかも使えなくなる、銀行も下せなくなる

幸い、もらった次の日に来た10年来の嵐は
それといった被害も出ずに過ぎ去りましたが、、、

----
ソースは、以下になります。

<!-- tab menu -->
<!-- prototype.js -->
<script src="http://syany.watasi.net/com/js/prototype/prototype.min.js" type="text/javascript" charset="utf-8"></script>
<!-- /prototype.js -->
<!-- //
////// タブメニュー: 使用頻度の高いプラグインをタブで一括表示
/// -->
<div id="tabContents" style="font-weight: bold;">読み込み中...</div>
<script type="text/javascript">//<![CDATA[
	// タブコンテンツ内容
	var menuContents = [
		{
			name: '記',
			title: '最新記事',
			className: 'tabmenu001',
			liClass: 'tabList',
			caption: '<h4>最新記事</h4><a href="<%url>?xml" title="最新記事のRSS">最新記事のRSS</a><ul><!--recent--><li><a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a></li><!--/recent--></ul>'
		},
		{
			name: '暦',
			title: 'カレンダー',
			className: 'tabmenu002',
			caption: '<h4>カレンダー</h4><div class="plugin-calender" &align><table summary="カレンダー" class="calender"><caption><a href="<%prev_month_link>"><%prev_month></a>| <%now_year>/<%now_month> | <a href="<%next_month_link>"><%next_month></a></caption><tr><th abbr="日曜日" scope="col" id="sun">日</th><th abbr="月曜日" scope="col">月</th><th abbr="火曜日" scope="col">火</th><th abbr="水曜日" scope="col">水</th><th abbr="木曜日" scope="col">木</th><th abbr="金曜日" scope="col">金</th><th abbr="土曜日" scope="col" id="sat">土</th></tr><!--calender--><tr><td><%calender_sun></td><td><%calender_mon></td><td><%calender_tue></td><td><%calender_wed></td><td><%calender_thu></td><td><%calender_fri></td><td><%calender_sat></td></tr><!--/calender--></table></div>'
		},
		{
			name: '月',
			title: '月別アーカイブ',
			className: 'tabmenu003',
			liClass: 'tabList',
			caption: '<h4>月別アーカイブ</h4><ul><!--archive--><li><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月"><%archive_year>年<%archive_month>月 (<%archive_count>)</a></li><!--/archive--></ul>'
		},
		{
			name: '区',
			title: 'カテゴリ',
			className: 'tabmenu004',
			liClass: 'tabList',
			caption: '<h4>カテゴリー</h4><ul><!--category--><li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li><!--/category--></ul>'
		},
		{
			name: '評',
			title: 'コメント',
			className: 'tabmenu001',
			liClass: 'tabList',
			caption: '<h4>コメント</h4><a href="<%url>?xml&comment" title="最新コメントのRSS">最新コメントのRSS</a><ul><!--rcomment--><li><a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a></li><!--/rcomment--></ul>'
		},
		{
			name: '跡',
			title: 'トラックバック',
			className: 'tabmenu002',
			liClass: 'tabList',
			caption: '<h4>トラックバック</h4><a href="<%url>?xml&trackback" title="最新トラックバックのRSS">最新トラックバックのRSS</a><ul><!--rtrackback--><li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_title>"><%rtrackback_blog_name>:<%rtrackback_title> (<%rtrackback_month>/<%rtrackback_day>)</a></li><!--/rtrackback--></ul>'
		},
		{
			name: '接',
			title: 'リンク',
			className: 'tabmenu003',
			liClass: 'tabList',
			caption: '<h4>リンク</h4><a href="javascript:window.location.replace(\"http://blog.fc2.com/?linkid=<%blog_id>\");">このブログをリンクに追加する</a><ul><!--link--><li><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li><!--/link--><li><a href="./?admin">管理者ページ</a></li></ul>'
		}
	];
	// div ID
	var defID          = 'tabMenu';
	// デフォルト の表示タブ
	// デフォルト で使用可能な文字: 記、暦、月、区、評、跡、接
	var defCurrent     = '暦';
	// ヘッダークラス
	var defHeaderClass = 'tabHeader';
	// ボディークラス
	var defBodyClass   = 'tabBody';
	// リストクラス
	var defUlClass     = 'tabList';
	// 表示位置(IDかクラスを指定)
	var defSelector    = 'tabContents';
// ]]</script><script src="http://syany.watasi.net/com/js/prototype/tabmenu.api.1.00.min.js" type="text/javascript" charset="utf-8"></script><a href="http://ksyany.blog32.fc2.com/" style="font-size: xx-small;text-decoration: none;" target="_blank">powered by syany</a>
<!-- /tab menu -->

今回はAPIということで、使用者さんが編集できる項目を多く設けてあります。
応用は利きますが、長いです。

1例として

var menuContents = [
		{
			name: 'その１',
			title: 'その１ですよ',
			className: 'tabmenu001',
			caption: 'タブその１'
		},
		{
			name: 'その２',
			title: 'その２ですわ',
			className: 'tabmenu002',
			caption: 'タブその２'
		};
	var defCurrent     = 'その１';

に変えていただくと、どのような編集が可能かを確認できると思います(おそらく

＊気まぐれクラウドお使いの皆様への共存
このタブに、コメントやカテゴリを入れてしまいますと、おそらく
クラウド対象にならないと思います。(実験済み)
もし、絶対にクラウドにも入れたいんだーって方がおられましたら

今までのプラグインを