Search
  1. Advanced docking using jQuery〔複数のリストをドッキングして表示できるタブ切替メニュー〕
  2. Create A Tabbed Interface Using jQuery〔シンプルなタブ〕
  3. jQuery Tab〔コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法 〕
  4. jQuery Tabbed Side Menu from Queness WebBlog〔スライドアップ・ダウン効果で切り替わるタブ型スライドメニュー〕
  5. jQuery Tabs〔シンプルなタブ〕
  6. jQuery: Ein Tab-Plugin selber schreiben〔ナビゲーションを自動生成するタブ〕
  7. simplyTabs〔タブで画像切替〕
  8. zudolab jqTabContents〔タブ部分をテキストまたは画像で指定可能なタブ〕

Advanced docking using jQuery
複数のリストをドッキングして表示できるタブ切替メニュー

2009/6/6

Advanced docking using jQuery

jquery.js

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.js、jquery-ui-personalized-1.5.2.packed.js

jQueryを使用してタブで切り替えるコンテンツを作成するjQueryプラグイン。

コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット、リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツの2つのサンプルが掲載されています。

設置イメージ:コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット設置イメージ:コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット
設置イメージ:リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツ設置イメージ:リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツ
Create A Tabbed Interface Using 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>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.js

jQueryを使用して、コンテンツ量に応じてコンテンツの高さが可変なタブ切替コンテンツを作成する方法が掲載されています。 タブ切替時にコンテンツの内容がスライドアニメーション表示されます。

設置イメージ設置イメージ
Fly 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>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 Tabbed Side Menu from Queness WebBlog
スライドアップ・ダウン効果で切り替わるタブ型スライドメニュー

2009/3/28

jQuery Tabbed Side Menu from Queness WebBlog

jquery.js

jQueryを使用して、スライドアップ・ダウン効果で切り替わるタブ型スライドメニューを作成する方法が掲載されています。

コメントが充実しているので、タブ型スライドメニューを作る手順がわかりやすいです。 イベントや、各タブごとにアニメーション効果を付ける場合の手法などが参考になります。

設置イメージ設置イメージ
jQuery Tabbed Side Menu from Queness WebBlogの設置サンプルサンプルを見る
<!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 Tabbed Side Menu from Queness WebBlog | 設置サンプル</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(){
                /* ID名がtabMenuのul要素内にあるすべてのli要素を取得 */
                $('#tabMenu > li').click(function(){
                    /* すべてのli要素からselectedクラスを削除 */
                    $('#tabMenu > li').removeClass('selected');
                    /* 現在のli要素にselectedクラスを追加 */
                    $(this).addClass('selected');
                    /* boxBodyクラス内のすべてのdiv要素を非表示にする */
                    $('.boxBody div').slideUp('1500');
                    /* ナビゲーションのul要素のインデックスに従って、boxBody内で右のdiv要素を探す */
                    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
                }).mouseover(function() {
                    /* クラスの追加・削除 */
                    $(this).addClass('mouseover');
                    $(this).removeClass('mouseout');
                }).mouseout(function() {
                    /* クラスの追加・削除 */
                    $(this).addClass('mouseout');
                    $(this).removeClass('mouseover');
                });
                /* bookmarkのli要素の場合は、マウスオーバー時にアニメーション効果を付ける */
                $('.boxBody #bookmark li').click(function(){
                        //Get the Anchor tag href under the LI
                        window.location = $(this).find("a").attr("href");
                    }).mouseover(function() {
                        //Change background color and animate the padding
                        $(this).css('backgroundColor','#888');
                        $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
                    }).mouseout(function() {
                        //Change background color and animate the padding
                        $(this).css('backgroundColor','');
                        $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
                }); 
                /* li要素にマウスオーバー効果を付ける */
                $('.boxBody li').click(function(){
                    window.location = $(this).find("a").attr("href");
                    }).mouseover(function() {
                        $(this).css('backgroundColor','#888');
                    }).mouseout(function() {
                        $(this).css('backgroundColor','');
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            body { color:#ccc; background-color:#555;}
            a { color:#ccc;text-decoration:none;}
            a:hover { color:#ccc;text-decoration:none}
            /* tab */
            #tabMenu { margin:0;padding:0 0 0 15px; list-style:none; overflow:hidden; }
            #tabMenu li { float:left; display:block; height:32px; width:39px; cursor:pointer,hand; list-style:none; margin:0; padding:0; }
            li.posts { background:url(/content/img/ajax/tabmenu/tabHeart.gif) no-repeat 0 -32px; }
            li.bookmark { background:url(/content/img/ajax/tabmenu/tabStar.gif) no-repeat 0 -32px; }
            li.email { background:url(/content/img/ajax/tabmenu/tabComment.gif) no-repeat 0 -32px; }
            li.mouseover { background-position:0 0; }
            li.mouseout { background-position:0 -32px; }
            li.selected { background-position:0 0; }
            /* box */
            .box { width:227px; }
            .boxTop {  background:url(/content/img/ajax/tabmenu/boxTop.gif) no-repeat; height:11px; clear:both; }
            *html .boxTop {margin-bottom:-2px;}
            .boxBody {background-color:#282828;}
            .boxBottom {background:url(/content/img/ajax/tabmenu/boxBottom.gif) no-repeat;height:11px;}
            .boxBody div { display:none;}
            .boxBody div.show { display:block;}
            .boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(/content/img/ajax/tabmenu/arrow.gif); overflow:hidden; }
            *html .boxBody div ul { margin-left:10px;padding-left:15px;}
            .boxBody div li { border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
            .boxBody div ul li.last { border-bottom:none}
            .boxBody div li span { font-size:8px;font-style:italic; color:#888;}
            .boxBody div p { margin:0 10px 0 25px; padding:5px 0; width:190px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial'>jQuery Tabbed Side Menu from Queness WebBlog</a> | 設置サンプル</h1>
            <p>▼スライドアップ・ダウン効果で切り替えるタブ型スライドメニューです。</p>
<!-- CODE -->
            <div class="box">
                <ul id="tabMenu">
                    <li class="posts selected"></li>
                    <li class="bookmark"></li>
                    <li class="email"></li>
                </ul>
                <div class="boxTop"></div>
                <div class="boxBody">
                    <div id="posts" class="show">
                        <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">
                        <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">
                        <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 class="boxBottom"></div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Tabs
シンプルなタブ

2009/3/14

jQuery Tabs

jquery.js

jQueryを使用してタブで切り替えるコンテンツを作成する方法が2つ掲載されています。

タブナビゲーションはリスト要素+a要素でマークアップし、a要素のhref属性に<li><a href='#first'>のようにハッシュを指定します。

1つ目の例では、すべてのタブコンテンツを非表示にしておき、クリックしたa要素のハッシュを取得して、そのハッシュをIDを持つ要素だけを表示します。

2つ目の例では、タブナビゲーションの数だけ、現在のウィンドウとa要素のハッシュをそれぞれ配列に格納しておき、クリックしたa要素のハッシュを取得して、そのハッシュのIDを持つ要素だけを表示します。

例1の方がスマートな実装な気がします。

設置イメージ設置イメージ
jQuery 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>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.js

jQueryを使用してタブを作成する方法が掲載されています。 ナビゲーション部分はコンテンツ内の特定の要素(例えばh3要素)の内容を取得して自動的に生成しています。

設置イメージ設置イメージ
Fly 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>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

[JS]jquery.js、jquery.simplytabs.js v1.0.0-rc1
[CSS]jquery.simplytabs.css

ページ内のアンカーリストから、タブ切替コンテンツを作成するjQueryプラグイン。

アンカーの対象となる要素が存在しない場合、その特定のタブは作成されません。 ナビゲーションやコンテンツのクラス名はオプションで変更することができます。

設置イメージ設置イメージ
Simply 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>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 &hearts; avocado</li>
                    </ul>
                </div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

zudolab jqTabContents
タブ部分をテキストまたは画像で指定可能なタブ

2009/3/14

zudolab jqTabContents

jquery.js、jqTabContents.js

タブ部分をテキストまたは画像で指定可能なタブ切替コンテンツを作成するjQueryプラグイン。

設置イメージ設置イメージ
zudolab jqTabContentsの設置サンプルサンプルを見る
<!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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women