タブ表示

こんにちは、エムケーワイです。

投稿ページ作成の際、画像のファイルサイズをより小さくするために使っているEWWW Image Optimizerの設定画面は、下図のように設定項目がタブで分けられています。

タブはどのように構成され、表示の切り替えはどのように行われているのか、ブラウザの開発ツールで確認して見様見真似で自作してみました。

1. 自作結果
2. 開発ツールでの確認
3. タブ表示の自作

1. 自作結果

時間のない方のためにまず自作の結果を見ていただきます。

自作タブはこんな感じになりました。

デザインはイマイチかもしれませんが、とりあえずタブクリックで表示を切り替えることが出来ました。

各タブのコンテンツの高さがバラバラなので、表示を切り替える度に後ろのコンテンツの表示位置が変わりますね。各コンテンツの高さは揃えた方がいいんですかね？

では、今回も備忘録を残します。時間のある方はお読みください。

2. 開発ツールでの確認

ブラウザの開発ツールでEWWW Image Optimizer設定画面のタブの構成と表示切替時の挙動を確認した結果、下記のことが分かりました。

2-1. タブ部分の構成

• タブ部分はリスト(ul要素)で実現されている。
• 全てのli要素に共通のクラスと、個別のクラスが設定されている。
• 選択されているli要素には、”ewww-selected”というクラスが付加されている。

2-2. 表示コンテンツの構成・挙動

• 各表示コンテンツは全体がdiv要素で囲まれている。
• 各div要素にはidが割り当てられている。
• 各div要素にはインラインでdisplayプロパティが付加されている。
• displayプロパティの値は、タブのクリックに連動して変化する。コンテンツが表示されているdiv要素は”block”、コンテンツが非表示のdiv要素は”none”。
• li要素の個別クラスと、div要素のidは1対1で共通の文字列を含んでおり、それを使ってli要素とdiv要素を紐づけていると推測。

3. タブ表示の自作

2.で分かったことを基にタブ表示を自作していきます。

タブの数はとりあえず3つにします。

3-1. タブ部分の作成

EWWW Image Optimizer設定画面ではタブ部分がリストで構成されています。タブと表示コンテンツの紐づけは、li要素の個別クラスと、表示コンテンツのdiv要素のidに共通の文字列を持たせるというちょっとトリッキーな？方式です。

しかし、リンク(a要素)だと”href”にdiv要素のidをそのまま設定できるので、よりシンプルに紐づけできると考え、下記のようなHTMLコードを作成しました。

<div class="mkyTabList">
    <a href="#mkyTabContent1">タブ1</a>
    <a href="#mkyTabContent2">タブ2</a>
    <a href="#mkyTabContent3">タブ3</a>
</div>

3-2. 表示コンテンツの作成

表示コンテンツは、EWWW Image Optimizer設定画面と同じようにdiv要素で囲みます。

各div要素にはidと、スタイルを設定するための共通クラスを設定します。

下記のようなHTMLコードを作成しました。

<div id="mkyTabContent1" class="mkyTabContent">

<!-- タブ1の表示コンテンツ -->

</div><!-- #mkyTabContent1 -->
<div id="mkyTabContent2" class="mkyTabContent">

<!-- タブ3の表示コンテンツ -->

</div><!-- #mkyTabContent2 -->
<div id="mkyTabContent3" class="mkyTabContent">

<!-- タブ3の表示コンテンツ -->

</div><!-- #mkyTabContent3 -->

3-3. CSS設定

＜タブ部分向けの設定＞

.mkyTabList a {
    display: inline-block;
    margin: 5px 5px 0;
    padding: 5px 10px;
    border-width: 2px 2px 0;
    border-style: solid;
    border-color: black;
    border-radius: 5px 5px 0 0;
    position: relative;
    background-color: darkgray;
    z-index: 0;
}

.mkyTabList a.selected {
    background-color: white;
    z-index: 10;
}

• タブを横並びで表示するためにdisplayに”inline-block”を指定します。
• 選択されているタブの下にdivブロックの枠線が表示されないよう、下マージンを0にしています。
• 上と左右に幅2pxの枠線を引きます。左上と右上の角を丸めます。
• z-indexを指定できるようpositionに”relative”を指定します。
• z-indexはタブの非選択時は0、タブ選択時は10です。
• 背景色はタブの非選択時は”darkgray”、タブ選択時は”white”です。

＜表示コンテンツ向けの設定＞

.mkyTabContent {
    margin-top: -1.6px;
    margin-bottom: 20px;
    padding: 15px 20px;
    border: 2px solid black;
    display: none;
    position: relative;
    background-color: white;
    z-index: 5;
}

• 選択されているタブの下にdivブロックの枠線が表示されないよう、上マージンを-1.6pxにしています。線幅は2pxですが、上マージンを-2pxにすると、タブの縦枠線がわずかにdivブロックの領域に突き抜けてしまいます。
• 幅2pxの枠線を引きます。
• z-indexを指定できるようpositionに”relative”を指定します。
• z-indexの値は5で、選択されていないタブの上位、選択されているタブの下位に表示されます。
• 背景色は選択されているタブと同じ”white”です。

3-4. jQuery作成

jQuery(function(){
    var _tabList = jQuery('.mkyTabList a'),
    	_tabContent = jQuery('.mkyTabContent');
	
    _tabList.on('click', function() {
        _tabList.each(function() {
            jQuery(this).removeClass('selected');
    	});
    	jQuery(this).addClass('selected');
    	jQuery(this).focus();
    	var targetId = jQuery(this).attr('href').substr(1);
    	_tabContent.each(function() {
  	    if (jQuery(this).attr('id') == targetId) {
    		jQuery(this).css('display', 'block');
    	    } else {
    		jQuery(this).css('display', 'none');
    	    }
    	});
       	return false;
    });
    
    _tabList[0].click();
});

1. いずれかのタブがクリックされると、一旦全タブからクラス”selected”を削除し、選択されたタブにクラス”selected”を付加します。
2. クリックされたタブを”focus”状態にします。これは、ページのロード直後にタブ1を”focus”状態にするための処理です。
3. 変数targetIdに選択されたタブ(a要素)の”href”の値を代入します。先頭の”#”は除去します。
4. 各div要素のidがtargetIdと等しい場合、displayに”block”を設定し、そうでない場合displayに”none”を設定します。
5. aタグでの移動が行われないよう”return false”とします。
6. 初期状態でタブ1を選択状態にします。

以上、EWWW Image Optimizerの管理画面を参考にタブ表示を自作してみました。

タブの数が増えてもCSS設定やjQueryコードはそのまま使えそうです。

最後までお読みいただきありがとうございました。