`

bootstrap插件bootstrap-tab

阅读更多

<!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-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是一个流行的开源前端开发框架,它的核心包括响应式布局、...

Global site tag (gtag.js) - Google Analytics