BBnepal-Accounts/account/theme/pages/docs/javascript/iframe.md
Sampanna Rimal 9cd05ef3cb commitall
2024-07-10 18:28:19 +05:45

5.2 KiB

layout title
page IFrame Plugin

The iframe plugin provides the functionality to open sidebar & navbar items in a tabbed iframe.

Required Markup

To get the iframe 100% working you need the following content-wrapper markup:

<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>
Markup with Default IFrame Tab
<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>
Usage

This plugin can be activated as a jQuery plugin or using the data api.

Data API

{: .text-bold } Activate the plugin by adding data-widget="iframe" to the .content-wrapper. If you need to provide onCheck and onUncheck methods, please use the jQuery API.

jQuery

{: .text-bold } The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.

$('.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
})
Options

{: .mt-4}

|---

Name Type Default Description
onTabClick Function Anonymous Function Handle tab click event.
onTabChanged Function Anonymous Function Handle tab changed event.
onTabCreated Function Anonymous Function Handle tab created event.
autoIframeMode Boolean true  Whether to automatically add .iframe-mode to body if page is loaded via iframe.
autoItemActive Boolean true  Whether to automatically set the sidebar menu item active based on the active iframe.
autoShowNewTab Boolean true  Whether to automatically display created tab.
autoDarkMode Boolean false Whether to automatically enable dark-mode in iframe pages.
allowDuplicates Boolean true  Whether to allow creation of duplicate tab/iframe.
allowReload Boolean true  Whether to allow reload non duplicate tab/iframes.
loadingScreen Boolean/Number true  [Boolean] Whether to enable iframe loading screen; [Number] Set loading screen hide delay.
useNavbarItems Boolean true  Whether to open navbar menu items, instead of open only sidebar menu items.
---
{: .table .table-bordered .bg-light}
Methods

{: .mt-4}

|---

Method Description
createTab Create tab by title, link & uniqueName. Available arguments: title String, link String, uniqueName String, autoOpen Boolean/Optional.
openTabSidebar Create tab by sidebar menu item. Available arguments: item `String
switchTab Switch tab by iframe tab navbar item. Available arguments: item `String
removeActiveTab Remove active iframe tab.
{: .table .table-bordered .bg-light}

Example: $('.content-wrapper').IFrame('createTab', 'Home', 'index.html, 'index', true)