jQuery pluginタブ
- Advanced docking using jQuery〔複数のリストをドッキングして表示できるタブ切替メニュー〕
- Create A Tabbed Interface Using jQuery〔シンプルなタブ〕
- jQuery Tab〔コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法 〕
- jQuery Tabbed Side Menu from Queness WebBlog〔スライドアップ・ダウン効果で切り替わるタブ型スライドメニュー〕
- jQuery Tabs〔シンプルなタブ〕
- jQuery: Ein Tab-Plugin selber schreiben〔ナビゲーションを自動生成するタブ〕
- simplyTabs〔タブで画像切替〕
- zudolab jqTabContents〔タブ部分をテキストまたは画像で指定可能なタブ〕
Advanced docking using jQuery
複数のリストをドッキングして表示できるタブ切替メニュー
2009/6/6
Advanced docking using jQuery
jQueryを使用して、複数のタブメニューのリストをドッキングして表示する方法が掲載されています。
リストからタブ切替可能なメニューを生成します。 各タブをクリックすると、左サイドにメニューが表示されます。 そのメニューの左上にある[固定]リンクをクリックすると、現在のメニューを固定することができます。 さらに、別のタブをクリックして[固定]リンクをクリックして、というように複数のメニューを縦方向に連結して表示することができます。 [固定]リンクをクリックした順番とは関係なく、タブの順番にしたがって連結されます。

<!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>Advanced docking using jQuery | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var docked = 0; $("#dock li ul").height($(window).height()); $("#dock .dock").click(function(){ $(this).parent().parent().addClass("docked").removeClass("free"); docked += 1; var dockH = ($(window).height()) / docked var dockT = 0; $("#dock li ul.docked").each(function(){ $(this).height(dockH).css("top", dockT + "px"); dockT += dockH; }); $(this).parent().find(".undock").show(); $(this).hide(); if (docked > 0) $("#content").css("margin-left","250px"); else $("#content").css("margin-left", "60px"); }); $("#dock .undock").click(function(){ $(this).parent().parent().addClass("free").removeClass("docked") .animate({left:"-180px"}, 200).height($(window).height()).css("top", "0px"); docked = docked - 1; var dockH = ($(window).height()) / docked var dockT = 0; $("#dock li ul.docked").each(function(){ $(this).height(dockH).css("top", dockT + "px"); dockT += dockH; }); $(this).parent().find(".dock").show(); $(this).hide(); if (docked > 0) $("#content").css("margin-left", "250px"); else $("#content").css("margin-left", "60px"); }); $("#dock li").hover(function(){ $(this).find("ul").animate({left:"40px"}, 200); }, function(){ $(this).find("ul.free").animate({left:"-180px"}, 200); }); }); </script> <!-- CSS --> <style type="text/css"> body { background:#f0f0f0; margin-left:60px; } /* dock */ #dock { margin:0; padding:0; list-style:none; position:fixed; top:00px; height:100%; z-index:100; background-color:#f0f0f0; left:0; } #dock > li {width:40px; height:120px; margin:0 0 1px 0; background-color:#f0f0f0; background-repeat:no-repeat; background-position:left center;} #dock #links {background-image:url(/content/img/ajax/advanced_docking/links.png);} #dock #files {background-image:url(/content/img/ajax/advanced_docking/files.png);} #dock #tools {background-image:url(/content/img/ajax/advanced_docking/tools.png);} #dock > li:hover {background-position:-40px 0px;} /* panels */ #dock ul li {padding:0 5px; border:solid 1px #f1f1f1;} #dock ul li:hover {background:#D3DAED url(/content/img/ajax/advanced_docking/item_bkg.png) repeat-x; border:solid 1px #A8D8EB;} #dock ul li.header, #dock ul li .header:hover {background:#D3DAED url(/content/img/ajax/advanced_docking/header_bkg.png) repeat-x;border:solid 1px #F1F1F1;} #dock > li:hover ul { display:block; } #dock > li ul { position:absolute; top:0; left:-180px; z-index:-1; width:180px; display:none; background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;} #dock > li ul.docked { display:block; z-index:-2; } .dock,.undock{float:right;} .undock {display:none;} #content { margin:10px 0 0 0; } </style> </head> <body> <div id="wrap"> <!-- CODE --> <ul id="dock"> <li id="links"> <ul class="free"> <li class="header"><a href="#" class="dock">固定</a><a href="#" class="undock">固定解除</a>Links</li> <li><a href="#">Links - 1</a></li> <li><a href="#">Links - 2</a></li> <li><a href="#">Links - 3</a></li> <li><a href="#">Links - 4</a></li> <li><a href="#">Links - 5</a></li> </ul> </li> <li id="files"> <ul class="free"> <li class="header"><a href="#" class="dock">固定</a><a href="#" class="undock">固定解除</a>Files</li> <li><a href="#">Files - 1</a></li> <li><a href="#">Files - 2</a></li> <li><a href="#">Files - 3</a></li> <li><a href="#">Files - 4</a></li> <li><a href="#">Files - 5</a></li> </ul> </li> <li id="tools"> <ul class="free"> <li class="header"><a href="#" class="dock">固定</a><a href="#" class="undock">固定解除</a>Tools</li> <li><a href="#">Tools - 1</a></li> <li><a href="#">Tools - 2</a></li> <li><a href="#">Tools - 3</a></li> <li><a href="#">Tools - 4</a></li> <li><a href="#">Tools - 5</a></li> </ul> </li> </ul><!-- #>dock --> <div id="content"> <h1><a href='http://www.jankoatwarpspeed.com/post/2009/06/01/Advanced-docking-using-jQuery.aspx'>Advanced docking using jQuery</a> | 設置サンプル</h1> <p> jQueryを使用して、複数のタブメニューのリストをドッキングして表示する方法が掲載されています。 </p> <p> リストからタブ切替可能なメニューを生成します。 各タブをクリックすると、左サイドにメニューが表示されます。 そのメニューの左上にある[固定]リンクをクリックすると、現在のメニューを固定することができます。 さらに、別のタブをクリックして[固定]リンクをクリックして、というように複数のメニューを縦方向に連結して表示することができます。 [固定]リンクをクリックした順番とは関係なく、タブの順番にしたがって連結されます。 </p> <p> Praesent iaculis lectus id magna semper laoreet vel sit amet lectus. Vestibulum purus ante, pellentesque quis fringilla a, suscipit id lectus. In ullamcorper posuere leo, vel auctor enim placerat ac. Sed vitae hendrerit ipsum. Nam ac nulla eget lectus sagittis suscipit. Fusce eu risus vitae elit vehicula fermentum. Integer commodo fringilla mi, eget viverra nunc dapibus non. Sed faucibus mi vel turpis lobortis consectetur. Donec pulvinar, erat id vulputate tempus, leo tortor tincidunt nisl, id hendrerit sapien nibh a sapien. Morbi eu mauris sed felis euismod semper. Pellentesque nunc mi, placerat ut faucibus nec, suscipit ut orci. Duis eu enim risus, a dictum nunc. Ut gravida neque vel arcu faucibus convallis. Aliquam euismod eleifend nunc at ornare. Aliquam tellus nisl, pellentesque vitae imperdiet nec, eleifend eu augue. Integer bibendum posuere nisl, eu vehicula orci luctus at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean in ante sapien. </p> <p> Proin mattis condimentum erat, et accumsan nunc tempus vulputate. Proin posuere mauris ut tortor accumsan ultricies. Aenean felis purus, pretium non pretium quis, iaculis sed erat. Donec ultrices libero eu dui tristique convallis. Fusce risus libero, bibendum in placerat sed, hendrerit ac sem. Nulla ornare risus non magna aliquam vehicula viverra elit tincidunt. Donec porttitor dapibus nunc sed cursus. Sed pretium sapien ut dolor placerat at cursus ligula aliquet. Nulla adipiscing nunc nec lacus consectetur vel gravida dui pharetra. Curabitur pharetra odio a sapien facilisis id faucibus magna dignissim. Sed auctor porta tellus a porttitor. Pellentesque consequat, eros in adipiscing rhoncus, arcu dui hendrerit risus, at sodales sapien est in odio. In accumsan interdum diam, sed congue nibh ultricies quis. Integer nec leo dolor, a porta mi. Sed adipiscing, neque et faucibus egestas, diam orci rutrum erat, eget congue arcu purus rutrum dolor. Nullam vel nisl non lacus pretium sodales. </p> <p> Praesent eros est, varius a lobortis sed, ultricies id erat. Integer lacinia nulla lacus, sit amet vulputate tortor. Nullam tincidunt velit at nunc pharetra sit amet condimentum sapien ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sagittis ornare vehicula. Vestibulum a arcu ac dui vulputate porta ac non nibh. Praesent sem mi, faucibus vel suscipit sit amet, iaculis sit amet orci. Nunc nec mauris ante, at eleifend felis. Aliquam quis vehicula nisi. Duis nisl urna, aliquet a pellentesque id, vehicula semper nunc. </p> <p> Curabitur eget eros imperdiet purus semper malesuada. Pellentesque vitae dui est. Curabitur luctus commodo aliquam. Quisque ut ligula metus, id euismod ligula. Mauris sollicitudin nisl eget odio congue vel congue est hendrerit. Mauris eu libero ac lectus commodo sodales ut id risus. Maecenas ultricies euismod ante, ut semper nisi lobortis pulvinar. Duis mollis velit et tortor gravida imperdiet. Integer malesuada elit vel nibh rutrum in porta ipsum auctor. Proin lacinia arcu nec tellus consequat ornare. </p> </div><!-- #content --> <!-- / CODE --> </div> </body> </html>
Create A Tabbed Interface Using jQuery
シンプルなタブ
2009/3/14
Create A Tabbed Interface Using jQuery
jQueryを使用してタブで切り替えるコンテンツを作成するjQueryプラグイン。
コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット、リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツの2つのサンプルが掲載されています。


<!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>Create A Tabbed Interface Using jQuery | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript"> $(function(){ $('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); $('#featuredvid > ul').tabs(); }); </script> <!-- CSS --> <style type="text/css"> /* 例1 */ .widget { width:310px; margin:20px 20px 15px 20px; padding:10px; background:#f3f1eb; border:1px solid #dedbd1; } .widget a { color:#222; text-decoration:none; } .widget a:hover { color:#009; text-decoration:underline; } .tabnav ul { margin:0; padding:0; list-style:none; } .tabnav li { margin:0; padding:0; list-style:none; display:inline; list-style:none; } .tabnav li a { text-decoration:none; color:#222; font-weight:bold; padding:4px 6px; outline:none; } .tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a { background:#dedbd1; color:#222; text-decoration:none; } .tabdiv { margin-top:2px; padding:5px; background:#fff; border:1px solid #dedbd1; } .tabdiv p { margin:10px; padding:0; } .tabdiv li { list-style-image:url(/content/img/icon/color/star.gif); margin-left:20px; } #post.tabdiv li { list-style-image:url(/content/img/icon/color/arrow_next.gif); } .ui-tabs-hide { display:none; } /* 例2 */ #featuredvid { width:340px; margin:0; padding:0; text-align:center; } #featuredvid .fvid { margin:10px; } #featuredvid .ui-tabs-nav { margin:10px; padding:0; } #featuredvid .ui-tabs-nav li { list-style:none; margin:5px 0 0 0; padding:5px; border:1px solid #dedbd1; background:#fff; text-transform:uppercase; text-align:left; } </style> </head> <body> <div id="wrap"> <h1><a href='http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/'>Create A Tabbed Interface Using jQuery</a> | 設置サンプル</h1> <!-- CODE --> <h2>コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット</h2> <div id="tabvanilla" class="widget"> <ul class="tabnav"> <li><a href="#post">Post</a></li> <li><a href="#bookmark">Bookmark</a></li> <li><a href="#email">E-mail</a></li> </ul> <div id="post" class="tabdiv"> <ul> <li><a href="#">MySpace</a></li> <li><a href="#">Friendster</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Orkut</a></li> <li><a href="#">Bebo</a></li> <li><a href="#">Tagged</a></li> <li><a href="#">Blogger</a></li> <li><a href="#">Hi5</a></li> <li><a href="#">Live Spaces</a></li> <li><a href="#">Piczo</a></li> <li><a href="#">Freewebs</a></li> <li><a href="#">LiveJournal</a></li> <li><a href="#">BlackPlanet</a></li> <li><a href="#">myYearbook</a></li> <li><a href="#">More</a></li> </ul> </div><!--/post--> <div id="bookmark" class="tabdiv"> <ul> <li><a href="#">Google Bookmarks</a></li> <li><a href="#">del.icio.us</a></li> <li><a href="#">Digg</a></li> <li><a href="#">Furl</a></li> <li><a href="#">Facebook Share</a></li> <li><a href="#">StumbleUpon</a></li> <li><a href="#">Yahoo MyWeb</a></li> <li><a href="#">Newsvine</a></li> <li><a href="#">Reddit</a></li> <li><a href="#">Technorati</a></li> <li><a href="#">LiveBookmarks</a></li> <li><a href="#">Yahoo Bookmarks</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Current TV</a></li> <li><a href="#">Ask</a></li> </ul> </div><!--bookmark--> <div id="email" class="tabdiv"> <p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p> <p>E-mail:<input type="text" /></p> <p>Password:<input type="password" /></p> <p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p> <p><input type="button" value="インポート" /></p> </div><!--/email--> </div><!--/widget--> <h2>リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツ</h2> <div id="featuredvid" class="widget"> <div class="fvid" id="vid-1"> <object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/qjNP8LErRn0&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qjNP8LErRn0&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object> </div> <div class="fvid" id="vid-2"> <object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/YXRH50fvHWA&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YXRH50fvHWA&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object> </div> <div class="fvid" id="vid-3"> <object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/rfqNXADl3kU&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rfqNXADl3kU&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object> </div> <ul class="vidselector"> <li><a href="#vid-1"><span>Hamster Vacuum!</span></a></li> <li><a href="#vid-2"><span>My hamster can not manage to stop spinning in his wheel</span></a></li> <li><a href="#vid-3"><span>THE LEGEND of Hamster on a piano and pop corn! 5 MILLION VIEWS! THANKYOU ALL!</span></a></li> </ul> </div><!--/featuredvid--> <!-- / CODE --> </div> </body> </html>
jQuery Tab
コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法
2009/3/14
jQuery Tab
jQueryを使用して、コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法が掲載されています。 タブ切替時にコンテンツの内容がスライドアニメーション表示されます。

<!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>jQuery Tab | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("a.tab").click(function(){ $(".activo").removeClass("activo"); $(this).addClass("activo"); $(".contenido").hide('slow'); var muestra = $(this).attr("title"); $("#"+muestra).show('slow'); }); }); </script> <!-- CSS --> <style type="text/css"> ul,li { margin:0; padding:0; list-style:none; } #contenedor { width:600px; } #tab_contenedor { padding:8px 8px; width:300px; background:#097793; border:1px solid #000; } #tab_contenido { padding:5px; background:#fff; } ul.titulos { margin-top:5px; margin-bottom:6px; } ul.titulos li { display:inline; } ul.titulos li a { color:#097793; padding:5px 10px 6px 10px; text-transform:uppercase; background:#fff; border-bottom:1px solid #097793; } ul.titulos li a:hover { border-bottom:1px solid #ccc; color:#ccc; } ul.titulos li a.activo { color:#000; border-bottom:1px solid #fff; background:#fff; } a.tab { font-weight:bold; text-decoration:none; } .contenido p, .contenido ul { margin:10px 0; padding:0 11px; } .contenido ul li { margin-bottom:3px; } .contenido ul li a { color:#3f4c4f; } .contenido ul li a:hover { color:#899fa5; } #bookmark, #email { display:none; } </style> </head> <body> <div id="wrap"> <h1><a href='http://dl.getdropbox.com/u/363073/development/jquery/jquery-tab.html'>jQuery Tab</a> | 設置サンプル</h1> <p>▼コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツ</p> <!-- CODE --> <div id="tab_contenedor"> <ul class="titulos"> <li><a href="#" title="post" class="tab activo">Post</a></li> <li><a href="#" title="bookmark" class="tab">Bookmark</a></li> <li><a href="#" title="email" class="tab">E-mail</a></li> </ul> <div id="tab_contenido"> <div id="post" class="contenido"> <ul> <li><a href="#">MySpace</a></li> <li><a href="#">Friendster</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Orkut</a></li> <li><a href="#">Bebo</a></li> <li><a href="#">Tagged</a></li> <li><a href="#">Blogger</a></li> <li><a href="#">Hi5</a></li> <li><a href="#">Live Spaces</a></li> <li><a href="#">Piczo</a></li> <li><a href="#">Freewebs</a></li> <li><a href="#">LiveJournal</a></li> <li><a href="#">BlackPlanet</a></li> <li><a href="#">myYearbook</a></li> <li><a href="#">More</a></li> </ul> </div> <div id="bookmark" class="contenido"> <ul> <li><a href="#">Google Bookmarks</a></li> <li><a href="#">del.icio.us</a></li> <li><a href="#">Digg</a></li> <li><a href="#">Furl</a></li> <li><a href="#">Facebook Share</a></li> <li><a href="#">StumbleUpon</a></li> <li><a href="#">Yahoo MyWeb</a></li> <li><a href="#">Newsvine</a></li> <li><a href="#">Reddit</a></li> <li><a href="#">Technorati</a></li> <li><a href="#">LiveBookmarks</a></li> <li><a href="#">Yahoo Bookmarks</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Current TV</a></li> <li><a href="#">Ask</a></li> </ul> </div> <div id="email" class="contenido"> <p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p> <p>E-mail:<input type="text" /></p> <p>Password:<input type="password" /></p> <p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p> <p><input type="button" value="インポート" /></p> </div> </div> </div> <!-- / CODE --> </div> </body> </html>
jQuery Tabs
シンプルなタブ
2009/3/14
jQuery Tabs
jQueryを使用してタブで切り替えるコンテンツを作成する方法が2つ掲載されています。
タブナビゲーションはリスト要素+a要素でマークアップし、a要素のhref属性に<li><a href='#first'>
のようにハッシュを指定します。
1つ目の例では、すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。
2つ目の例では、タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。
例1の方がスマートな実装な気がします。

<!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>jQuery Tabs | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /* 例1 */ // コンテンツを格納 var tabContainers = $('#exp1 > div'); $('#exp1 ul.tabnav a').click(function () { // すべてのタブコンテンツを非表示にし、 // クリックされたハッシュをIDとするタブコンテンツだけ表示 tabContainers.hide().filter(this.hash).show(); // 選択中のタブをハイライト表示 $('#exp1 ul.tabnav a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); // 最初のタブコンテンツだけ表示 /* 例2 */ // パス名格納用 var tabs = []; // ハッシュ格納用 var tabContainers2 = []; $('#exp2 ul.tabnav a').each(function () { // 現在のウィンドウのパス名を取得して配列に格納 // if (this.pathname == window.location.pathname) { tabs.push(this); // ハッシュを取得して配列に格納 tabContainers2.push($(this.hash).get(0)); // } }); $(tabs).click(function () { // すべてのタブコンテンツを非表示に // クリックされたハッシュをIDとするタブコンテンツだけ表示 $(tabContainers2).hide().filter(this.hash).show(); // 選択中のタブをハイライト表示 $(tabs).removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); // 最初のタブコンテンツだけ表示 }); </script> <!-- CSS --> <style type="text/css"> :focus { outline:0; } ul, li { margin:0; padding:0; list-style:none; } #exp1, #exp2 { margin:0 0 20px 0; padding:0; } ul.tabnav { overflow:hidden; } ul.tabnav li { display:inline; } ul.tabnav li a { padding:3px 7px; background-color:#ccc; color:#000; text-decoration:none; } ul.tabnav li a.selected, ul.tabnav li a:hover { background-color:#666; color:#fff; padding-top:7px; } div.tabs div { margin:0; padding:10px; background-color:#666; color:#fff; } div.tabs div h2 { margin:10px 0; } </style> </head> <body> <div id="wrap"> <h1><a href='http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/'>Create A Tabbed Interface Using jQuery</a> | 設置サンプル</h1> <p>▼すべてのタブコンテンツを非表示にし、クリックされたハッシュをIDとするタブコンテンツだけ表示</p> <!-- CODE --> <h2>例1</h2> <p> すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。 </p> <div class="tabs" id="exp1"> <ul class="tabnav"> <li><a href="#first">タブ1</a></li> <li><a href="#second">タブ2</a></li> <li><a href="#third">タブ3</a></li> </ul> <div id="first"> <h2>タイトル1</h2> <p>[タブ1]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="second"> <h2>タイトル2</h2> <p>[タブ2]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="third"> <h2>タイトル3</h2> <p>[タブ3]をクリックした時に表示される、タブコンテンツです。</p> </div> </div> <h2>例2</h2> <p> タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。 </p> <div class="tabs" id="exp2"> <ul class="tabnav"> <li><a href="#forth">タブ4</a></li> <li><a href="#fifth">タブ5</a></li> <li><a href="#sixth">タブ6</a></li> </ul> <div id="forth"> <h2>タイトル4</h2> <p>[タブ4]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="fifth"> <h2>タイトル5</h2> <p>[タブ5]をクリックした時に表示される、タブコンテンツです。</p> </div> <div id="sixth"> <h2>タイトル6</h2> <p>[タブ6]をクリックした時に表示される、タブコンテンツです。</p> </div> </div> <!-- / CODE --> </div> </body> </html>
jQuery: Ein Tab-Plugin selber schreiben
ナビゲーションを自動生成するタブ
2009/3/14
jQuery: Ein Tab-Plugin selber schreiben
jQueryを使用してタブを作成する方法が掲載されています。 ナビゲーション部分はコンテンツ内の特定の要素(例えばh3要素)の内容を取得して自動的に生成しています。

<!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>jQuery: Ein Tab-Plugin selber schreiben | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.tabs = function(options) { var defaults = { container: '#tabcontent', tabtitle: 'h1' }; var options = $.extend(defaults, options); var list = $("<ul>"); var target = $(options.container); target.children("div").hide(); target.children("div:first").show(); target.children("div").each(function(i){ var heading = $(this).children(options.tabtitle+":first").text(); var targetid = $(this).attr("id"); if(heading == "") heading = i; var listitem = $("<li><a href='#"+targetid+"'>"+heading+"</a></li>"); listitem.click(function(){ target.children("div").hide(); $("#"+targetid).show(); return false; }); list.append(listitem); }); $(this).append(list); }; })(jQuery); $(function(){ $("#tabnav").tabs({ container: '#tabcontent', tabtitle: 'h3' }); }); </script> <!-- CSS --> <style type="text/css"> ul,li { margin:0; padding:0; list-style:none; } /* navigation */ #tabnav li { float:left; margin-right:5px; } #tabnav li a { padding:5px 15px; display:block; background:#ddd; } /* content */ #tabcontent { clear:both; border:1px solid #ddd; width:500px; } #tabcontent div { background:#eee; padding:20px; </style> </head> <body> <div id="wrap"> <h1><a href='http://ugotit.de/2009/03/02/jquery-ein-tab-plugin-selber-schreiben/'>jQuery: Ein Tab-Plugin selber schreiben</a> | 設置サンプル</h1> <p>▼ナビゲーション部分はコンテンツ内の特定の要素(例えばh3要素)の内容を取得して自動的に生成しています。 </p> <!-- CODE --> <div id="tabnav"></div> <div id="tabcontent"> <div id="tab1"> <h3>タブ1</h3> <p> [タブ1]をクリックした時に表示されます。 </p> </div> <div id="tab2"> <h3>タブ2</h3> <p> [タブ2]をクリックした時に表示されます。 </p> </div> <div id="tab3"> <h3>タブ3</h3> <p> [タブ3]をクリックした時に表示されます。 </p> </div> </div> <!-- / CODE --> </div> </body> </html>
simplyTabs
タブで画像切替
2009/3/14
Simply Tabs
ページ内のアンカーリストから、タブ切替コンテンツを作成するjQueryプラグイン。
アンカーの対象となる要素が存在しない場合、その特定のタブは作成されません。 ナビゲーションやコンテンツのクラス名はオプションで変更することができます。

<!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>Simply Tabs | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/simplytabs/jquery.simplytabs.js"></script> <script type="text/javascript"> $(function(){ $('#tabbedTextContent').simplyTabs({ onShow: function(){ //this callback displays the img title as image legend var caption = $(this.hash +' img').eq(0).attr('title'); $('#imageLegend').text(caption); }}); }); </script> <!-- CSS --> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/simplytabs/jquery.simplytabs.css" /> <style type="text/css"> /* this page css */ #leftcol { width:240px; height:241px; } .simplyTabs .tab-panel { border:1px dotted black; padding-top:20px; border-width:1px 0; width:100%; } .simplyTabs ul.tab-menu { font-size:12px; } #imageLegend { width:auto; font-style:italic; font-size:12px; border-right-width:0; padding:0 10px; } </style> </head> <body> <div id="wrap"> <h1><a href='http://plugins.jquery.com/project/simplyTabs'>Simply Tabs</a> | 設置サンプル</h1> <p>▼画像をタブ切替します。</p> <!-- CODE --> <div id="leftcol"> <div id="tabbedTextContent"> <div id="fragment0"> <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" title="アボガド シーザーサラダ" /> </div> <div id="fragment1"> <img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" title="アボガド刺" /> </div> <div id="fragment2"> <img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" title="アボガドとベーコンのピザ" /> </div> <div id="fragment3"> <img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" title="ハニートースト" /> </div> <ul class="tabsNavMenu"> <li><a href="#fragment0">0</a></li> <li><a href="#fragment1">1</a></li> <li><a href="#fragment2">2</a></li> <li><a href="#fragment3">3</a></li> <li id="imageLegend">I ♥ avocado</li> </ul> </div> </div> <!-- / CODE --> </div> </body> </html>
zudolab jqTabContents
タブ部分をテキストまたは画像で指定可能なタブ
2009/3/14
zudolab jqTabContents
タブ部分をテキストまたは画像で指定可能なタブ切替コンテンツを作成するjQueryプラグイン。

<!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>zudolab jqTabContents | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jqtabcontents/jqTabContents.js"></script> <script type="text/javascript"> new TabContents("#tabNav1 a"); new TabContents("#tabNav2 a"); </script> <!-- CSS --> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jqtabcontents/style.css" /> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jqtabcontents/forjs.css" /> <style type="text/css"> /* over-write */ ul,li { list-style:none; margin:0; padding:0; } </style> </head> <body> <div id="wrap"> <h1><a href='http://javascript.zudolab.net/en/jqTabContents/'>zudolab jqTabContents</a> | 設置サンプル</h1> <!-- CODE --> <h2>テキストタブ</h2> <div class="tabSet1"> <ul id="tabNav1"> <li><a href="#content1">タブ1</a></li> <li><a href="#content2" class="showThis">タブ2</a></li> <li><a href="#content3">タブ3</a></li> <li><a href="#content4">タブ4</a></li> </ul> <div class="tabContentsGroup"> <div class="content" id="content1"> <h3>タブ1</h3> <p>[タブ1]をクリックした時に表示されるコンテンツです。</p> </div> <div class="content" id="content2"> <h3>タブ2</h3> <p>[タブ2]をクリックした時に表示されるコンテンツです。</p> </div> <div class="content" id="content3"> <h3>タブ3</h3> <p>[タブ3]をクリックした時に表示されるコンテンツです。</p> </div> <div class="content" id="content4"> <h3>タブ4</h3> <p>[タブ4]をクリックした時に表示されるコンテンツです。</p> </div> </div> </div> <h2>画像タブ</h2> <div class="tabSet2"> <ul id="tabNav2"> <li><a href="#content5" class="showThis"><img src="/content/lib/jquery/jqtabcontents/imgs/off/1.gif" alt="タブ5" /></a></li> <li><a href="#content6"><img src="/content/lib/jquery/jqtabcontents/imgs/off/2.gif" alt="タブ6" /></a></li> <li><a href="#content7"><img src="/content/lib/jquery/jqtabcontents/imgs/off/3.gif" alt="タブ7" /></a></li> <li><a href="#content8"><img src="/content/lib/jquery/jqtabcontents/imgs/off/4.gif" alt="タブ8" /></a></li> </ul> <div class="tabContentsGroup"> <div class="content" id="content5"> <h3>タブ5</h3> <p>[タブ5]をクリックした時に表示されるコンテンツです。</p> </div> <div class="content" id="content6"> <h3>タブ6</h3> <p>[タブ6]をクリックした時に表示されるコンテンツです。</p> </div> <div class="content" id="content7"> <h3>タブ7</h3> <p>[タブ7]をクリックした時に表示されるコンテンツです。</p> </div> <div class="content" id="content8"> <h3>タブ8</h3> <p>[タブ8]をクリックした時に表示されるコンテンツです。</p> </div> </div> </div> <!-- / CODE --> </div> </body> </html>