<!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"则是在原生Bootstrap Tab组件的基础上进行的扩展,增加了标签页的关闭功能,使得用户可以根据需要关闭不需要的标签页,提高了交互性和用户体验。 在这个扩展中,`bootstrap-closable-...
- `bootstrap.js`:未压缩的Bootstrap插件源码。 3. **JavaScript 插件**:Bootstrap的JavaScript插件包括导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、工具提示(tooltip)、弹出框(popover)、...
<div class="tab-content" style="width: ...;"> ``` 5. **示例代码**: 下面是一个简单的使用示例,创建一个可关闭的标签页: ```javascript var tabItem = { id: 'uniqueId', name: '标签页名称', url:...
Bootstrap Closable Tab 插件是一种在Web应用中实现可关闭标签页功能的工具,尤其在后台管理系统中广泛使用。这种功能使得用户可以更高效地管理打开的页面,避免过多的标签页导致界面混乱,提高了操作的便捷性和用户...
4. **JavaScript插件**:Bootstrap还提供了一些基于jQuery的JavaScript插件,如 collapse、tab、tooltip、popover 等,它们扩展了HTML元素的功能,使得交互更丰富。通过简单的数据属性或JavaScript方法,开发者可以...
$(".tab-content").append('<div id="newTab" class="tab-pane fade"></div>'); ``` 5. **事件监听**:Bootstrap Tab插件提供了多种事件,如`shown.bs.tab`(当某个标签被激活后触发)和`hidden.bs.tab`(当某个...
3. **JavaScript插件**:Bootstrap提供了许多内置的JavaScript插件,如上面提到的下拉菜单、模态框、工具提示和弹出框,还有模态对话框(modals)、滚动spy(scrollspy)、tab切换(tabs)、折叠(collapse)等,...
4. **创建Tab内容**:与Nav项相对应,我们需要创建一个`<div>`,设置`class="tab-content"`和`id`(与`aria-controls`属性值相同),并为每个Tab页创建一个`<div>`,设置类名`.tab-pane`和`id`(与`href`属性值相同...
为了实现这个功能,我们需要借助第三方插件,比如`bootstrap-x-editable`。这个插件允许用户在表格的单元格上直接进行编辑操作,提供了一种便捷的方式来动态更新表格内容。 `bootstrap-x-editable`插件的引入主要...
Bootstrap 3.3.7还包含了JavaScript插件,如Carousel(轮播图)、Collapse(折叠内容)、Dropdowns(下拉菜单)、ScrollSpy(滚动监听)、Tab(标签页切换)、Tooltip(提示信息)和Popover(弹出框)。这些插件可以...
- **Bootstrap插件使用教程**:了解Bootstrap提供的各种插件,包括Tab在内的高级功能。 所有这些教程都整合在Bootstrap基础教程专题中,方便你一站式学习。 总的来说,Bootstrap的Tab组件提供了简洁、直观的界面...
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/...
对应于每个选项卡,需要一个`<div class="tab-content">`容器,其中包含`<div class="tab-pane">`来包裹每部分的内容。`id`属性应与选项卡链接的`href`相匹配,并使用`active`类来显示初始可见的面板。 4. **切换...
BOOTSTRAP-TABLE是一款基于Bootstrap框架的开源前端数据展示插件,它允许用户在网页上创建功能丰富的表格,包括排序、筛选、分页等。这个源码包包含了官方的最新版本,适合开发者进行二次开发或者深入理解其工作原理...
Bootstrap Ace Tab是一个基于Bootstrap和ACE框架的前端页面模板,用于实现管理界面的页签功能。Ace是一个功能丰富的代码编辑器,而Bootstrap则是一个流行的前端开发框架,提供了响应式布局和一系列预先设计的组件。...
Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件、样式和JavaScript插件,用于快速构建响应式和移动优先的网页。这个“bootstrap-3.4.1-dist.zip”压缩包包含了Bootstrap 3.4.1版本的分布...
bootstrap-fileinput源码:...这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Uploadify插件,可以参考我随笔《附件上传组件uploadify的使用》,不过这个需要Flash控件
$('(1) + '" class="tab-pane fade"></div>').appendTo('.tab-content'); // 切换到新标签页 $this.tab('show'); }); // 关闭标签页 $(document).on('click', '.close', function () { var $this = $(this); ...
在“Bootstrap Ace模板 tab页左右滑动”这一主题中,我们主要关注的是如何在标签页(tab)过多导致宽度超出屏幕时,实现标签页的左右滑动效果。 Bootstrap是一个流行的开源前端开发框架,它的核心包括响应式布局、...