jQuery 2015-01-06

CSS3とjQueryでシンプルなタブパネルを作成

tab-panel

今回は、CSS3とjQueryでシンプルなタブパネルの作成のご紹介です。
デザインや構造もとてもシンプルなので、様々な場面で利用できるタブパネルではないかと思います。
スマートフォンの表示でスペースの節約としても利用できると思います。

デモサイトもありますので、ご参考頂ければと思います。

デモサイト

タブパネル実装方法

実装方法は、さくっと簡単に出来ると思います。

jQuery本体の読み込み

まずは、head要素内に必要ファイルのjQuery本体を読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
</head>

HTML

次にタブパネルのHTMLの記述をしていきます。
下記HTMLコードをタブパネルを実装したい場所に貼り付けて下さい。

<ul id= "tabs" > 
    <li><a href= "#"  name= "#tab1" >タブ【1】</a></li> 
    <li><a href= "#"  name= "#tab2" >タブ【2】</a></li> 
    <li><a href= "#"  name= "#tab3" >タブ【3】</a></li> 
    <li><a href= "#"  name= "#tab4" >タブ【4】</a></li>     
</ul>

<div id= "tab-content" >  
    <div id= "tab1" > ... </div> 
    <div id= "tab2" > ... </div> 
    <div id= "tab3" > ... </div> 
    <div id= "tab4" > ... </div> 
</div>

CSS

次に上記のHTMLにCSSでスタイルをかけていきます。

/*---------------------------------------------------------
tabpanel
---------------------------------------------------------*/
#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
}

#tabs a {
  float: left;
  position: relative;
  padding: 0 40px;
  height: 0; 
  line-height: 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
  border-bottom-color: #777\9;
  opacity: 0.3;
  filter: alpha(opacity=30);    
}

#tabs a:hover,
#tabs a:focus {
  border-bottom-color: #2ac7e1;
  opacity: 1;
  filter: alpha(opacity=100);
}

#tabs a:focus {
  outline: 0;
}

#tabs #current {
  z-index: 3;
  border-bottom-color: #2ac7e1;
  opacity: 1;
  filter: alpha(opacity=100);   
}
#tabs a {
  height: 0; 
  line-height: 2.3;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;    
}
#tab-content{
	border-top:2px #3d3d3d solid;
	padding:20px;
	background:#f0f0f0;
	}

jQuery

最後にjQueryを記述していきます。

<script>
function resetTabs(){
    $("#tab-content > div").hide(); 
    $("#tabs a").attr("id","");      
}

var myUrl = window.location.href; 
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0,4);

(function(){
    $("#tab-content > div").hide();
    $("#tabs li:first a").attr("id","current");
    $("#tab-content > div:first").fadeIn();
    
    $("#tabs a").on("click",function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "current"){
         return       
        }
        else{             
        resetTabs();
        $(this).attr("id","current"); 
        $($(this).attr('name')).fadeIn(); 
        }
    });

    for (i = 1; i <= $("#tabs li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
          resetTabs();
          $("a[name='"+myUrlTab+"']").attr("id","current"); 
          $(myUrlTab).fadeIn();      
      }
    }
})()
</script>

上記までを記述すれば、CSS3とjQueryで作るシンプルなタブパネルの完成となります。
今回のタブパネルは、レスポンシブには対応しておりません。
時間ができたら、レスポンシブも更新したいと思います。

デモサイト

参考サイト : Google Play’s minimal tabs with CSS3 & jQuery

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS wordpress-next-thumbnail

WordPressで次の記事や前の記事のアイキャッチも表示する

NEXT stealth-login-page

WP 不正アクセス防止 ログイン画面にパスワードを追加 Stealth Login Page