`

bootstrap插件bootstrap-tab

bootstrap 
阅读更多

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Tab组件</title>
</head>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="../bootstrap-3.3.7/font-awesome.css"> -->
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-tab.css">

<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-tab.js"></script>
<body>
<div id="tabContainer"></div>
</body>

<script type="text/javascript">
    $("#tabContainer").tabs({
        data: [{
            id: 'home',
            text: '百度一下',
            url: "tab_first.html",
            closeable: true
        }, {
            id: 'admineap',
            text: 'AdminEAP',
            url: "tab_first.html"
        }],
        showIndex: 0,
        loadAll: false
    });

    $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_first.html'})
</script>
</html>
分享到：
| bootstrap插件bootstrap-treeview
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bootstrap-closable-tab.js tab标签页扩展之关闭全部和关闭其他

    而"bootstrap-closable-tab.js"则是在原生Bootstrap Tab组件的基础上进行的扩展，增加了标签页的关闭功能，使得用户可以根据需要关闭不需要的标签页，提高了交互性和用户体验。 在这个扩展中，`bootstrap-closable-...

    bootstrap-4.1.3-dist

    - `bootstrap.js`：未压缩的Bootstrap插件源码。 3. **JavaScript 插件**：Bootstrap的JavaScript插件包括导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、工具提示（tooltip）、弹出框（popover）、...

    bootstrap-closable-tab可实现关闭的tab标签页插件

    &lt;div class="tab-content" style="width: ...;"&gt; ``` 5. **示例代码**： 下面是一个简单的使用示例，创建一个可关闭的标签页： ```javascript var tabItem = { id: 'uniqueId', name: '标签页名称', url:...

    bootstrap-closable-tab Demo

    Bootstrap Closable Tab 插件是一种在Web应用中实现可关闭标签页功能的工具，尤其在后台管理系统中广泛使用。这种功能使得用户可以更高效地管理打开的页面，避免过多的标签页导致界面混乱，提高了操作的便捷性和用户...

    bootstrap-3.3.7--.rar

    4. **JavaScript插件**：Bootstrap还提供了一些基于jQuery的JavaScript插件，如 collapse、tab、tooltip、popover 等，它们扩展了HTML元素的功能，使得交互更丰富。通过简单的数据属性或JavaScript方法，开发者可以...

    bootstrap tab插件 带有示例

    $(".tab-content").append('&lt;div id="newTab" class="tab-pane fade"&gt;&lt;/div&gt;'); ``` 5. **事件监听**：Bootstrap Tab插件提供了多种事件，如`shown.bs.tab`（当某个标签被激活后触发）和`hidden.bs.tab`（当某个...

    bootstrap3.3.7帮助文档-编译好的HTML文档(chm)

    3. **JavaScript插件**：Bootstrap提供了许多内置的JavaScript插件，如上面提到的下拉菜单、模态框、工具提示和弹出框，还有模态对话框（modals）、滚动spy（scrollspy）、tab切换（tabs）、折叠（collapse）等，...

    [html5技术]基于bootstrap制作的多标签页(tabs)

    4. **创建Tab内容**：与Nav项相对应，我们需要创建一个`&lt;div&gt;`，设置`class="tab-content"`和`id`（与`aria-controls`属性值相同），并为每个Tab页创建一个`&lt;div&gt;`，设置类名`.tab-pane`和`id`（与`href`属性值相同...

    bootstrap table编辑表格所需文件

    为了实现这个功能，我们需要借助第三方插件，比如`bootstrap-x-editable`。这个插件允许用户在表格的单元格上直接进行编辑操作，提供了一种便捷的方式来动态更新表格内容。 `bootstrap-x-editable`插件的引入主要...

    bootstrap-3.3.7-dist.zip

    Bootstrap 3.3.7还包含了JavaScript插件，如Carousel（轮播图）、Collapse（折叠内容）、Dropdowns（下拉菜单）、ScrollSpy（滚动监听）、Tab（标签页切换）、Tooltip（提示信息）和Popover（弹出框）。这些插件可以...

    全面解析Bootstrap中tab（选项卡）的使用方法

    - **Bootstrap插件使用教程**：了解Bootstrap提供的各种插件，包括Tab在内的高级功能。 所有这些教程都整合在Bootstrap基础教程专题中，方便你一站式学习。 总的来说，Bootstrap的Tab组件提供了简洁、直观的界面...

    bootstrap-table后端分页功能完整实例

    本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下： 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/...

    bootstrap tab.zip_bootstrap tab_bootstrap tab_bootstrap 多tab_bo

    对应于每个选项卡，需要一个`&lt;div class="tab-content"&gt;`容器，其中包含`&lt;div class="tab-pane"&gt;`来包裹每部分的内容。`id`属性应与选项卡链接的`href`相匹配，并使用`active`类来显示初始可见的面板。 4. **切换...

    BOOTSTRAP-TABLE源码

    BOOTSTRAP-TABLE是一款基于Bootstrap框架的开源前端数据展示插件，它允许用户在网页上创建功能丰富的表格，包括排序、筛选、分页等。这个源码包包含了官方的最新版本，适合开发者进行二次开发或者深入理解其工作原理...

    bootstrap-ace_tab

    Bootstrap Ace Tab是一个基于Bootstrap和ACE框架的前端页面模板，用于实现管理界面的页签功能。Ace是一个功能丰富的代码编辑器，而Bootstrap则是一个流行的前端开发框架，提供了响应式布局和一系列预先设计的组件。...

    bootstrap-3.4.1-dist.zip

    Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。这个“bootstrap-3.4.1-dist.zip”压缩包包含了Bootstrap 3.4.1版本的分布...

    BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    bootstrap-fileinput源码：...这个插件主要是介绍如何处理图片上传的处理操作，原先我的Excel导入操作使用的是Uploadify插件，可以参考我随笔《附件上传组件uploadify的使用》，不过这个需要Flash控件

    bootstrap多标签页mutitab

    $('(1) + '" class="tab-pane fade"&gt;&lt;/div&gt;').appendTo('.tab-content'); // 切换到新标签页 $this.tab('show'); }); // 关闭标签页 $(document).on('click', '.close', function () { var $this = $(this); ...

    Bootstrap Ace模板 tab页左右滑动

    在“Bootstrap Ace模板 tab页左右滑动”这一主题中，我们主要关注的是如何在标签页（tab）过多导致宽度超出屏幕时，实现标签页的左右滑动效果。 Bootstrap是一个流行的开源前端开发框架，它的核心包括响应式布局、...

Magicbox
Global site tag (gtag.js) - Google Analytics