jQueryおよびその他の依存関係のないes6 / es2015のタブモジュール

まえがき

少し前に、私はjQueryを徐々に放棄して、ネイティブjavascriptを支持し始めました。 これは、古いブラウザのサポートが優先事項でなくなり、ページの読み込み速度が最初になったためです。 シンプルなhtmlマークアップを備えたミニマルなタブモジュールを見つけることができなかったので、自分で記述することにしました。



デモ 、 Githubのソースコード

HTMLマークアップ

<div class="tabs"> <div class="tabs__toggle tabs__toggle_active"> 1</div> <div class="tabs__toggle"> 2</div> <div class="tabs__tab">    </div> <div class="tabs__tab">    </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1つのページに複数のタブグループを配置する必要がある場合は、それらを異なる「.tabs」ブロックに分割するだけです。 室内ユニットの位置は、それらが出力される順序にのみ影響します。 デフォルトのタブは、クラス「tabs__toggle_active」を追加する必要があります。

ブックマーククラス

 class Tab { constructor (tabs, toggle, tab) { this.tabs = tabs; this.toggle = toggle; this.tab = tab; this.init(); } init () { if (this.toggle.classList.contains('tabs__toggle_active')) { this.open(); } else { this.close(); } this.toggle.addEventListener('click', () => { this.open(); }); } open () { if (this.tabs.active === this) { // already open return; } if (this.tabs.active) { this.tabs.active.close(); } this.tabs.active = this; this.tab.style.display = 'block'; this.toggle.classList.add('tabs__toggle_active'); } close () { this.tab.style.display = 'none'; this.toggle.classList.remove('tabs__toggle_active'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンストラクターは、タブグループの親クラス、タブが開くボタンのDOM要素、およびこのボタンが属するタブのDOMを受け入れます。



init関数は、このタブがデフォルトで開いているかどうかを確認し、クリックオープンイベントを追加します。



open関数は、開いているタブがあればそれを閉じ、クラスの独自のインスタンスへのリンクを親クラスの「アクティブ」プロパティに設定します。 また、ボタンとタブの「表示」プロパティのスタイルを設定するためのアクティブクラスを付加します。



close関数は、アクティブなクラスをボタンから削除し、タブを非表示にします。

タブグループクラス

 export class Tabs { constructor (container) { this.container = container; this.init(); } init () { this.toggles = this.container.querySelectorAll('.tabs__toggle'); this.tabs = this.container.querySelectorAll('.tabs__tab'); if (!this.isEverythingOk()) { return; } for (let index = 0; index < this.toggles.length; index++) { new Tab (this, this.toggles[index], this.tabs[index]); } } isEverythingOk () { if (this.toggles.length !== this.tabs.length) { console.warn('Tabs toggles and tabs amounts are not matching'); return false; } else if (this.toggles.length === 0) { console.warn('There\'s no toggles for tabs'); return false; } else if (this.tabs.length === 0) { console.warn('There\'s no content tabs'); return false; } return true; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンストラクターは、タブグループ（この場合は.tabs）のDOMオブジェクトを受け取ります。



init関数はすべてのボタンをループし、「最初のボタンから最初のタブへ」の原則に従ってグループ化することにより、Tabクラスのインスタンスを作成します。



isEverythingOk関数は、タブの数がボタンの数とその存在と一致するかどうかをチェックします;そうでない場合、より便利なトラブルシューティングのためにコンソールに警告をスローします。

初期化関数

 export default function initTabs(selector) { for (let container of document.querySelectorAll(selector)) { new Tabs(container); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は、DOMの操作の原則に対処したくない人、または単に便宜上の人を対象としています。 Tabsクラスのインスタンスを作成します。

初期化関数を使用した例

 import initTabs from 'future-tabs'; initTabs('.tabs');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスを直接操作する例

 import {Tabs} from 'future-tabs'; const container = document.querySelector('.tabs'); const tabs = new Tabs(container);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

計画では、セレクターに応じて室内ユニットを選択し、_bem方法論に従って要素の名前を追加します。



Github



ご清聴ありがとうございました！



PS _bemによるブロック名のオプションを作成しました。 githubのドキュメントの詳細。