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 插件啟動，或者使用 data api 啟動。

資料 API

將 data-widget="iframe" 新增至 .content-wrapper 來啟用插件。如果您需要提供 onCheck 和 onUncheck 方法，請使用 jQuery API。

jQuery

jQuery API 提供更多可自訂的選項，讓開發人員可以處理檢查和取消勾選待辦事項清單核取方塊事件。

$('.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/Optional。
openTabSidebar 依側邊欄選單項目建立分頁。可用引數：項目 String|jQuery Object、autoOpen Boolean/Optional。
switchTab 依 iframe 分頁導覽列項目切換分頁。可用引數：項目 String|jQuery Object。
removeActiveTab 移除活動的 iframe 分頁。

範例：$('.content-wrapper').IFrame('createTab', '首頁', 'index.html, 'index', true)