Skip to content

Commit 0189b28

Browse files
mikejacobsonmikejacobson
committed
Restore pre-click-target markup-only.html
1 parent 0246b94 commit 0189b28

File tree

2 files changed

+165
-35
lines changed

2 files changed

+165
-35
lines changed

‎run/markup-only-with-click-target.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../dist/jquery.scrolling-tabs.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
9+
10+
<style>
11+
.left-side {
12+
width: 50%;
13+
}
14+
15+
.right-side {
16+
width: 50%;
17+
}
18+
19+
.st-demo-header {
20+
background-color: #666666;
21+
color: white;
22+
font-size: 24px;
23+
padding: 8px 24px;
24+
}
25+
26+
.st-demo-header button {
27+
color: black;
28+
font-size: 12px;
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
35+
<div class="st-demo-header">jquery-bootstrap-scrolling-tabs Demo - Markup Only
36+
<button type="button" id="btn-destroy">Destroy</button>
37+
<button type="button" id="btn-refresh">Refresh</button>
38+
<button id="btn-scroll">Scroll</button>
39+
</div>
40+
41+
42+
<!-- Nav tabs -->
43+
<ul class="nav nav-tabs" role="tablist" style="display: none">
44+
<li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
45+
<li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab Number 2</a></li>
46+
<li role="presentation" class="dropdown">
47+
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tab 3 Dropdown<span class=caret></span></a>
48+
<ul class="dropdown-menu">
49+
<li><a href="#tab3a" role="tab" data-toggle="tab">Tab 3a</a></li>
50+
<li><a href="#tab3b" role="tab" data-toggle="tab">Tab 3b</a></li>
51+
<li><a href="#tab3c" role="tab" data-toggle="tab">Tab 3c</a></li>
52+
<li role="separator" class="divider"></li>
53+
<li><a href="#">Separated link</a></li>
54+
</ul>
55+
</li>
56+
<li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab Number 4</a></li>
57+
<li role="presentation"><a href="#tab5" role="tab" data-toggle="tab">Tab Number 5</a></li>
58+
<li role="presentation"><a href="#tab6" role="tab" data-toggle="tab">Tab Number 6</a></li>
59+
<li role="presentation"><a href="#tab7" role="tab" data-toggle="tab">Tab Number 7</a></li>
60+
<li role="presentation"><a href="#tab8" role="tab" data-toggle="tab">Tab Number 8</a></li>
61+
<li role="presentation" class="dropdown">
62+
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tab 9 Dropdown<span class=caret></span></a>
63+
<ul class="dropdown-menu">
64+
<li><a href="#tab9a" role="tab" data-toggle="tab">Tab 9a</a></li>
65+
<li><a href="#tab9b" role="tab" data-toggle="tab">Tab 9b</a></li>
66+
<li><a href="#tab9c" role="tab" data-toggle="tab">Tab 9c</a></li>
67+
</ul>
68+
</li>
69+
<li role="presentation"><a href="#tab10" role="tab" data-toggle="tab">Tab Number 10</a></li>
70+
<li role="presentation"><a href="#tab11" role="tab" data-toggle="tab">Tab Number 11</a></li>
71+
<li role="presentation"><a href="#tab12" role="tab" data-toggle="tab">Tab Number 12</a></li>
72+
<li role="presentation"><a href="#tab13" role="tab" data-toggle="tab">Tab Number 13</a></li>
73+
<li role="presentation"><a href="#tab14" role="tab" data-toggle="tab">Tab Number 14</a></li>
74+
<li role="presentation"><a href="#tab15" role="tab" data-toggle="tab">Tab Number 15</a></li>
75+
<li role="presentation"><a href="#tab16" role="tab" data-toggle="tab">Tab Number 16</a></li>
76+
</ul>
77+
78+
<!-- Tab panes -->
79+
<div class="tab-content" style="display: none">
80+
<div role="tabpanel" class="tab-pane active" id="tab1">Tab 1 content...</div>
81+
<div role="tabpanel" class="tab-pane" id="tab2">Tab 2 content...</div>
82+
<div role="tabpanel" class="tab-pane" id="tab3">Tab 3 content...</div>
83+
<div role="tabpanel" class="tab-pane" id="tab3a">Tab 3a content...</div>
84+
<div role="tabpanel" class="tab-pane" id="tab3b">Tab 3b content...</div>
85+
<div role="tabpanel" class="tab-pane" id="tab3c">Tab 3c content...</div>
86+
<div role="tabpanel" class="tab-pane" id="tab4">Tab 4 content...</div>
87+
<div role="tabpanel" class="tab-pane" id="tab5">Tab 5 content...</div>
88+
<div role="tabpanel" class="tab-pane" id="tab6">Tab 6 content...</div>
89+
<div role="tabpanel" class="tab-pane" id="tab7">Tab 7 content...</div>
90+
<div role="tabpanel" class="tab-pane" id="tab8">Tab 8 content...</div>
91+
<div role="tabpanel" class="tab-pane" id="tab9">Tab 9 content...</div>
92+
<div role="tabpanel" class="tab-pane" id="tab9a">Tab 9a content...</div>
93+
<div role="tabpanel" class="tab-pane" id="tab9b">Tab 9b content...</div>
94+
<div role="tabpanel" class="tab-pane" id="tab9c">Tab 9c content...</div>
95+
<div role="tabpanel" class="tab-pane" id="tab10">Tab 10 content...</div>
96+
<div role="tabpanel" class="tab-pane" id="tab11">Tab 11 content...</div>
97+
<div role="tabpanel" class="tab-pane" id="tab12">Tab 12 content...</div>
98+
<div role="tabpanel" class="tab-pane" id="tab13">Tab 13 content...</div>
99+
<div role="tabpanel" class="tab-pane" id="tab14">Tab 14 content...</div>
100+
<div role="tabpanel" class="tab-pane" id="tab15">Tab 15 content...</div>
101+
<div role="tabpanel" class="tab-pane" id="tab16">Tab 16 content...</div>
102+
</div>
103+
104+
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
105+
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
106+
<script src="../dist/jquery.scrolling-tabs.js"></script>
107+
108+
<style>
109+
.scrtabs-tab-scroll-arrow {
110+
width: 60px;
111+
}
112+
.scrtabs-tab-scroll-arrow:hover {
113+
background-color: #fff;
114+
}
115+
</style>
116+
<script>
117+
;(function($) {
118+
'use strict';
119+
120+
$('#btn-destroy').click(destroy);
121+
$('#btn-refresh').click(refresh);
122+
$('#btn-scroll').click(() => {
123+
$('.nav-tabs').scrollingTabs('scrollToActiveTab');
124+
})
125+
126+
$(activate);
127+
128+
129+
function activate() {
130+
$('.nav-tabs').scrollingTabs({
131+
enableSwiping: true,
132+
scrollToTabEdge: true,
133+
disableScrollArrowsOnFullyScrolled: true,
134+
leftArrowContent: `
135+
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">
136+
<button class="scrtabs-click-target" type="button">
137+
<i class="mdi mdi-chevron-left mdi-24px">LFT</i>
138+
</button>
139+
</div>`,
140+
rightArrowContent: `
141+
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">
142+
<button class="scrtabs-click-target" type="button">
143+
<i class="mdi mdi-chevron-left mdi-24px">RGT</i>
144+
</button>
145+
</div>`
146+
})
147+
.on('ready.scrtabs', function() {
148+
$('.tab-content').show();
149+
});
150+
}
151+
152+
function destroy() {
153+
$('.nav-tabs').scrollingTabs('destroy');
154+
}
155+
156+
function refresh() {
157+
$('.nav-tabs').scrollingTabs('refresh');
158+
}
159+
160+
}(jQuery));
161+
</script>
162+
</body>
163+
164+
</html>

‎run/markup-only.html‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,15 @@
1111
.left-side {
1212
width: 50%;
1313
}
14-
1514
.right-side {
1615
width: 50%;
1716
}
18-
1917
.st-demo-header {
2018
background-color: #666666;
2119
color: white;
2220
font-size: 24px;
2321
padding: 8px 24px;
2422
}
25-
2623
.st-demo-header button {
2724
color: black;
2825
font-size: 12px;
@@ -35,7 +32,6 @@
3532
<div class="st-demo-header">jquery-bootstrap-scrolling-tabs Demo - Markup Only
3633
<button type="button" id="btn-destroy">Destroy</button>
3734
<button type="button" id="btn-refresh">Refresh</button>
38-
<button id="btn-scroll">Scroll</button>
3935
</div>
4036

4137

@@ -105,58 +101,28 @@
105101
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
106102
<script src="../dist/jquery.scrolling-tabs.js"></script>
107103

108-
<style>
109-
.scrtabs-tab-scroll-arrow {
110-
width: 60px;
111-
}
112-
.scrtabs-tab-scroll-arrow:hover {
113-
background-color: #fff;
114-
}
115-
</style>
116104
<script>
117105
;(function($) {
118106
'use strict';
119-
120107
$('#btn-destroy').click(destroy);
121108
$('#btn-refresh').click(refresh);
122-
$('#btn-scroll').click(() => {
123-
$('.nav-tabs').scrollingTabs('scrollToActiveTab');
124-
})
125-
126109
$(activate);
127-
128-
129110
function activate() {
130111
$('.nav-tabs').scrollingTabs({
131112
enableSwiping: true,
132113
scrollToTabEdge: true,
133-
disableScrollArrowsOnFullyScrolled: true,
134-
leftArrowContent: `
135-
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">
136-
<button class="scrtabs-click-target" type="button">
137-
<i class="mdi mdi-chevron-left mdi-24px">LFT</i>
138-
</button>
139-
</div>`,
140-
rightArrowContent: `
141-
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">
142-
<button class="scrtabs-click-target" type="button">
143-
<i class="mdi mdi-chevron-left mdi-24px">RGT</i>
144-
</button>
145-
</div>`
114+
disableScrollArrowsOnFullyScrolled: true
146115
})
147116
.on('ready.scrtabs', function() {
148117
$('.tab-content').show();
149118
});
150119
}
151-
152120
function destroy() {
153121
$('.nav-tabs').scrollingTabs('destroy');
154122
}
155-
156123
function refresh() {
157124
$('.nav-tabs').scrollingTabs('refresh');
158125
}
159-
160126
}(jQuery));
161127
</script>
162128
</body>

0 commit comments

Comments
 (0)