jQuery Tab插件用于在Tab中显示iframe

简介

jQuery Tab插件是一个轻量级的jQuery插件，用于创建带有选项卡切换效果的网页界面，支持通过iframe方式展示内容，非常适合制作具有多种功能的网站。该插件使用方便、易于应用，在开发实际项目中广泛应用。该插件的源码可以在Github上获得。

安装步骤

1.引入依赖文件

在HTML中需要引入如下依赖文件

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

2.创建选项卡容器

在HTML中创建一个容器用来包裹选项卡元素

<div class="tab-container">
  <ul class="tab">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1">Tab 1 Content</div>
    <div id="tab-2">Tab 2 Content</div>
    <div id="tab-3">Tab 3 Content</div>
  </div>
</div>

3.调用插件

在jQuery中使用tab()方法来调用插件。

$('.tab-container').tab();

以上三步即可完成jQuery Tab插件的安装和启用。接下来我们将介绍插件的额外功能和选项。

选项和功能

选项一：iframe

使用iframe选项可以将内容以IFrame的方式在TAB中展示，非常适合需要展示外站链接的场景。下面我们以一个在线博客为例子演示如何以IFrame方式展示内容：

<div class="tab-container">
  <ul class="tab">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3" data-tab-remote="https://example.com/">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1">Tab 1 Content</div>
    <div id="tab-2">Tab 2 Content</div>
    <div id="tab-3" data-tab-remote="https://example.com/">Loading content ...</div>
  </div>
</div>

可以看到，在Tab 3中我们在a标签中添加了data-tab-remote="https://example.com/"属性，告诉插件需要以IFrame的方式加载该Tab的内容。

在启用插件时需要添加iframe选项：

$('.tab-container').tab({
  iframe: true
});

选项二：远程脚本

在一些不能直接访问的域外面的地方，比如公司内部域网或本地环境，我们经常需要引用一些远程的JS脚本。jQuery Tab插件也支持以远程脚本的方式加载TAB内容。

以引用百度地图API为例，实现如下：

<div class="tab-container">
  <ul class="tab">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3" data-tab-script="https://api.map.baidu.com/api?v=2.0&ak=123">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1">Tab 1 Content</div>
    <div id="tab-2">Tab 2 Content</div>
    <div id="tab-3" data-tab-script="https://api.map.baidu.com/api?v=2.0&ak=123">Loading content ...</div>
  </div>
</div>

可以看到，在Tab 3中我们在a标签中添加了data-tab-script="https://api.map.baidu.com/api?v=2.0&ak=123"属性，告诉插件需要以JavaScript文件的方式加载该Tab的内容。

在启用插件时需要添加remoteScript选项：

$('.tab-container').tab({
  remoteScript: true
});

源码解析

源码解析请参考Github中的README.md文件。

示例演示

示例一：Tab切换+iframe模式

在以下代码中，我们使用jQuery Tab插件创建了一个Tab切换的界面，在其中包含一个IFrame用于展示内容。代码中涉及到了HTML、CSS和JavaScript三个方面的知识点。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Tab插件+iframe示例</title>
  <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  <link href="jquery.tab.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="jquery.tab.js"></script>
  <script>
    $(function() {
      $('#jquery-tab-example').tab({
        iframe: true
      })
    })
  </script>
  <style>
    .tab-iframe {
      border: none;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="jquery-tab-example" class="tab-container">
    <ul class="tab" role="tablist">
      <li role="presentation"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
      <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
      <li role="presentation"><a href="#tab2" aria-controls="tab3" role="tab" data-toggle="tab" data-tab-remote="https://www.baidu.com">Tab 3</a></li>
    </ul>
    <div class="tab-content">
      <div id="tab1" class="tab-pane" role="tabpanel">
        <h4>Tab 1 Content</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat placerat erat, vel feugiat sem mattis at. Maecenas ut quam non mi venenatis faucibus. Nunc nec ante eget nisi mollis feugiat.</p>
        <p>Suspendisse feugiat, eros eu elementum adipiscing, eros dolor sagittis mi, a porta dolor erat eget urna. Fusce lobortis scelerisque turpis vitae pellentesque.</p>
      </div>
      <div id="tab2" class="tab-pane" role="tabpanel">
        <h4>Tab 2 Content</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat placerat erat, vel feugiat sem mattis at. Maecenas ut quam non mi venenatis faucibus. Nunc nec ante eget nisi mollis feugiat.</p>
        <p>Suspendisse feugiat, eros eu elementum adipiscing, eros dolor sagittis mi, a porta dolor erat eget urna. Fusce lobortis scelerisque turpis vitae pellentesque.</p>
      </div>
      <div id="tab3" class="tab-pane" role="tabpanel">
        Loading content...
      </div>
    </div>
  </div>
</body>
</html>

示例二：Tab切换+远程脚本模式

在以下代码中，我们使用jQuery Tab插件创建了一个Tab切换的界面，在其中包含一个远程脚本用于引用百度地图API。代码中涉及到了HTML、CSS和JavaScript三个方面的知识点。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Tab插件+远程脚本示例</title>
  <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  <link href="jquery.tab.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script src="jquery.tab.js"></script>
  <script>
    $(function() {
      $('#jquery-tab-example').tab({
        remoteScript: true
      })
    })
  </script>
  <style>
    #tab4 .baidu-map {
      width: 100%;
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="jquery-tab-example" class="tab-container">
    <ul class="tab" role="tablist">
      <li role="presentation"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
      <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
      <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
      <li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab" data-tab-script="http://api.map.baidu.com/api?v=2.0&ak=123">Tab 4</a></li>
    </ul>
    <div class="tab-content">
      <div id="tab1" class="tab-pane" role="tabpanel">
        <h4>Tab 1 Content</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat placerat erat, vel feugiat sem mattis at. Maecenas ut quam non mi venenatis faucibus. Nunc nec ante eget nisi mollis feugiat.</p>
        <p>Suspendisse feugiat, eros eu elementum adipiscing, eros dolor sagittis mi, a porta dolor erat eget urna. Fusce lobortis scelerisque turpis vitae pellentesque.</p>
      </div>
      <div id="tab2" class="tab-pane" role="tabpanel">
        <h4>Tab 2 Content</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat placerat erat, vel feugiat sem mattis at. Maecenas ut quam non mi venenatis faucibus. Nunc nec ante eget nisi mollis feugiat.</p>
        <p>Suspendisse feugiat, eros eu elementum adipiscing, eros dolor sagittis mi, a porta dolor erat eget urna. Fusce lobortis scelerisque turpis vitae pellentesque.</p>
      </div>
      <div id="tab3" class="tab-pane" role="tabpanel">
        <h4>Tab 3 Content</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat placerat erat, vel feugiat sem mattis at. Maecenas ut quam non mi venenatis faucibus. Nunc nec ante eget nisi mollis feugiat.</p>
        <p>Suspendisse feugiat, eros eu elementum adipiscing, eros dolor sagittis mi, a porta dolor erat eget urna. Fusce lobortis scelerisque turpis vitae pellentesque.</p>
      </div>
      <div id="tab4" class="tab-pane" role="tabpanel">
        <h4>Tab 4 Content</h4>
        <div class="baidu-map">
          百度地图
        </div>
      </div>
    </div>
  </div>

  <script src="http://api.map.baidu.com/api?v=2.0&ak=123"></script>
  <script>
    function initialize() {
      var map = new BMap.Map('tab4')
      var point = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(point, 15)
    }
    initialize()
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery Tab插件用于在Tab中显示iframe，附源码和详细说明 - Python技术站