Score
0
Watch 94 Star 299 Fork 78

自由自在的小鱼 / bootStrap-addTabsJavaScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
BOOTSTRAP 增加、关闭、折叠TAB,喜欢的右上角点个星吧;) spread retract

Clone or download
index.html 18.14 KB
Copy Edit Web IDE Raw Blame History
自由自在的小鱼 authored 2017-05-02 17:11 . 更新 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="" name="description"/>
<meta content="" name="keywords"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<title>
Bootstrap addtabs
</title>
<link href="example/theme/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="./bootstrap.addtabs.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="example/theme/js/jquery.min.js">
</script>
<script src="example/theme/js/bootstrap.min.js">
</script>
<script src="./bootstrap.addtabs.js">
</script>
<script type="text/javascript">
$(function () {
$('#closeAll').click(function () {
console.log('1');
$.addtabs.closeAll('#tabs1');
})
})
</script>
</head>
</html>
<body>
<div class="container">
<div class="page-header">
<h1>
Tab add close drop for Bootstrap
<small>
bootstrap.addtabs.js
</small>
</h1>
</div>
<div class="row">
<div class="col-sm-3">
<h4>
About
</h4>
<hr>
bootstrap.addtabs.js是一个bootstrap的TAB扩展插件。可以使用它自动创建、关闭、折叠、拖动tabs,创建的tabs可以使用ajax/iframe加载,或者直接指定内容。同时,还可以在tabs标签上使用右键关闭、刷新tab。
<br/>
Bootstrap.addtabs.js is a bootstrap of the tabs extension. You can use it to automatically create, close, drop, drag tabs, create tabs can be used to load ajax / iframe, or directly specify the content. At the same time, you can
also use the right tab on the tabs tab to close, refresh the tab.
<h4>
Change Log
</h4>
<hr>
<ul class="list-unstyled">
<li>
2017/02/15 规范代码
</li>
<li>
2017/02/09 更改右键菜单,增加右键菜单local设置
</li>
<li>
2016/12/16 修正点击按钮/链接会刷新已打开TAB
</li>
<li>
2016/10/13 新增TAB右键菜单,取消右键关闭,注:不希望关闭的tab,不要设置ID
</li>
<li>
2016/09/20 新增1、直接在TAB上点右键关闭其他TAB,并激活当前tab;2、关闭所有打开TAB的按钮
</li>
<li>
2016/06/23 隐藏关闭按钮,鼠标指向TAB时显示
</li>
<li>
2016/02/04 修改主体JS文件,更灵活,更规范
</li>
<li>
2016/01/25 修改IFrame支持IE,修改一些BUG,增加iframeClass样式表
</li>
<li>
2015/12/19 重新编写了代码,增加一些参数及函数
</li>
</ul>
</hr>
</hr>
</div>
<div class="col-sm-9">
<h4>
Example
</h4>
<hr>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<ul class="list-group">
<a class="list-group-item" data-addtab="mail" data-url="example/ajax/mailbox.txt">
mailbox
</a>
<a class="list-group-item" data-addtab="mail1" data-ajax="true" data-url="example/ajax/mailbox.txt">
Use Ajax
</a>
<a class="list-group-item" data-addtab="message" data-content="Customize the content" data-url="example/ajax/mailbox.txt">
<i class="glyphicon glyphicon-bullhorn">
</i>
指定内容
</a>
<a class="list-group-item" data-addtab="setting" data-title="Customize the title" data-url="example/ajax/mailbox.txt">
<i class="glyphicon glyphicon-cog">
</i>
指定标题
</a>
<a class="list-group-item" data-addtab="userMenu1" data-url="example/ajax/mailbox.txt">
用户菜单1
</a>
<a class="list-group-item" data-addtab="userMenu2" data-target="#tabs2" data-url="example/ajax/button.html">
target2
</a>
<a class="list-group-item" data-addtab="sina" data-url="http://sina.com.cn">
新浪
</a>
<a class="list-group-item" data-addtab="baidu" data-url="http://baidu.com">
百度
</a>
<a class="list-group-item" id="closeAll">
关闭所有
</a>
</ul>
</div>
<div class="col-sm-10">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="tabs1" role="tablist">
<li class="active" role="presentation">
<a aria-controls="home" data-toggle="tab" href="#home" role="tab">
Home
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
I'm a homepage.
</div>
</div>
</div>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="tabs2" role="tablist">
<li class="active" role="presentation">
<a aria-controls="home1" data-toggle="tab" href="#home1" role="tab">
Home
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home1" role="tabpanel">
I'm a homepage.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h4>
Options
</h4>
<hr>
<table class="table">
<thead>
<tr>
<th colspan="2">
Name
</th>
<th>
Type
</th>
<th>
Default
</th>
<th>
description
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
content
</td>
<td>
string|html
</td>
<td>
</td>
<td>
直接指定内容
</td>
</tr>
<tr>
<td colspan="2">
target
</td>
<td>
string|object
</td>
<td>
</td>
<td>
指定tab objectP
</td>
</tr>
<tr>
<td colspan="2">
close
</td>
<td>
bool
</td>
<td>
true
</td>
<td>
是否可以关闭
</td>
</tr>
<tr>
<td colspan="2">
monitor
</td>
<td>
string
</td>
<td>
body
</td>
<td>
监视的区域
</td>
</tr>
<tr>
<td colspan="2">
iframeUse
</td>
<td>
bool
</td>
<td>
true
</td>
<td>
是否使用iframe,false使用ajax
</td>
</tr>
<tr>
<td colspan="2">
iframeHeight
</td>
<td>
number
</td>
<td>
$(document).height() - 107
</td>
<td>
iframe高度
</td>
</tr>
<tr>
<td colspan="2">
contextmenu
</td>
<td>
bool
</td>
<td>
true
</td>
<td>
是否启用右键菜单
</td>
</tr>
<tr>
<td colspan="2">
callback
</td>
<td>
function(){}
</td>
<td>
</td>
<td>
关闭后回调函数
</td>
</tr>
<tr>
<td rowspan="6">
local
</td>
</tr>
<tr>
<td>
refreshLabel
</td>
<td>
string
</td>
<td>
刷新此标签
</td>
<td>
刷新此标签
</td>
</tr>
<tr>
<td>
closeThisLabel
</td>
<td>
string
</td>
<td>
关闭此标签
</td>
<td>
关闭此标签
</td>
</tr>
<tr>
<td>
closeOtherLabel
</td>
<td>
string
</td>
<td>
关闭其他标签
</td>
<td>
关闭其他标签
</td>
</tr>
<tr>
<td>
closeLeftLabel
</td>
<td>
string
</td>
<td>
关闭左侧标签
</td>
<td>
关闭左侧标签
</td>
</tr>
<tr>
<td>
closeRightLabel
</td>
<td>
string
</td>
<td>
关闭右侧标签
</td>
<td>
关闭右侧标签
</td>
</tr>
</tbody>
</table>
</hr>
</hr>
</div>
</div>
</div>
</body>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/hbbcs/bootStrap-addTabs.git
git@gitee.com:hbbcs/bootStrap-addTabs.git
hbbcs
bootStrap-addTabs
bootStrap-addTabs
master

Help Search