prototype.jsベースタブ切替
- Control.Tabs〔CSSタブ切替〕
- e24TabMenu - AJAX Dropdown Tab Menu〔ドロップダウンして表示されるアニメーション付きのタブ〕
Control.Tabs
CSSタブ切替
2008/11/23
Control.Tabs
prototype.js v1.6、scriptaculous.js v1.8（effects.js）、Livepipe UI（livepipe.js、tabs.js）
プルダウンメニューの複数選択をチェックボックスで操作可能にするプラグイン。 「複数選択」リンクをクリックすると、プルダウンメニューのアイテムリストがポップアップ表示され、チェックボックスのON・OFFで複数選択できるようになります。【終了】ボタンをクリックすると、選択した値はプルダウンに反映されます。
設置イメージControl.Tabsの設置サンプルサンプルを見る
<!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>Control.Tabs | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects,controls,dragdrop,slider"></script>
<script type="text/javascript" src="/content/lib/livepipe-ui/livepipe.js"></script>
<script type="text/javascript" src="/content/lib/livepipe-ui/tabs.js"></script>
<script type="text/javascript">
document.observe('dom:loaded',function(){
//要素のタブ切替
new Control.Tabs('tabs_example_one');
//要素のタブ切替（ページ送り付き）
var tabs_example_two = new Control.Tabs('tabs_example_two',{
afterChange: function(new_container){
$A($('tabs_example_two_select').options).each(function(option,i){
if(option.value == new_container.id){
$('tabs_example_two_select').options.selectedIndex = i;
throw $break;
}
});
}
});
$('tabs_example_two_select').observe('change',function(){
tabs_example_two.setActiveTab($('tabs_example_two_select').value);
});
$('tabs_example_two_first').observe('click',function(event){
this.first();
Event.stop(event);
}.bindAsEventListener(tabs_example_two));
$('tabs_example_two_previous').observe('click',function(event){
this.previous();
Event.stop(event);
}.bindAsEventListener(tabs_example_two));
$('tabs_example_two_next').observe('click',function(event){
this.next();
Event.stop(event);
}.bindAsEventListener(tabs_example_two));
$('tabs_example_two_last').observe('click',function(event){
this.last();
Event.stop(event);
}.bindAsEventListener(tabs_example_two));
//example 3
new Control.Tabs('tabs_example_three',{
hover: true
});
});
</script>
<style type="text/css">
/* Subsection Tabs
--------------------*/
ul.subsection_tabs { list-style:none; width:600px; margin:0; padding:0; clear:both; border-bottom:1px solid #000; clear:both; overflow:hidden; }
ul.subsection_tabs li.tab { height:1px; display:inline; }
ul.subsection_tabs li.tab a { float:left; font-weight:bold; text-decoration:none; text-align:center; display:block; padding:0; background-color:#666; color:#fff; padding:5px 10px; margin-right:7px; height:1.5em; line-height:1.5em; }
ul.subsection_tabs li.tab a:hover { color:#ff6699; }
ul.subsection_tabs li.tab a.active { background-color:#000; }
ul.subsection_tabs li.source_code { float:right; }
/* example 1 */
.onebox { background:#000; color:#fff; height:200px; width:600px; }
.onebox div { padding:10px; }
.onebox h2 { margin:10px; }
/* example 2 */
.twobox { background:#000; color:#fff; height:200px; width:600px; position:relative; }
.twobox h2 { margin:0 0 10px 0; }
.twobox a { display:block; width:240px; height:180px; position:absolute; top:10px; left:10px; }
.twobox div { margin:0; padding:0; width:330px; height:180px; position:absolute; top:10px; right:10px; }
.tabnavi { margin:10px 0; text-align:center; width:600px; }
/* example 3 */
.tabbed_images { list-style:none; margin:0; padding:0; clear:both; overflow:hidden; }
.tabbed_images li { list-style:none; float:left; margin:0; padding:0; }
.tabbed_images li a { border:1px solid #ccc; display:block; float:left; margin:0 5px 0 0; width:105px; height:80px; }
.tabbed_images li a.active, .tabbed_images li a:hover { border:1px solid #000; }
.tabbed_images li a img { border:none; padding:2px; margin:0; margin-bottom:-5px; }
#image_1, #image_2, #image_3, #image_4, #image_5 { margin-top:10px; padding:2px; border:1px solid #ccc; display:block; clear:left; }
</style>
</head>
<body>
<div id="wrap" style="margin-bottom:200px;">
<h1><a href='http://livepipe.net/control/tabs'>Control.Tabs</a> | 設置サンプル</h1>
<!-- example 1 -->
<h2>要素のタブ切替</h2>
<ul id="tabs_example_one" class="subsection_tabs">
<li class="tab"><a href="#one">Cake</a></li>
<li class="tab"><a href="#two">Doughnuts</a></li>
</ul>
<div id="one" class="onebox"><div><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" align="left" style="margin-right:10px;" /></a><h2>くまさんケーキ</h2>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ</div></div>
<div id="two" class="onebox"><div><a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" width="240" height="180" alt="クリスピー・クリーム・ドーナツ" align="left" style="margin-right:10px;" /></a><h2>クリスピー・クリーム・ドーナツ</h2>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ（Krispy Kreme Doughnuts）」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</div></div>
<!-- example 1 //-->
<!-- example 2 -->
<h2>要素のタブ切替（ページ送り付き）</h2>
<ul id="tabs_example_two" class="subsection_tabs">
<li class="tab"><a href="#a">雑草家</a></li>
<li class="tab"><a href="#b">鳥小屋</a></li>
<li class="tab"><a href="#c">汁べえ</a></li>
<li class="tab"><a href="#d">赤から亭</a></li>
</ul>
<div id="a" class="twobox">
<a href="http://www.flickr.com/photos/22559849@N06/3053111822/" title="雑草家@特選牛の内臓地獄鍋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" width="240" height="180" alt="雑草家@特選牛の内臓地獄鍋" /></a>
<div>
<h2>雑草家@特選牛の内臓地獄鍋</h2>
<p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるｗハツとかいろんな種類のホルモンが楽しめます♪</p>
</div>
</div>
<div id="b" class="twobox">
<a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a>
<div>
<h2>モツ鍋@鳥小屋</h2>
<p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p>
</div>
</div>
<div id="c" class="twobox">
<a href="http://www.flickr.com/photos/22559849@N06/3025639598/" title="トマト入り塩モツ鍋@汁べえ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_m.jpg" width="240" height="180" alt="トマト入り塩モツ鍋@汁べえ" /></a>
<div>
<h2>トマト入り塩モツ鍋@汁べえ</h2>
<p>下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！モツ鍋にトマト!?ってはじめは思ったけど、すごいトマトがいい味出してるんです！！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品♪</p>
</div>
</div>
<div id="d" class="twobox">
<a href="http://www.flickr.com/photos/22559849@N06/2335201198/" title="赤から鍋20辛＠赤から亭 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_m.jpg" width="240" height="180" alt="赤から鍋20辛＠赤から亭" /></a>
<div>
<h2>赤から鍋20辛＠赤から亭</h2>
<p>渋谷の赤から亭で「20辛」に友達とふたりで挑戦！どろっどろしてて、辛かった（； ；）でもおいしかった（*・ω・*）v 完食アドバイス！まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ</p>
</div>
</div>
<div class="tabnavi">
<a href="" id="tabs_example_two_first" style="margin-right:10px;">«</a>
<a href="" id="tabs_example_two_previous" style="margin-right:10px;">←</a>
<select id="tabs_example_two_select" style="margin-right:10px;">
<option value="a">雑草家@特選牛の内臓地獄鍋4</option>
<option value="b">モツ鍋@鳥小屋</option>
<option value="c">塩モツ鍋@汁べえ </option>
<option value="d">赤から鍋20辛@赤から亭</option>
</select>
<a href="" id="tabs_example_two_next" style="margin-right:10px;">→</a>
<a href="" id="tabs_example_two_last">»</a>
</div>
<!-- example 2 //-->
<!-- example 3 -->
<h2>要素のタブ切替（サムネイル画像マウスオーバーで原寸大画像を表示）</h2>
<ul class="tabbed_images" id="tabs_example_three">
<li><a href="#image_1"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_t.jpg" /></a></li>
<li><a href="#image_2"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_t.jpg" /></a></li>
<li><a href="#image_3"><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_t.jpg" /></a></li>
<li><a href="#image_4"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_t.jpg" /></a></li>
</ul>
<img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66.jpg" id="image_1" />
<img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" id="image_2" />
<img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97.jpg" id="image_3" />
<img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf.jpg" id="image_4" />
<!-- example 3 //-->
</div>
</body>
</html>
e24TabMenu - AJAX Dropdown Tab Menu
ドロップダウンして表示されるアニメーション付きのタブ
2009/3/14
e24TabMenu – AJAX Dropdown Tab Menu
prototype.js、scriptaculous.js（effects.js）、e24tabmenu.js
設置イメージe24TabMenu – AJAX Dropdown Tab Menuの設置サンプルサンプルを見る
<!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>Control.Tabs | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
<script type='text/javascript' src="/content/lib/prototype/e24tabmenu.js"></script>
<script type="text/javascript">
function initApp() {
oe24TabMenu = new e24TabMenu( 'menu', { mode:'uppertabs', duration:1.0, transition:Effect.Transitions.sinoidal } );
}
Event.observe(window, 'load', initApp, false);
</script>
<style type="text/css">
#page { margin:0; width:800px; }
#menu { position:relative; height:500px; margin-left:5px; }
#maincontent { margin:20px 0; width:800px; height:300px; background-color:#eee; text-align:center; line-height:300px; }
.gallery { margin:60px auto 30px auto; width:785px; padding:0;}
.gallery div.inner { margin-top:10px; margin-left:20px; }
.menutarget { background-color:#ccc; display:none; border:5px solid #fff; border-top:none; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.flash-free.org/en/2008/04/05/e24tabmenu-%E2%80%93-menu-desplegable-ajax/'>e24TabMenu – AJAX Dropdown Tab Menu</a> | 設置サンプル</h1>
<p>▼タブをクリックすると、コンテンツがドロップダウンして表示されます。</p>
<!-- CODE -->
<div id="page">
<div id="menu" ><!---menu container-->
<div id="item_tab1" class="menutarget">
<div class="gallery" >
<div class="inner">
［タブ1］をクリックした時に表示されます。
</div>
</div>
</div>
<div id="item_tab2" class="menutarget">
<div class="gallery">
<div class="inner">
［タブ2］をクリックした時に表示されます。
</div>
</div>
</div>
<div id="item_tab3" class="menutarget">
<div class="gallery">
<div class="inner">
［タブ3］をクリックした時に表示されます。
</div>
</div>
</div>
<div id="item_tab4" class="menutarget">
<div class="gallery">
<div class="inner">
［タブ4］をクリックした時に表示されます。
</div>
</div>
</div>
<a id="tab1" href="#tab1" rel="e24menuitem[item_tab1]"><img src="/content/lib/prototype/ajax_dropdown_tab_menu/tab1.gif" alt="タブ1" /></a>
<a id="tab2" href="#tab2" rel="e24menuitem[item_tab2]"><img src="/content/lib/prototype/ajax_dropdown_tab_menu/tab2.gif" alt="タブ2" /></a>
<a id="tab3" href="#tab3" rel="e24menuitem[item_tab3]" ><img src="/content/lib/prototype/ajax_dropdown_tab_menu/tab3.gif" alt="タブ3" /></a>
<a id="tab4" href="#tab4" rel="e24menuitem[item_tab4]"><img src="/content/lib/prototype/ajax_dropdown_tab_menu/tab4.gif" alt="タブ4" /></a>
<div id="maincontent">
メインコンテンツ。
</div><!--texto-->
</div><!--menu container-->
<!--End of Menu -->
</div>
<!-- CODE //-->
</div>
</body>
</html>