cBlog

Tips for you.

脱jQueryその2 サイドバーモジュールのタブ化

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

f:id:cruller:20170716190320p:plain

連載2回目にして気づいてしまったことがあります。前回の記事では脱jQueryと銘打っておきながら根幹の.slideDown()部分はCSS3で実装してしまいました。反jQueryの受け皿は素のJavaScriptではなくCSSだったわけです。JavaScriptにおかれましては先の都議選における民進党と同じような気持ちだったのではないでしょうか。

さて、今回脱jQueryを行うのはタブ化したサイドバーモジュール made by ゆきひーさんです。

www.yukihy.com

またゆきひーさん製カスタムでなんか申し訳ないのですが、それだけゆきひーさんが便利なカスタマイズを作られているということなのでどうかお許し(?)を。cBlogのデザインに多大な貢献をもたらしてくれています。どうもありがとうございます。

CSSに頼った前回とは違い、今回はバリバリ素のJavaScript(ネイティブのJavaScriptっていうらしいですね)です。はい、実質ゆきひーさんのコーディングの翻訳です。恐れ入ります。他にも有用なカスタマイズがたくさん掲載されているので、Yukihy Lifeたくさん見ていってください!!

 

DEMO

デモは右手をご覧ください。

 

カスタマイズ方法

一応説明していますが、一旦上の記事を見てオリジナル版を導入してからの方がわかりやすいと思います。

 

1) タブを作成する

デザイン画面の「サイドバー」項目でタブメニューを作りたいところに「カスタムHTML」モジュールを挿入し、以下のHTMLを記述します。

HTML

<!-- サイドバー タブメニュー -->
<ul class="cb-tab-list">
    <li class="cb-tab cb-tab-active">人気記事</li>
    <li class="cb-tab">はてブ順</li>
    <li class="cb-tab">最新記事</li>
</ul>

li要素がタブとなる(この順番で左から並びます)ので、タブ化したいモジュールの数に合わせてください。増やすことも可能ですが、サイドバーの幅によっては2行になってしまいます。レスポンシブデザインは特に注意で、最低幅のときを考えてみてください。li要素の中身はラベルとなります。cb-tab-activeが付いているのはデフォルトで選択されるタブですが、多くの場合そのままでいいでしょう。

 

2) サイドバーを構成する

タブ化したいモジュールを、1)で作成した「カスタムHTML」モジュールの下に1)で作ったリストの順番通りに並べます。

 

3) JavaScriptを導入する

以下のコードをフッタにコピーし、コメント(/* ~ */)を参考にcbClassにタブ化したいモジュールのクラス名を代入します。

HTML

<!-- サイドバー タブメニュー -->
<script>
var cbList = document.getElementsByClassName('cb-tab-list')[0];
cbList.parentNode.parentNode.style.marginBottom = 0;
/* 下の''内にタブ化するモジュールのclassを","区切りで書く */
var cbClass = '.hatena-module-entries-access-ranking,.hatena-module-recent-entries';
var cbMod = document.querySelectorAll(cbClass);
for (var i=1; i < cbMod.length; i++) {
    cbMod[i].style.display = 'none';
    cbMod[i].getElementsByClassName('hatena-module-title')[0].style.display = 'none';
}
cbMod[0].getElementsByClassName('hatena-module-title')[0].style.display = 'none';

var cbTab = document.getElementsByClassName('cb-tab');
for (var i=0; i < cbTab.length; i++) {
    cbTab[i].onclick = function() {
        for (var i=0; i < cbTab.length; i++) {
            cbTab[i].classList.remove('cb-tab-active');
        }
        this.classList.add('cb-tab-active');
        for (var i=0; i < cbMod.length; i++) {
            cbMod[i].style.display = 'none';
        }
        var ModIdx = cbIndex(this);
        cbMod[ModIdx].style.display = 'block';
    };
}

// elemが何番目の兄弟要素か返す
function cbIndex(elem) {
    var children = elem.parentNode.childNodes;
    var num = 0;
    for (var i=0; i < children.length; i++) {
        if (children[i] == elem) {
            return num;
        }
        if (children[i].nodeType == Node.ELEMENT_NODE) {
            num++;
        }
    }
}
</script>

入力するクラスはこちらの記事の「サイドバーモジュール」節を参考にしてください。

yaritakunai.hatenablog.com

カスタムHTMLで作成したモジュールをタブ化したい場合はオリジナル版記事を参照してください。

技術的にはタブメニューを複数配置することも可能ですが、上記コードでは対応していません。要望が来れば、気が向いたら対応します。

 

4) CSSでデザインする

「デザインCSS」欄に以下を追加します。

CSS

/* サイドバー タブメニュー */
.cb-tab-list {
    font-size: 0;
    padding-left: 0;
    border-bottom: 3px solid #202035;
}
.cb-tab {
    background: #f8f8f8;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    padding: 8px 15px 5px 15px; /* 横に入りきらない場合は2番目と4番目の数字を小さくする */
    margin-right: 4px;
    cursor: pointer;
}
.cb-tab-active {
    color: #fff;
    background: #202035;
}

デザインはお好みで調整してください。

 

カスタマイズはこれで完了です。不具合、ご指摘等あればお願いします。

次回の記事

yaritakunai.hatenablog.com

 

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで