PanelSwitcher

タブで切り替えするやつ

Peer Dependencies

• jquery@^3.3.1

使い方

window.$ = require('jquery');
require('@hysryt/panel-switcher');

HTML

<!-- PanelSwitcher -->
<div class="panelsw" data-anim="none">

  <!-- PanelSwitcher タブコンテナ -->
  <div class="panelsw_tab-container">
    <div class="panelsw_tab _active">タブ1</div>
    <div class="panelsw_tab">タブ2</div>
  </div>

  <!-- PanelSwitcher パネルコンテナ -->
  <div class="panelsw_panel-container">
    <div class="panelsw_panel _active">パネル1</div>
    <div class="panelsw_panel">パネル2</div>
  </div>

</div>

data-anim

| 属性値 | 説明 | | - | - | | none | アニメーション無し |

フック

switch

パネル切り替え時のフック

$('#panelSwitcher').on('switch', function(event) {
  console.log('prev panel: ' + event.from);
  console.log('next panel: ' + event.to);
});

| 引数 | 説明 | | - | - | | event.from | 切り替え前のパネルのインデックス番号 | | event.to | 切り替え後のパネルのインデックス番号 |