Open Pages In Bootstrap iFrame Tabs - jQuery bTabs

bTabs is a cross-browser jQuery plugin used to open multiple external/internal pages (as iframes) in dynamic, drag & drop Bootstrap tabs. Supports both Bootstrap 3 and Bootstrap 2 frameworks.

How to use it:

1. Load the necessary jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Load the jQuery UI library for the drag and drop functionality.

<script src="jquery-ui.min.js"></script>

3. Load the jQuery bTabs plugin after jQuery library.

<script src="b.tabs.js"></script>

4. The basic html structure. Insert the page URLs in the funurl attribute as these:

<div class="menuSideBar">
  <div class="menuSideBar">
    <ul class="nav nav-list" id="menuSideBar">
      <li class="nav-header">Nav</li>
      <li class="nav-divider"></li>
      <li mid="tab1" funurl="https://www.jqueryscript.net"><a tabindex="-1" href="javascript:void(0);">jQueryScript</a></li>
      <li mid="tab2" funurl="https://www.google.com"><a tabindex="-1" href="javascript:void(0);">Google</a></li>
      <li mid="tab3" funurl="local.html"><a tabindex="-1" href="javascript:void(0);">Local</a></li>
      ...
    </ul>
  </div>
</div>

<div id="mainFrameTabs">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active noclose noSort"><a href="#bTabs_navTabsMainPage" data-toggle="tab">Home</a></li>
  </ul>
  
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="bTabs_navTabsMainPage">
      <div class="page-header">
        <h2 style="font-size: 31.5px;text-align: center;font-weight: normal;">Welcome</h2>
      </div>
      <div style="text-align: center;font-size: 20px;line-height: 20px;">
      Welcome to use bTabs plugin!
      </div>
    </div>
  </div>

</div>

5. The JavaScript.

$(function(){

  // calc container height
  var calcHeight = function(){
    $('#mainFrameTabs').height(400);
  };

  // handle click event
  $('a',$('#menuSideBar')).on('click', function(e) {
    e.stopPropagation();
    var li = $(this).closest('li');
    var menuId = $(li).attr('mid');
    var url = $(li).attr('funurl');
    var title = $(this).text();
    $('#mainFrameTabs').bTabsAdd(menuId,title,url);
  });
  
  // init
  $('#mainFrameTabs').bTabs({
    resize : calcHeight
  });
  
});

6. All default configuration options.

$('#mainFrameTabs').bTabs({

  /**
   * url to direct
   */
  'loginUrl' : '/',

  /**
   * custom class
   */
  'className' : undefined,

  /**
   * enable drag and drop
   * requires jQuery UI
   */
  'sortable' : true,

  /**
   * callback on resize
   */
  'resize' : undefined

});

---

This awesome jQuery plugin is developed by TerryZ. For more Advanced Usages, please check the demo page or visit the official website.