https://www.aldec.com/js/nt/crumbs.js

1$('document').ready(function() {
2    breadcrumbsSwitcher = new tabSwitcher();
3    breadcrumbsSwitcher.initialize($('.contentHeader:first'));
4    breadcrumbsSwitcher.handleTabsWidth();
5
6    $(window).bind("resize", function()
7    {
8        breadcrumbsSwitcher.handleContainerResize();
9    });
10    $('#crumbs').scroll(function() {
11        breadcrumbsSwitcher.handleScroll();
12    });
13});
14
15
16
17
18
19
20
21function tabSwitcher()
22{
23    this.crumbs = null;
24    this.butOuterWidth = null,
25            this.prevBut = null,
26            this.nextBut = null,
27            this.leftTabLimit = null,
28            this.rightTabLimit = null,
29            this.wraper = null,
30            this.firstTab = null,
31            this.lastTab = null,
32            this.start = 0, // Id of the first visible tab on the left
33            this.end = 0, // Id of the first visible tab on the right
34            this.count = null,
35            this.initialize = function(ulWrapper)
36            {
37                this.crumbs = $(ulWrapper).find('#crumbs');
38
39                this.crumbs.parent().css('background', $('.ui-widget-header').css('background'));
40
41
42                // save references
43                this.wrapper = this.crumbs.parent();
44                this.prevBut = this.wrapper.find('.crumbs-arrow-prev');
45                this.nextBut = this.wrapper.find('.crumbs-arrow-next:first');
46
47                // add values to variables
48                this.count = this.crumbs.find('a').length;
49                this.butOuterWidth = this.prevBut.outerWidth();
50
51                if (this.count > 0) {
52                    this.handleTabsWidth();
53                }
54                // bind click action to next and prev buttons(switch-buttons)
55                this.prevBut.click({parent: this}, this.clickMoveRight);
56                this.nextBut.click({parent: this}, this.clickMoveLeft);
57
58            },
59            this._getCrumbsInnerWidth = function() {
60                var width = this.firstTab.offset().left + this.lastTab.offset().left + this.lastTab.outerWidth();
61
62            },
63            this.clickMoveLeft = function(event) {
64                event.data.parent.moveLeft();
65
66            },
67            this.clickMoveRight = function(event) {
68                event.data.parent.moveRight();
69            },
70            this.handleTabsWidth = function()
71            {
72                if (this.crumbs !== null)
73                {
74                    this.count = this.crumbs.find('a').length;
75                    this.firstTab = this.crumbs.find('a:first');
76                    this.lastTab = this.crumbs.find('a:last');
77                    this._recalcTabsLimits();
78                    this.end = this._getLastTabId();
79                    this._handleScrollButtonsDisplaing();
80                }
81            },
82            this.handleScroll = function() {
83                if (this.crumbs.scrollLeft() == 0) {
84                    this.prevBut.css('display', 'none');
85                } else {
86                    this.prevBut.css('display', 'inline-block');
87
88                }
89
90                if (this.lastTab.offset().left + this.lastTab.outerWidth() <= this.rightTabLimit) {
91                    this.nextBut.css('display', 'none');
92
93                } else {
94                    this.nextBut.css('display', 'inline-block');
95
96                }
97                
98                this._recalcTabsLimits();
99                this.start = this._getFirstTabId();
100                this.end = this._getLastTabId();
101
102            }
103    this.handleContainerResize = function()
104    {
105        this._recalcTabsLimits();
106        this.start = this._getFirstTabId();
107        this.end = this._getLastTabId();
108        this._handleScrollButtonsDisplaing();
109
110        if (!this._isFirstTabVisible() && this._isLastTabVisible()) {
111            var additionalMargin = parseInt(this.lastTab.offset().left + this.lastTab.outerWidth() - this.rightTabLimit);
112            var currentMargin = parseInt(this.firstTab.css('marginLeft'));
113            var newMargin = currentMargin - additionalMargin - 2;
114
115            if (newMargin > 0)
116                newMargin = 0;
117
118            this.firstTab.css({'margin-left': newMargin + 'px'});
119        }
120    },
121            this._handleScrollButtonsDisplaing = function()
122            {
123                if (this.count > 1)
124                {
125                    if (this._isFirstTabVisible())
126                    {
127                        // hide prev button
128                        this.prevBut.css('display', 'none');
129                    }
130                    else
131                    {
132                        // show prev button
133                        this.prevBut.css('display', 'inline-block');
134
135                    }
136                    if (this._isLastTabVisible())
137                    {
138                        // hide next but
139                        this.nextBut.css('display', 'none');
140                    }
141                    else
142                    {
143                        // show next but
144                        this.nextBut.css('display', 'inline-block');
145                    }
146                }
147                else
148                {
149                    this.nextBut.css('display', 'none');
150                    this.prevBut.css('display', 'none');
151                }
152            },
153            this._isFirstTabVisible = function()
154            {
155                if (parseInt(this.firstTab.css('margin-left')) > -2)
156                {
157                    return true;
158                }
159                else
160                {
161                    return false;

162                }
163            },
164            this._isLastTabVisible = function()
165            {
166                if (parseInt(this.lastTab.outerWidth()) + parseInt(this.lastTab.offset().left) < this.rightTabLimit)
167                {
168                    return true;
169                }
170                else
171                {
172                    return false;
173                }
174            },
175            this._recalcTabsLimits = function()
176            {
177                this.leftTabLimit = this.wrapper.offset().left + this.butOuterWidth + 1;
178                this.rightTabLimit = this.wrapper.offset().left + this.wrapper.outerWidth();
179            },
180            this.moveLeft = function()
181            {
182                var tabEnd = this.crumbs.find('a:eq(' + (this.end + 1) + ')');
183                var correction = 0;
184                if (tabEnd.length == 0) {
185                    tabEnd = this.lastTab;
186                }
187                if (this.lastTab.attr('href') == tabEnd.attr('href')) {
188                    correction = -12;
189                }
190
191                var additionalMargin = parseInt(tabEnd.offset().left + tabEnd.outerWidth() - this.nextBut.offset().left) + 1 + correction;
192                var currentMargin = parseInt(this.firstTab.css('marginLeft'));
193                var currentScroll = this.crumbs.scrollLeft();
194
195                this.end++;
196                this.crumbs.stop(true).animate({scrollLeft: (currentScroll + additionalMargin)}, (
197                        function($this)
198                        {
199                            return function()
200                            {
201                                $this.start = $this._getFirstTabId();
202                                if ($this.start > 0) {
203                                    $this.prevBut.css('display', 'inline-block');
204                                }
205
206                                if ($this.end + 1 >= $this.count)
207                                    $this.nextBut.css('display', 'none');
208                            }
209                        })(this));
210            };
211
212    this.moveRight = function()
213    {
214        var tabStart = this.crumbs.find('a:eq(' + (this.start - 1) + ')');
215        var correction = 14;
216        if (tabStart.length == 0) {
217            tabStart = this.firstTab;
218        }
219        if (this.firstTab.attr('href') == tabStart.attr('href')) {
220            correction = -12;
221        }
222
223        var additionalMargin = parseInt(this.leftTabLimit - parseInt(tabStart.offset().left)) + correction;
224        var currentMargin = parseInt(this.firstTab.css('marginLeft'));
225        var currentScroll = this.crumbs.scrollLeft();
226        this.start--;
227        this.crumbs.stop(true).animate({scrollLeft: (currentScroll - additionalMargin)}, (
228                function($this)
229                {
230                    return function()
231                    {
232                        $this.end = $this._getLastTabId();
233
234                        if ($this.end + 1 < $this.count)
235                            $this.nextBut.css('display', 'inline-block');
236
237                        if ($this.start - 1 < 0) {
238                            $this.prevBut.css('display', 'none')
239                        }
240                    }
241                })(this));
242
243    },
244            this._getLastTabId = function()
245            {
246                var width = 0;
247                var pos = 0;
248                var $this = this;
249                var end = 0;
250                var $this = this;
251
252                this.crumbs.find('a').each(function()
253                {
254                    if (parseInt($(this).outerWidth()) + parseInt($(this).offset().left) > $this.rightTabLimit)
255                    {
256
257                        if (pos == $this.start)
258                            pos = $this.start + 1;
259                        return true;
260                    }
261                    pos++;
262                });
263
264                return --pos;
265            },
266            this._getFirstTabId = function()
267            {
268                var pos = 0;
269                var $this = this;
270
271                this.crumbs.find('a').each(function()
272                {
273                    if (parseInt($(this).offset().left) >= $this.leftTabLimit)
274                    {
275
276                        if (pos >= $this.end)
277                            pos = $this.end;
278                        pos++;
279                        return false;

280                    }
281                    pos++;
282                });
283
284                return --pos;
285            }
286}