-
Notifications
You must be signed in to change notification settings - Fork 15
/
bootstrap-nav-tab-scrollable.js
91 lines (76 loc) · 2.36 KB
/
bootstrap-nav-tab-scrollable.js
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
// Add Horizontal Tabs to jquery
(function ($){
$.fn.horizontalTabs = function() {
// Variable creation
var $elem = $(this),
widthOfReducedList = $elem.find('.nav-tabs-horizontal').width(),
widthOfList = 0,
currentPos = 0,
adjustScroll = function () {
widthOfList = 0;
$elem.find('.nav-tabs-horizontal li').each(function(index, item) {
widthOfList += $(item).width();
});
widthAvailale = $elem.width();
if (widthOfList > widthAvailale) {
$elem.find('.scroller').show();
updateArrowStyle(currentPos);
widthOfReducedList = $elem.find('.nav-tabs-horizontal').width();
} else {
$elem.find('.scroller').hide();
}
},
scrollLeft = function () {
$elem.find('.nav-tabs-horizontal').animate({
scrollLeft: currentPos - widthOfReducedList
}, 500);
if (currentPos - widthOfReducedList > 0) {
currentPos -= widthOfReducedList;
} else {
currentPos = 0;
}
},
scrollRight = function () {
$elem.find('.nav-tabs-horizontal').animate({
scrollLeft: currentPos + widthOfReducedList
}, 500);
if ( (currentPos + widthOfReducedList) < (widthOfList - widthOfReducedList)) {
currentPos += widthOfReducedList;
} else {
currentPos = (widthOfList - widthOfReducedList);
}
},
manualScroll = function () {
currentPos = $elem.find('.nav-tabs-horizontal').scrollLeft();
updateArrowStyle(currentPos);
},
updateArrowStyle = function (position) {
if (position >= (widthOfList - widthOfReducedList)) {
$elem.find('.arrow-right').addClass('disabled');
} else {
$elem.find('.arrow-right').removeClass('disabled');
};
if (position <= 0) {
$elem.find('.arrow-left').addClass('disabled');
} else {
$elem.find('.arrow-left').removeClass('disabled');
};
};
// Event binding
$(window).resize( function () {
adjustScroll();
});
$elem.find('.arrow-left').on('click.horizontalTabs', function (){
scrollLeft();
});
$elem.find('.arrow-right').on('click.horizontalTabs', function (){
scrollRight();
});
$elem.find('.nav-tabs-horizontal').scroll( function (){
manualScroll();
});
// Initial Call
adjustScroll();
return this;
}
}(window.jQuery));