PHP & JavaScript Room :: 設置サンプル

実行結果

Advanced docking using jQuery | 設置サンプル

jQueryを使用して、複数のタブメニューのリストをドッキングして表示する方法が掲載されています。

リストからタブ切替可能なメニューを生成します。 各タブをクリックすると、左サイドにメニューが表示されます。 そのメニューの左上にある［固定］リンクをクリックすると、現在のメニューを固定することができます。 さらに、別のタブをクリックして［固定］リンクをクリックして、というように複数のメニューを縦方向に連結して表示することができます。 ［固定］リンクをクリックした順番とは関係なく、タブの順番にしたがって連結されます。

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.

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.

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.

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.

設置サンプルのソース

<!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>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <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>