WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)jQueryでスマホでも実装可能なサイズ可変型タブパネルを作成

sp_tab_top

スマホは少ない領域で必要な情報を表示させるため、ファーストビューに何を持ってくるか悩みます。仮に「新着情報」と「STAFブログ」を同じレベルで表示したい場合はドキュメントを切り替えて表示する「タブ」機能を使うのが有効的です。

PCではさんざん使用してきましたが、スマホサイトの作成の際にスマホ対応のタブ機能をJQueryで作成したので備忘録としてまとめておきます。

HTMLマークアップ

ポイントとしては「タブ(ボタン)」と「パネル(内容)」を別のul要素とtab要素で囲うことです。「タブ(ボタン)」のhrefの飛び先の「#◯◯◯」と「パネル(内容)」のli要素のidは同じにします。初期状態で表示させたいパネルはselectedのclass名をつけておきます。

<body>
<div id="contents">
     <ul class="tab">
          <li><a href="#tab1" class="selected">タブ01</a></li>
          <li><a href="#tab2">タブ02</a></li>
          <li><a href="#tab3">タブ03</a></li>
     </ul>
     <ul class="panel">
          <li id="tab1">タブ01の内容タブ01の内容・・・</li>
          <li id="tab2">タブ02の内容タブ02の内容・・・</li>
          <li id="tab3">タブ03の内容タブ03の内容・・・</li>
     </ul>
</div><!-- /#contents -->
</body>

CSSでコーディング

3つ並んだタブを設置してみます。ボタンの幅は「px」ではなく「%」なので、ここの値を変えればボタンを増やすことも可能です。bodyのプロパティ値はスマホのための設定です。

body{
     width:100%;
     min-width: 320px;
     margin: 0;
     padding:0;
}

a{
     text-decoration: none;
}

li{
     list-style: none;
}

li a{
     display: block;
     text-align: center;
     color: #b4b4b4;
}

#contents{
     padding:10% 1%;
}

ul.tab{
     padding:0;
}

ul.tab li{
     float: left;
     border-top: 1px solid #000;
     border-left: 1px solid #000;
     border-right: 1px solid #000;
     width:30%;
     margin-left:2%;
     line-height: 250%;
}

ul.tab li a.selected{
     background-color: #FFF;
     color:#000;
}


ul.panel{
     clear:both;
     padding:3% 2%;
     border: 1px solid #000;
     position: relative;
     top:-1px;
     z-index: -1;
}

タブを動かすためのスクリプトを書く

まずは、本チャンのjQueryを読み込んでその下にタブ切り替え用のスクリプトを以下のように記述します。

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript">
     $(function(){
          $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide();
          $("ul.tab li a").click(function(){
          $("ul.tab li a.selected").removeClass("selected");
          $(this).addClass("selected");
          $("ul.panel li").hide();
          $($(this).attr("href")).show();
          return false;
     });
     });
     </script>

通常の切り替えならコレでOKですが、フワッと切り替えるなら下から2行目の「.show」を「.fadeIn」に変えるとアニメーション効果も実現できます。

気を使ったポイント

パネル部分のul要素にboaderを設けているので、通常なら下の画像のように選択中のタブも線が引かれてしまうので、どこを選択しているか、若干認識しずらいので、「ul.panel」に以下の記述を入れています。

sp_tab_01


     position: relative;
     top:-1px;
     z-index: -1;

コレで上の線を強制的に見えなくしています。選択中のタブをベタ塗りで変えてしまえば必要ないかもしれませんが、シンプルなタブならこの辺の微調整は必要かと・・・。

※ブラウザのウインドウ幅を縮めるか、スマホで見て下さい。

DEMO

まとめ

タブ機能の参考サイトはたくさんあるのですが、自分の欲しい機能をまとめていって、一番シンプルな感じでいくとこんな感じにまとまりました。

jQueryのスクリプトの理解をもっと含めて柔軟な対応をドンドンマスターしていきたいトコです。今回は以上ですm(_ _)m

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ