プッシュメニュー プラグイン
PushMenu プラグインはメイン サイドバーの切り替えボタンを制御します。
使い方
このプラグインは jQuery プラグインとして有効にするか、データ API を使用して有効にすることができます。
データ API
プラグインを有効にするには、data-widget="pushmenu" をボタンに追加します。
<button class="btn btn-primary" data-widget="pushmenu">Toggle Sidebar</button>
jQuery
$('.sidebar-toggle-btn').PushMenu(options)
オプション
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| autoCollapseSize | ブール値/数値 | FALSE | 自動でサイドバーを折りたたむ画面の幅（ピクセル） |
| enableRemember | ブール値 | FALSE | サイドバーの状態を保持し、ページのリフレッシュ後にも設定します。 |
| noTransitionAfterReload | ブール値 | TRUE | ページリフレッシュ後に遷移を保持します。 |
| animationSpeed | ブール値 | 300 |
scss の遷移速度と等しいアニメーション/遷移速度を設定します。 |
豆知識！
次のようないかなるオプションもデータ属性を介して使用して、768 ピクセルの幅でサイドバーの自動折り畳みを有効にすることができます。
<button class="btn btn-primary" data-widget="pushmenu" data-auto-collapse-size="768">Toggle Sidebar</button>
イベント
| イベントタイプ | 説明 |
|---|---|
| collapsed.lte.pushmenu | サイドバーが折りたたまれたときに発生します。 |
| collapsed-done.lte.pushmenu | サイドバーが完全に折りたたまれたときに発生します。 |
| shown.lte.pushmenu | サイドバーが表示されたときに発生します。 |
例: $(document).on('shown.lte.pushmenu', handleExpandedEvent)
メソッド
| メソッド | 説明 |
|---|---|
| toggle | メニューの状態を展開と折り畳みで切り替えます。 |
| collapse | サイドバーメニューを折りたたみます。 |
| expand | サイドバーメニューを展開します |
例: $('[data-widget="pushmenu"]').PushMenu('toggle')