AdminLTELogo

IFrame プラグイン

IFrame プラグインは、タブ付けされた IFrame でサイドバーとナビゲーションバーのアイテムを開く機能を提供します。

必要なマークアップ

IFrame を 100% 動作させるには、次の content-wrapper マークアップが必要です

<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
  <div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
    <a class="nav-link bg-danger" href="#" data-widget="iframe-close">Close</a>
    <ul class="navbar-nav" role="tablist"></ul>
  </div>
  <div class="tab-content">
    <div class="tab-empty">
      <h2 class="display-4">No tab selected!</h2>
    </div>
    <div class="tab-loading">
      <div>
        <h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
      </div>
    </div>
  </div>
</div>
既定の IFrame タブでのマークアップ
<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
  <div class="nav navbar navbar-expand navbar-white navbar-light border-bottom p-0">
    <div class="nav-item dropdown">
      <a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Close</a>
      <div class="dropdown-menu mt-0">
        <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">Close All</a>
        <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Close All Other</a>
      </div>
    </div>
    <a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left"></i></a>
    <ul class="navbar-nav overflow-hidden" role="tablist"><li class="nav-item active" role="presentation"><a href="#" class="btn-iframe-close" data-widget="iframe-close" data-type="only-this"><i class="fas fa-times"></i></a><a class="nav-link active" data-toggle="row" id="tab-index-html" href="#panel-index-html" role="tab" aria-controls="panel-index-html" aria-selected="true">Dashboard v1</a></li></ul>
    <a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right"></i></a>
    <a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
  </div>
  <div class="tab-content">
    <div class="tab-empty">
      <h2 class="display-4">No tab selected!</h2>
    </div>
    <div class="tab-loading">
      <div>
        <h2 class="display-4">Tab is loading <i class="fa fa-sync fa-spin"></i></h2>
      </div>
    </div>
    <div class="tab-pane fade" id="panel-index-html" role="tabpanel" aria-labelledby="tab-index-html"><iframe src="./index.html"></iframe></div>
  </div>
</div>
用途

このプラグインは、jQuery プラグインとしてアクティベートするか、データ API を使用してアクティベートできます。

データ API

data-widget="iframe" を .content-wrapper に追加してプラグインをアクティベートします。onCheck メソッドと onUncheck メソッドを提供する必要がある場合は、jQuery API を使用してください。

jQuery

jQuery API は、開発者が Todo リストのチェックボックスイベントのチェックとチェック解除を処理できる、よりカスタマイズ可能なオプションを提供します。

$('.content-wrapper').IFrame({
  onTabClick(item) {
    return item
  },
  onTabChanged(item) {
    return item
  },
  onTabCreated(item) {
    return item
  },
  autoIframeMode: true,
  autoItemActive: true,
  autoShowNewTab: true,
  autoDarkMode: false,
  allowDuplicates: true,
  loadingScreen: 750,
  useNavbarItems: true
})
オプション
名前 タイプ 既定値 説明
onTabClick 関数 匿名関数 タブクリックイベントを処理します。
onTabChanged 関数 匿名関数 タブ変更イベントを処理します。
onTabCreated 関数 匿名関数 タブ生成イベントを処理します。
autoIframeMode ブーリアン true  ページが IFrame を介してロードされている場合に、.iframe-mode を自動的に body に追加するかどうか。
autoItemActive ブーリアン true  アクティブな IFrame に基づいてサイドバーメニューアイテムを自動的にアクティブにするかどうか。
autoShowNewTab ブーリアン true  作成されたタブを自動的に表示するかどうか。
autoDarkMode ブーリアン false IFrame ページでダークモードを自動的に有効にするかどうか。
allowDuplicates ブーリアン true  タブ/IFrame の重複の作成を許可するかどうか。
allowReload ブーリアン true  重複していないタブ/IFrame の再読み込みを許可するかどうか。
loadingScreen ブーリアン/数値 true  [ブーリアン] IFrame の読み込み画面を有効にするかどうか。[数値] 読み込み画面の非表示遷延を設定します。
useNavbarItems ブーリアン true  サイドバーメニューアイテムのみを開くのではなく、ナビゲーションバーメニューアイテムを開くかどうか。
メソッド
メソッド 説明
createTab タイトル、リンク、uniqueName に基づいてタブを作成します。使用可能な引数: タイトル String、リンク String、uniqueName String、autoOpen Boolean/オプション。
openTabSidebar サイドバーメニューアイテムに基づいてタブを作成します。使用可能な引数: アイテム String|jQuery オブジェクト、autoOpen Boolean/オプション。
switchTab IFrame タブナビゲーションバーアイテムに基づいてタブを切り替えます。使用可能な引数: アイテム String|jQuery オブジェクト。
removeActiveTab アクティブな IFrame タブを削除します。

例: $('.content-wrapper').IFrame('createTab', 'ホーム', 'index.html, 'index', true)