Skip to content

Commit 56aceca

Browse files
mikejacobsonmikejacobson
committed
Change scrtabs-click-target from attr to class
Also add documentation for the new feature.
1 parent 1883a72 commit 56aceca

9 files changed

+80
-16
lines changed

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -445,6 +445,28 @@ $('#tabs-inside-here').scrollingTabs({
445445
You would then need to add some CSS to make them work correctly if you don't give them the default `scrtabs-tab-scroll-arrow` classes. This plunk shows it working with svg icons:
446446
http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
447447

448+
When using this option, you can also mark a child element within the arrow content as the click target if you don't want the entire content to be clickable. You do that my adding the CSS class `scrtabs-click-target` to the element that should be clickable, like so:
449+
450+
```javascript
451+
$('#tabs-inside-here').scrollingTabs({
452+
tabs: myTabs,
453+
leftArrowContent: [
454+
'<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">',
455+
' <button class="scrtabs-click-target" type="button">',
456+
' <i class="custom-chevron-left"></i>',
457+
' </button>',
458+
'</div>'
459+
].join(''),
460+
rightArrowContent: [
461+
'<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">',
462+
' <button class="scrtabs-click-target" type="button">',
463+
' <i class="custom-chevron-right"></i>',
464+
' </button>',
465+
'</div>'
466+
].join('')
467+
});
468+
```
469+
448470

449471
#### <a id="customTabLiContent"></a>Custom Tab LI content
450472

‎dist/jquery.scrolling-tabs.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,14 @@
4747
background-color: #eeeeee; }
4848

4949
.scrtabs-tab-scroll-arrow,
50-
.scrtabs-tab-scroll-arrow [scrtabs-click-target],
51-
.scrtabs-tab-scroll-arrow [data-scrtabs-click-target] {
50+
.scrtabs-tab-scroll-arrow .scrtabs-click-target {
5251
cursor: pointer; }
5352

5453
.scrtabs-tab-scroll-arrow.scrtabs-with-click-target {
5554
cursor: default; }
5655

5756
.scrtabs-tab-scroll-arrow.scrtabs-disable,
58-
.scrtabs-tab-scroll-arrow.scrtabs-disable [scrtabs-click-target],
59-
.scrtabs-tab-scroll-arrow.scrtabs-disable [data-scrtabs-click-target] {
57+
.scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target {
6058
color: #ddd;
6159
cursor: default; }
6260

‎dist/jquery.scrolling-tabs.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,29 @@
176176
* default scrtabs-tab-scroll-arrow classes.
177177
* This plunk shows it working with svg icons:
178178
* http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
179+
*
180+
* When using this option, you can also mark a child
181+
* element within the arrow content as the click target
182+
* if you don't want the entire content to be
183+
* clickable. You do that my adding the CSS class
184+
* 'scrtabs-click-target' to the element that should
185+
* be clickable, like so:
186+
*
187+
* leftArrowContent: [
188+
* '<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">',
189+
* ' <button class="scrtabs-click-target" type="button">',
190+
* ' <i class="custom-chevron-left"></i>',
191+
* ' </button>',
192+
* '</div>'
193+
* ].join(''),
194+
* rightArrowContent: [
195+
* '<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">',
196+
* ' <button class="scrtabs-click-target" type="button">',
197+
* ' <i class="custom-chevron-right"></i>',
198+
* ' </button>',
199+
* '</div>'
200+
* ].join('')
201+
*
179202
* enableRtlSupport:
180203
* set to true if you want your site to support
181204
* right-to-left languages. If true, the plugin will
@@ -477,11 +500,11 @@
477500

478501
// if we have custom arrow content, we might have a click target defined
479502
if (settings.leftArrowContent) {
480-
$leftArrowClickTarget = $leftArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
503+
$leftArrowClickTarget = $leftArrow.find('.scrtabs-click-target');
481504
}
482505

483506
if (settings.rightArrowContent) {
484-
$rightArrowClickTarget = $rightArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
507+
$rightArrowClickTarget = $rightArrow.find('.scrtabs-click-target');
485508
}
486509

487510
if ($leftArrowClickTarget && $leftArrowClickTarget.length) {

‎dist/jquery.scrolling-tabs.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/jquery.scrolling-tabs.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎run/markup-only.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,13 @@
133133
disableScrollArrowsOnFullyScrolled: true,
134134
leftArrowContent: `
135135
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">
136-
<button data-scrtabs-click-target type="button">
136+
<button class="scrtabs-click-target" type="button">
137137
<i class="mdi mdi-chevron-left mdi-24px">LFT</i>
138138
</button>
139139
</div>`,
140140
rightArrowContent: `
141141
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">
142-
<button data-scrtabs-click-target type="button">
142+
<button class="scrtabs-click-target" type="button">
143143
<i class="mdi mdi-chevron-left mdi-24px">RGT</i>
144144
</button>
145145
</div>`

‎src/js/elementsHandler.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,11 @@ function ElementsHandler(scrollingTabsControl) {
142142

143143
// if we have custom arrow content, we might have a click target defined
144144
if (settings.leftArrowContent) {
145-
$leftArrowClickTarget = $leftArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
145+
$leftArrowClickTarget = $leftArrow.find('.scrtabs-click-target');
146146
}
147147

148148
if (settings.rightArrowContent) {
149-
$rightArrowClickTarget = $rightArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
149+
$rightArrowClickTarget = $rightArrow.find('.scrtabs-click-target');
150150
}
151151

152152
if ($leftArrowClickTarget && $leftArrowClickTarget.length) {

‎src/js/usage.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,29 @@
169169
* default scrtabs-tab-scroll-arrow classes.
170170
* This plunk shows it working with svg icons:
171171
* http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
172+
*
173+
* When using this option, you can also mark a child
174+
* element within the arrow content as the click target
175+
* if you don't want the entire content to be
176+
* clickable. You do that my adding the CSS class
177+
* 'scrtabs-click-target' to the element that should
178+
* be clickable, like so:
179+
*
180+
* leftArrowContent: [
181+
* '<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">',
182+
* ' <button class="scrtabs-click-target" type="button">',
183+
* ' <i class="custom-chevron-left"></i>',
184+
* ' </button>',
185+
* '</div>'
186+
* ].join(''),
187+
* rightArrowContent: [
188+
* '<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">',
189+
* ' <button class="scrtabs-click-target" type="button">',
190+
* ' <i class="custom-chevron-right"></i>',
191+
* ' </button>',
192+
* '</div>'
193+
* ].join('')
194+
*
172195
* enableRtlSupport:
173196
* set to true if you want your site to support
174197
* right-to-left languages. If true, the plugin will

‎src/scss/jquery.scrolling-tabs.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@ $scrtabs-background-color-hover: rgb(238, 238, 238) !default;
6565
}
6666

6767
.scrtabs-tab-scroll-arrow,
68-
.scrtabs-tab-scroll-arrow [scrtabs-click-target],
69-
.scrtabs-tab-scroll-arrow [data-scrtabs-click-target] {
68+
.scrtabs-tab-scroll-arrow .scrtabs-click-target {
7069
cursor: pointer;
7170
}
7271

@@ -75,8 +74,7 @@ $scrtabs-background-color-hover: rgb(238, 238, 238) !default;
7574
}
7675

7776
.scrtabs-tab-scroll-arrow.scrtabs-disable,
78-
.scrtabs-tab-scroll-arrow.scrtabs-disable [scrtabs-click-target],
79-
.scrtabs-tab-scroll-arrow.scrtabs-disable [data-scrtabs-click-target] {
77+
.scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target {
8078
color: #ddd;
8179
cursor: default;
8280
}

0 commit comments

Comments
 (0)