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

通过向 .content-wrapper 添加 data-widget="iframe" 来激活插件。如果您需要提供 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 按标题、链接和唯一名称创建标签。可用的参数：标题 字符串，链接 字符串，唯一名称 字符串，自动打开 布尔值/可选。
openTabSidebar 按侧边栏菜单项创建标签。可用的参数：项目 字符串|jQuery 对象，自动打开 布尔值/可选。
switchTab 按 iframe 标签页导航栏项切换标签页。可用的参数：项目 字符串|jQuery 对象。
removeActiveTab 移除活动的 iframe 标签页。

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