Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function ($) {
- var settings = {
- barheight: 38
- }
- $.fn.scrollabletab = function (options) {
- var ops = $.extend(settings, options);
- var ul = this.children('ul').first();
- var ulHtmlOld = ul.html();
- var tabBarWidth = $(this).width()-60;
- ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
- ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
- var leftArrow = ul.children().last();
- leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
- leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');
- ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
- var rightArrow = ul.children().last();
- rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
- rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');
- var moveable = ul.find('.moveableContainer').first();
- leftArrow.click(function () {
- var offset = tabBarWidth / 6;
- var currentPosition = moveable.css('left').replace('px', '') / 1;
- if (currentPosition + offset >= 0) {
- moveable.stop().animate({ left: '0' }, 'slow');
- }
- else {
- moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
- }
- });
- rightArrow.click(function () {
- var offset = tabBarWidth / 6;
- var currentPosition = moveable.css('left').replace('px', '') / 1;
- var tabsRealWidth = 0;
- ul.find('li').each(function (index, element) {
- tabsRealWidth += $(element).width();
- tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
- });
- tabsRealWidth *= -1;
- if (currentPosition - tabBarWidth > tabsRealWidth) {
- moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
- }
- });
- return this;
- }; })(jQuery);
- $("#tabs").tabs({
- overflowTabs: true,
- tabPadding: 23,
- containerPadding: 40,
- dropdownSize: 50
- });
- <div id="js_image_selection" class="horizontal-scrollable-tabs">
- <div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
- <div class="scroller arrow-right"><i class="fa fa-arrow-right"></i></div>
- <div class="horizontal-tabs">
- <ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
- <li role="presentation" class="active"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
- <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
- <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
- <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
- <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
- <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
- <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
- <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
- <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
- </ul>
- </div>
- </div>
- $("#js_image_selection").horizontalTabs();
- if(!$(".fixedContainer").length) {
- ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
- ul.append('<div class="leftBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
- var leftArrow = ul.children().last();
- leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
- leftArrow.children('.ui-icon-carat-1-w').first().css('text-align', 'center');
- ul.append('<div class="rightBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
- var rightArrow = ul.children().last();
- rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
- rightArrow.children('.ui-icon-carat-1-e').first().css('text-align', 'center');
- } else {
- var leftArrow = $(".leftBtn");
- var rightArrow = $(".rightBtn");
- $(".fixedContainer").css("width", tabBarWidth);
- }
- $(window).resize(function(e){
- $("#tabs").scrollabletab();
- });
- $( ".tabpanel" ).tabs().tabs('overflowResize');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement