BulmaJavaScript

Bulmaでよく使うJavaScriptコード

概要

CSSフレームワークBulmaにはjsファイルは付属しません。なので、幾つかの処理は自分でJavaScriptを書く必要があります。

良く使うものを今回紹介していきます。コードはあくまで一例です。

このブログの記事全般そうですが、ES2015の構文を使っているので、必要ならばES2015より前のコードなりトランスコンパイラなりを利用してください。

ナビゲーションの開閉

ナビゲーションの開閉

次のコードは非常に簡略化していますが、ナビゲーションバーです。

<nav class="navbar is-black">
    <div class="navbar-brand">
        <a class="navbar-item" href="#">NARITO BLOG</a>
        <a class="navbar-burger" data-target="my-menu">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div id="my-menu" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="#">TOP</a>
            <a class="navbar-item" href="#">お問い合わせ</a>
        </div>
    </div>
</nav>

4行目<a class="navbar-burger" data-target="my-menu">と、10行目<div id="my-menu" class="navbar-menu">がポイントです。data-target属性に、メニュー部分のidの値を入れておきます。

これを開閉するJavaScriptコードは次のようになります。

// ナビバーの開閉を設定
for (const burder of document.getElementsByClassName('navbar-burger')) {
    const menuId = burder.dataset.target;
    const menu = document.getElementById(menuId);
    burder.addEventListener('click', e => {
        burder.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    });
}

Bulmaでは、class属性にis-activeを追加することで見えないものが見えるようになったり、有効化されることが多いです。burder.classList.toggle('is-active');は×印に変化させ、menu.classList.toggle('is-active');はメニュー部分が見えるようになります。

Notificationの非表示

Notificationに閉じるボタンがついているやつですね。
Notificationの非表示

<div class="notification is-primary">
    <button class="delete" type="button"></button>
    サイトメンテナンス中です。
</div>

// notification を×で閉じれるように
for (const element of document.querySelectorAll('.notification > .delete')) {
    element.addEventListener('click', e => {
        e.target.parentNode.classList.add('is-hidden');
    });
}

data-target属性は今回使わず、閉じるボタンから見て親要素である<div class="notification is-primary">...にis-hiddenを足すことで非表示にしています。

Messageの非表示

Notificationに似たMessageの例です。
Messageの非表示

<div class="message">
    <div class="message-header">
        <p>お知らせ</p>
        <button class="delete" aria-label="delete"></button>
    </div>
    <div class="message-body">
        メンテナンスなう
    </div>
</div>
for (const element of document.querySelectorAll('.message  .delete')) {
    element.addEventListener('click', e => {
        e.target.parentNode.parentNode.classList.add('is-hidden');
    });
}

Notificationとほとんど同じで、今度は閉じるボタンから見て親の親にis-hiddenを追加して非表示にしています。

Modalの表示と非表示

モーダルを表示するためのボタンと、モーダル部分のHTMLです。

<button type="button" class="button show-modal" data-target="my-modal">モーダル表示</button>

<div class="modal" id="my-modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">確認</p>
            <button class="delete" aria-label="close" data-target="my-modal"></button>
        </header>
        <section class="modal-card-body">
            本当に削除してよろしいですか。
        </section>
        <footer class="modal-card-foot">
            <button type="button" class="button is-danger">はい</button>
        </footer>
    </div>
</div>

やり方は色々あるように思いますが、今回はモーダル表示ボタンのclass属性にshow-modalとつけておき、data-targetにモーダルのidを入れておきます。 また、モーダル内のクローズなボタンにもdata-targetにモーダルのidを入れています。

.show-modal、又は.modal内の.deleteがクリックされたらdata-targetから対象のidを取得し、classList.toggleでis-activeをつけたり消したりします。

for (const element of document.querySelectorAll('.modal .delete, .show-modal')) {
    element.addEventListener('click', e => {
        const modalId = element.dataset.target;
        const modal = document.getElementById(modalId);
        modal.classList.toggle('is-active');
    });
}