-
Notifications
You must be signed in to change notification settings - Fork 30
/
index.html
63 lines (62 loc) · 1.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>可关闭的tab，子页面用iframe实现</title>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="form-inline">
<div class="form-group">
<label for="id">ID</label>
<input type="text" class="form-control" id="id" placeholder="">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="">
</div>
<div class="form-group">
<label for="frametype">URL</label>
<input type="text" class="form-control" id="url" placeholder="">
</div>
<div class="form-group">
<label for="closable">closable</label>
<select id="closable" class="form-control">
<option value="1">可关闭</option>
<option value="0">不可关闭</option>
</select>
</div>
<button class="btn btn-default" onclick="add();">添加</button>
</div>
</div>
<br>
<div class="row">
<!-- 此处是相关代码 -->
<ul class="nav nav-tabs" role="tablist">
</ul>
<div class="tab-content" style="width:100%;">
</div>
<!-- 相关代码结束 -->
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-closable-tab.js"></script>
<script>
$(function(){
var item = {'id':'1','name':'首页','url':'son.html','closable':false};
closableTab.addTab(item);
})
function add(){
var id = $('#id').val();
var name = $('#name').val();
var uri = $('#url').val();
var closable = $('#closable').val();
var item = {'id':id,'name':name,'url':uri,'closable':closable==1?true:false};
closableTab.addTab(item);
}
</script>
</html>