-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
142 lines (130 loc) · 5.82 KB
/
demo.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>nth-tabs by nethuige</title>
<meta name="keywords" content="nth-tabs">
<meta name="description" content="nth-tabs">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js">ss</script>
<link href="css/nth-tabs.css" rel="stylesheet">
<script src="js/nth-tabs.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper {
padding-top: 10px;
height: calc(100% - 220px);
}
.page-wrapper {
overflow: hidden;
height: 100%;
}
</style>
<script>
var nthTabs;
$(function () {
//一个低门槛的演示,更多需求看源码
//基于bootstrap tab的自定义多标签的jquery实用插件
nthTabs = $("#main-tabs").nthTabs();
// 新建选项卡示例
nthTabs.addTab({
id: 'home',
title: '首 页',
//url: "http://www.baidu.com",
content: '这是首页',
active: true,
allowClose: false
});
// 连贯操作示例
nthTabs.addTab({
id: 'menu-manage',
title: '菜单管理',
active: false,
content: '这是菜单管理页面~'
}).addTab({
id: 'role-manage',
title: '角色管理',
active: false,
content: '这是角色管理页面~'
});
// 新建选项卡(自定义内容)
$("#add-tab-content").on("click", function () {
var id = Math.ceil(Math.random() * 1000);
nthTabs.addTab({
id: "nth-tab-" + id,
title: '选项卡-' + id,
content: '选项卡内容' + id,
active: true,
allowClose: true,
location: true,
fadeIn: false
})
});
// 新建选项卡(URL地址)
$("#add-tab-url").on("click", function () {
var id = Math.ceil(Math.random() * 1000);
nthTabs.addTab({
id: "nth-tab-" + id,
title: 'URL选项卡-' + id,
url: "http://www.nethuige.com",
active: true,
allowClose: true,
location: false,
fadeIn: true
});
});
// 新建选项卡(URL地址)
$("#add-tabs").on("click", function () {
// 批量新建选项卡
nthTabs.addTabs([{
id: 'user-manage',
title: '用户管理',
content: '这是用户管理页面~'
}, {
id: 'auth-manage',
title: '权限管理',
content: '这是权限管理页面~'
}]);
});
});
</script>
</head>
<body>
<div class="container wrapper">
<div class="page-wrapper">
<!--使用时只需此标签,class固定,id自己定义-->
<div class="nth-tabs" id="main-tabs">
</div>
</div>
<div style="margin-top:20px;">
<div style="line-height:50px;">
<button type="button" class="btn btn-primary" id="add-tab-content">新建选项卡(自定义内容)</button>
<button type="button" class="btn btn-primary" id="add-tab-url">新建选项卡(URL地址)</button>
<button type="button" class="btn btn-primary" id="add-tabs">批量新建选项卡</button>
<button type="button" class="btn btn-info" onclick="nthTabs.setActTab('role-manage');">置活动选项卡(角色管理)</button>
<button type="button" class="btn btn-info" onclick="nthTabs.toggleTab('menu-manage')">切换选项卡(菜单管理)</button>
<button type="button" class="btn btn-info" onclick="nthTabs.locationTab('home')">定位选项卡</button>
<button type="button" class="btn btn-danger" onclick="nthTabs.delTab('role-manage')">关闭选项卡(角色管理)</button>
<button type="button" class="btn btn-danger" onclick="nthTabs.delOtherTab()">关闭其他</button>
<button type="button" class="btn btn-danger" onclick="nthTabs.delAllTab()">关闭所有</button>
<button type="button" class="btn btn-warning" onclick="$('.roll-nav-left').click()">左滑动</button>
<button type="button" class="btn btn-warning" onclick="$('.roll-nav-right').click()">右滑动</button>
<button type="button" class="btn btn-success" onclick="alert(nthTabs.getMarginStep())">获取左右滑动步值</button>
<button type="button" class="btn btn-success" onclick="alert(nthTabs.getActiveId())">获取当前选项卡ID</button>
<button type="button" class="btn btn-success" onclick="alert(nthTabs.getAllTabWidth())">获取所有选项卡宽度</button>
<button type="button" class="btn btn-success" onclick="console.log(nthTabs.getTabList());alert(nthTabs.getTabList())">获取所有选项卡</button>
<button type="button" class="btn btn-success" onclick="alert(nthTabs.isExistsTab('menu-manage'))">获取指定选项卡是否存在</button>
</div>
</div>
</div>
</body>
</html>