jquery-bootstrap-scrolling-tabs
Version:
jQuery plugin for scrollable Bootstrap Tabs
195 lines (171 loc) • 10 kB
HTML
<html>
<head>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/jquery.scrolling-tabs.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.left-side {
width: 50%;
}
.right-side {
width: 50%;
}
.st-demo-header {
background-color: #666666;
color: white;
font-size: 24px;
padding: 8px 24px;
}
.st-demo-header button {
color: black;
font-size: 12px;
}
.custom-arrow {
border: 1px solid #ddd;
border-top: none;
color: #337ab7;
cursor: pointer;
float: left;
font-size: 22px;
height: 42px;
margin-bottom: -1px;
padding: 9px 6px;
width: 40px;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
</style>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-point-left" viewBox="0 0 32 32">
<title>point-left</title>
<path d="M19 30h-5c-1.654 0-3-1.346-3-3 0-0.535 0.14-1.037 0.386-1.472-0.833-0.534-1.386-1.467-1.386-2.528 0-0.768 0.29-1.469 0.766-2-0.476-0.531-0.766-1.232-0.766-2 0-0.35 0.060-0.687 0.171-1h-7.171c-1.654 0-3-1.346-3-3s1.346-3 3-3h12.334l-2.932-5.501c-0.262-0.454-0.401-0.973-0.401-1.499 0-1.654 1.346-3 3-3 0.824 0 1.592 0.327 2.163 0.921 0.007 0.008 0.015 0.015 0.022 0.023l6.815 7.474v-1.419c0-0.552 0.448-1 1-1h6c0.552 0 1 0.448 1 1v20c0 0.552-0.448 1-1 1h-6c-0.552 0-1-0.448-1-1v-1.382l-4.553 2.276c-0.139 0.069-0.292 0.106-0.447 0.106zM27 28c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1zM18.764 28l5.236-2.618v-11.995l-8.287-9.088c-0.19-0.193-0.443-0.299-0.713-0.299-0.551 0-1 0.449-1 1 0 0.171 0.041 0.332 0.122 0.479 0.010 0.017 0.020 0.033 0.029 0.051l3.732 7c0.165 0.31 0.156 0.684-0.025 0.985s-0.506 0.485-0.857 0.485h-14c-0.551 0-1 0.449-1 1s0.449 1 1 1h10c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.551 0-1 0.449-1 1s0.449 1 1 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.551 0-1 0.449-1 1s0.449 1 1 1h1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.551 0-1 0.449-1 1s0.449 1 1 1h4.764z"></path>
</symbol>
<symbol id="icon-point-right" viewBox="0 0 32 32">
<title>point-right</title>
<path d="M13 30h5c1.654 0 3-1.346 3-3 0-0.535-0.14-1.037-0.387-1.472 0.833-0.534 1.387-1.467 1.387-2.528 0-0.768-0.29-1.469-0.766-2 0.476-0.531 0.766-1.232 0.766-2 0-0.35-0.060-0.687-0.171-1h7.171c1.654 0 3-1.346 3-3s-1.346-3-3-3h-12.334l2.932-5.501c0.262-0.454 0.401-0.973 0.401-1.499 0-1.654-1.346-3-3-3-0.824 0-1.592 0.327-2.163 0.922-0.007 0.008-0.015 0.015-0.022 0.023l-6.815 7.474v-1.419c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v20c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-1.382l4.553 2.276c0.139 0.069 0.292 0.106 0.447 0.106zM5 28c-0.552 0-1-0.448-1-1s0.448-1 1-1 1 0.448 1 1-0.448 1-1 1zM13.236 28l-5.236-2.618v-11.995l8.287-9.088c0.19-0.193 0.443-0.299 0.713-0.299 0.551 0 1 0.449 1 1 0 0.171-0.041 0.332-0.122 0.479-0.010 0.017-0.020 0.033-0.029 0.051l-3.732 7c-0.165 0.31-0.156 0.684 0.025 0.985s0.506 0.485 0.857 0.485h14c0.551 0 1 0.449 1 1s-0.449 1-1 1h-10c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.551 0 1 0.449 1 1s-0.449 1-1 1c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.551 0 1 0.449 1 1s-0.449 1-1 1h-1c-0.552 0-1 0.448-1 1s0.448 1 1 1c0.551 0 1 0.449 1 1s-0.449 1-1 1h-4.764z"></path>
</symbol>
</defs>
</svg>
<div class="st-demo-header">jquery-bootstrap-scrolling-tabs Demo - Markup Only
<button type="button" id="btn-destroy">Destroy</button>
<button type="button" id="btn-refresh">Refresh</button>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="display: none">
<li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
<li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab Number 2</a></li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tab 3 Dropdown<span class=caret></span></a>
<ul class="dropdown-menu">
<li><a href="#tab3a" role="tab" data-toggle="tab">Tab 3a</a></li>
<li><a href="#tab3b" role="tab" data-toggle="tab">Tab 3b</a></li>
<li><a href="#tab3c" role="tab" data-toggle="tab">Tab 3c</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab Number 4</a></li>
<li role="presentation"><a href="#tab5" role="tab" data-toggle="tab">Tab Number 5</a></li>
<li role="presentation"><a href="#tab6" role="tab" data-toggle="tab">Tab Number 6</a></li>
<li role="presentation"><a href="#tab7" role="tab" data-toggle="tab">Tab Number 7</a></li>
<li role="presentation"><a href="#tab8" role="tab" data-toggle="tab">Tab Number 8</a></li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tab 9 Dropdown<span class=caret></span></a>
<ul class="dropdown-menu">
<li><a href="#tab9a" role="tab" data-toggle="tab">Tab 9a</a></li>
<li><a href="#tab9b" role="tab" data-toggle="tab">Tab 9b</a></li>
<li><a href="#tab9c" role="tab" data-toggle="tab">Tab 9c</a></li>
</ul>
</li>
<li role="presentation"><a href="#tab10" role="tab" data-toggle="tab">Tab Number 10</a></li>
<li role="presentation"><a href="#tab11" role="tab" data-toggle="tab">Tab Number 11</a></li>
<li role="presentation"><a href="#tab12" role="tab" data-toggle="tab">Tab Number 12</a></li>
<li role="presentation"><a href="#tab13" role="tab" data-toggle="tab">Tab Number 13</a></li>
<li role="presentation"><a href="#tab14" role="tab" data-toggle="tab">Tab Number 14</a></li>
<li role="presentation"><a href="#tab15" role="tab" data-toggle="tab">Tab Number 15</a></li>
<li role="presentation"><a href="#tab16" role="tab" data-toggle="tab">Tab Number 16</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="display: none">
<div role="tabpanel" class="tab-pane active" id="tab1">Tab 1 content...</div>
<div role="tabpanel" class="tab-pane" id="tab2">Tab 2 content...</div>
<div role="tabpanel" class="tab-pane" id="tab3">Tab 3 content...</div>
<div role="tabpanel" class="tab-pane" id="tab3a">Tab 3a content...</div>
<div role="tabpanel" class="tab-pane" id="tab3b">Tab 3b content...</div>
<div role="tabpanel" class="tab-pane" id="tab3c">Tab 3c content...</div>
<div role="tabpanel" class="tab-pane" id="tab4">Tab 4 content...</div>
<div role="tabpanel" class="tab-pane" id="tab5">Tab 5 content...</div>
<div role="tabpanel" class="tab-pane" id="tab6">Tab 6 content...</div>
<div role="tabpanel" class="tab-pane" id="tab7">Tab 7 content...</div>
<div role="tabpanel" class="tab-pane" id="tab8">Tab 8 content...</div>
<div role="tabpanel" class="tab-pane" id="tab9">Tab 9 content...</div>
<div role="tabpanel" class="tab-pane" id="tab9a">Tab 9a content...</div>
<div role="tabpanel" class="tab-pane" id="tab9b">Tab 9b content...</div>
<div role="tabpanel" class="tab-pane" id="tab9c">Tab 9c content...</div>
<div role="tabpanel" class="tab-pane" id="tab10">Tab 10 content...</div>
<div role="tabpanel" class="tab-pane" id="tab11">Tab 11 content...</div>
<div role="tabpanel" class="tab-pane" id="tab12">Tab 12 content...</div>
<div role="tabpanel" class="tab-pane" id="tab13">Tab 13 content...</div>
<div role="tabpanel" class="tab-pane" id="tab14">Tab 14 content...</div>
<div role="tabpanel" class="tab-pane" id="tab15">Tab 15 content...</div>
<div role="tabpanel" class="tab-pane" id="tab16">Tab 16 content...</div>
</div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../dist/jquery.scrolling-tabs.js"></script>
<script>
;(function($) {
'use strict';
$('#btn-destroy').click(destroy);
$('#btn-refresh').click(refresh);
$(activate);
['<div class="clearfix pbs">',
' <svg class="icon icon-point-left">',
' <use xlink:href="#icon-point-left"></use>',
' </svg>',
'</div>'].join('')
function activate() {
$('.nav-tabs').scrollingTabs({
enableSwiping: true,
scrollToTabEdge: true,
disableScrollArrowsOnFullyScrolled: true,
leftArrowContent: [
'<div class="custom-arrow">',
' <svg class="icon icon-point-left">',
' <use xlink:href="#icon-point-left"></use>',
' </svg>',
'</div>'
].join(''),
rightArrowContent: [
'<div class="custom-arrow">',
' <svg class="icon icon-point-right">',
' <use xlink:href="#icon-point-right"></use>',
' </svg>',
'</div>'
].join('')
})
.on('ready.scrtabs', function() {
$('.tab-content').show();
});
}
function destroy() {
$('.nav-tabs').scrollingTabs('destroy');
}
function refresh() {
$('.nav-tabs').scrollingTabs('refresh');
}
}(jQuery));
</script>
</body>
</html>