1. Python技术站首页
  2. 其他
  3. JavaScript

jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明

• JavaScript

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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 浅谈JavaScript 代码简洁之道

    下面是“浅谈JavaScript代码简洁之道”的完整攻略。 浅谈JavaScript代码简洁之道 前言 JavaScript是前端开发中最重要的一门语言之一，同时也是最常用的一门语言之一。JavaScript代码的简洁性能够极大地提高代码的可读性和可维护性，因此在开发过程中，我们应该注重代码的简洁性。下面是一些关于如何让JavaScript代码更加简洁的建议…

    JavaScript 2023年5月18日
    00

  • JavaScript new对象的四个过程实例浅析

    JavaScript new对象的四个过程实例浅析 在JavaScript中，使用new关键字可以创建一个对象。但是，创建对象并不是一件简单的事情，它会涉及到四个过程，本文将详细讲解这四个过程以及示例分析。 1、创建对象 当使用new关键字创建一个对象时，JavaScript会在内存中为该对象分配空间。这个空间会保存该对象的所有属性和方法。我们先来看一个简单…

    JavaScript 2023年5月27日
    00

  • JS实现中英文混合文字溢出友好截取功能

    以下是JS实现中英文混合文字溢出友好截取功能的完整攻略。 什么是中英文混合文字溢出？ 中英文混合文字溢出通常是指，在一个容器中，两种不同字符（例如汉字和英文字符）混合排列，当容器宽度不够时，字符溢出容器的情况。由于汉字和英文字母的宽度不同，所以溢出部分难以准确的识别和截断，需要特殊处理。 如何实现中英文混合文字溢出友好截取？ 第一步：计算字符长度和容器宽度 …

    JavaScript 2023年5月28日
    00

  • Javascript Date setSeconds() 方法

    以下是关于JavaScript Date对象的setSeconds()方法的完整攻略，包括两个示例说明。 JavaScript Date对象的setSeconds()方法 JavaScript Date对象的setSeconds()方法设置日期对象的秒部分。该方法接受一个整数，表示要设置的秒数。如果该参数超出了JavaScript所能表示的范围，则自动调整为…

    JavaScript 2023年5月11日
    00

  • 新手入门js闭包学习过程解析

    新手入门JS闭包学习过程解析 JS闭包是JS中一个非常重要且常见的概念，但它的概念对于初学者来说可能会比较难理解和掌握。本文将详细讲解新手如何入门JS闭包，并提供相关示例进行说明。 什么是JS闭包 JS闭包(Closure)是指有权访问另一个函数作用域中变量的函数，即在函数内部创建一个可以访问外部变量的作用域。它是指那些能够访问自由变量的函数，即使在这些函数…

    JavaScript 2023年6月10日
    00

  • js每隔两秒输出数组中的一项(实例)

    下面是讲解“js每隔两秒输出数组中的一项”的完整攻略，具体步骤如下： 1. 准备工作 在开始实现之前，我们需要明确几个问题： 哪个数组需要输出？ 如何输出数组中的一项？ 如何达到每隔两秒输出一项的效果？ 针对以上问题，我们可以做如下解答： 这里假设我们要输出的数组是一个长度为n的一维数组 输出数组中的一项可以使用数组索引，即array[index]的形式来实…

    JavaScript 2023年5月27日
    00

  • JS一个简单的注册页面实例

    下面为大家详细说明“JS一个简单的注册页面实例”的完整攻略。 1. 准备工作 在实现一个简单的注册页面之前，我们需要先准备好以下工作： HTML布局代码：包括表单、输入框、按钮等。 CSS样式表：为页面元素添加样式和布局。 JS代码：实现页面交互，如表单验证等。 2. HTML布局代码 首先使用 HTML 建立一个空白网页，然后在 body 标签内添加以下代…

    JavaScript 2023年6月10日
    00

  • Javascript 是你的高阶函数(高级应用)

    Javascript 是你的高阶函数(高级应用) 在Javascript中，函数是一等公民，这意味着函数可以像变量一样被存储、传递和操作。高阶函数是基于这个概念，是指可以接受函数作为参数并/或返回函数的函数。 传递函数作为参数 以下是一个例子，演示如何将函数作为参数传递： function greet(name, callback) { console.lo…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部