А именно:
- Создание каждой вкладки одним элементом
<article data-tab-name="Название">Текст</article>без использования отдельного блока для названий, что упростит использование в бэкенде - Если заголовки вкладок не умещаются в его контейнере, они переключаются в мобильную версию (друг под другом)
- Малые, но полезные настройки
- Небольшой размер
Оригинальная версия:
А ниже предствлена версия с небольшими изменениями.
Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="openTabby"> <div class="openTabby--slidesContainer"> <article data-tab-name="Вкладка 1" class="openTabby--slide"> <p>Описание вкладки</p> </article> <!-- Еще вкладки --> <article data-tab-name="Вкладка N" class="openTabby--slide"> <p>Описание вкладки</p> </article> </div> </div> |
Где атрибут data-tab-name - название вкладки
CSS:
|
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
.openTabby, .openTabby * { box-sizing: border-box; } .openTabby { overflow: hidden; margin: 20px 0; } .openTabby .openTabby--nav { position: relative; display: none; width: 10000px; } .openTabby .openTabby--nav:after { display: block; content: ""; clear: both; } .openTabby .openTabby--nav ul { float: left; display: table; margin: 0; padding: 0; } .openTabby .openTabby--nav ul:after { display: block; content: ""; clear: both; } .openTabby .openTabby--nav ul li { float: left; cursor: pointer; list-style: none; line-height: 3; padding: 0 20px; color: #666; font-weight: 600; border: 2px solid transparent; position: relative; top: 2px; z-index: 2; text-transform: uppercase; font-family: Verdana, sans-serif; } .openTabby .openTabby--nav ul li:hover { color: #337AB7; } .openTabby .openTabby--nav ul li.active { color: #337AB7; background: #fff; border: 2px solid #BFE2FF; border-radius: 8px 8px 0 0; border-bottom: 2px solid #FFF; cursor: default; } .openTabby .openTabby--slidesContainer { background-color: #fff; display: table; position: relative; overflow: scroll; } .openTabby .openTabby--slidesContainer .openTabby--slide { padding: 20px; background: #fff; width: 100%; overflow: scroll; } .openTabby.accordion .openTabby--nav ul { padding: 20px; } .js .openTabby .openTabby--nav { display: block; top: 0; } .js .openTabby .openTabby--slidesContainer { display: block; } .js .openTabby .openTabby--slidesContainer .openTabby--slide { position: absolute; top: 0; left: 0; opacity: 0; } .js .openTabby .openTabby--slidesContainer .openTabby--slide.active { opacity: 1; z-index: 1; } .js .openTabby.csstransitions .openTabby--nav ul li { transition: all 0.3s ease 0s; } .js .openTabby.csstransitions .openTabby--slidesContainer { transition: all 0.3s ease 0s; } .js .openTabby.csstransitions .openTabby--slidesContainer .openTabby--slide { transition: all 0.3s ease 0s; } .openTabby .effect-fade .openTabby--slide { opacity: 0; } .openTabby .effect-fade .openTabby--slide.active { opacity: 1; } .openTabby .effect-shrink .openTabby--slide { transform: scale(0.6); } .openTabby .effect-shrink .openTabby--slide.active { transform: scale(1); } .openTabby .effect-grow .openTabby--slide { transform: scale(1.4); } .openTabby .effect-grow .openTabby--slide.active { transform: scale(1); } .openTabby .effect-slide-left .openTabby--slide { transform: translate(-100%, 0); } .openTabby .effect-slide-left .openTabby--slide.active { transform: translate(0, 0); } .openTabby .effect-slide-right .openTabby--slide { transform: translate(100%, 0); } .openTabby .effect-slide-right .openTabby--slide.active { transform: translate(0, 0); } .openTabby .effect-slide-up .openTabby--slide { transform: translate(0, 100%); } .openTabby .effect-slide-up .openTabby--slide.active { transform: translate(0, 0); } .openTabby .effect-slide-down .openTabby--slide { transform: translate(0, -100%); } .openTabby .effect-slide-down .openTabby--slide.active { transform: translate(0, 0); } .openTabby .effect-flip-vertical .openTabby--slide { transform: rotateX(180deg); } .openTabby .effect-flip-vertical .openTabby--slide.active { transform: rotateX(0); } .openTabby .effect-flip-horizontal .openTabby--slide { transform: rotateY(180deg); } .openTabby .effect-flip-horizontal .openTabby--slide.active { transform: rotateY(0); } .openTabby .effect-rotate .openTabby--slide { transform: rotateZ(360deg); } .openTabby .effect-rotate .openTabby--slide.active { transform: rotateZ(0); } .js .openTabby.responsive .openTabby--slidesContainer { overflow: hidden; border: 2px solid #BFE2FF; } .js .openTabby.responsive .openTabby--slidesContainer .openTabby--slide { display: table; overflow: hidden; } .js .openTabby.accordion .openTabby--nav { width: auto; } .js .openTabby.accordion .openTabby--nav ul { width: 100%; } .js .openTabby.accordion .openTabby--nav ul li { width: 100%; float: none; display: block; text-align: center; } .openTabby.accordion .openTabby--nav ul li.active { border-bottom: 2px solid #BFE2FF; } |
JS:
- Проверяем есть ли библиотека jQuery (если нет, то лучше использовать другое решение)
- Если есть, то подключаем скрипт плагина
|
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
/* Twitter : @MichMammoliti Github : @MichaelMammoliti Plugin Name : openTabby.js Version : 0.1 Date : 2015-09-14 Released under the GPLv2 license https://github.com/MichaelMammoliti/openTabby.js */ (function ( $, window, document, undefined ) { var pluginName = "openTabby", defaults = { width: 540, height: 500, responsive: true, defSlide: 1, cssTransition: "fade", defTabText: "Tab", accordionView: false, accordionDefWidth: undefined, jsMode: true }; function Plugin( context, options ) { this.settings = $.extend({}, defaults, options); this.current = this.settings.defSlide - 1; this.timer; this.$context = $(context); this.$nav = undefined; this.$slidesContainer = this.$context.find("." + pluginName + "--slidesContainer"); this.$slides = this.$slidesContainer.find("." + pluginName + "--slide"); this.init(); } Plugin.prototype = { init: function() { var self = this, navWidth; if( !self.settings.jsMode ) return; this.appendTabs(); this.applyClasses(); this.handleEvents(); this.activateSlide(); this.resizeContainer(); this.setTransition(); this.accordion(); }, handleEvents: function() { var self = this; self.$nav.on("click", "li", function(){ self.clickOnTab( $(this) ); }); $(window).resize(function(){ self.toggleTransition(); self.resizeContainer(); self.accordion(); }); }, clickOnTab: function( $el ) { var self = this, index = $el.index(); self.current = index; self.setTransition(); self.activateSlide(); self.resizeContainer(); }, applyClasses: function() { var self = this; $("html").addClass("js"); if( self.settings.responsive ) self.$context.addClass("responsive"); if( self.settings.cssTransition ) self.$context.addClass("csstransitions"); if( self.settings.accordionView ) self.$context.addClass("accordion"); }, resizeContainer: function() { var self = this, h, w; if( self.settings.responsive ) { h = self.$slides.eq(self.current).outerHeight(); w = "100%"; } else { w = self.settings.width; h = self.settings.height; self.$slides.css({ "height": h }); } self.$slidesContainer.css({ "width": w, "height": h }); }, activateSlide: function() { var self = this, index = self.current, className = "active", $slidesContainer = self.$slides, $lis = self.$nav.find("li"); $lis.removeClass(className); $lis.eq(index).addClass(className); $slidesContainer.removeClass(className); $slidesContainer.eq(index).addClass(className); }, setTransition: function() { var self = this, fx; if( !self.settings.cssTransition ) return; fx = "effect-" + self.settings.cssTransition; self.$slidesContainer.addClass( fx ); }, appendTabs: function() { var self = this, htmlString = "", template = "<div class='" + pluginName + "--nav'><ul></ul></div>", $template = $(template).prependTo( self.$context ), prefix = self.settings.tabTextPrefix + " ", title, i = 0; self.$nav = $template; $.each( self.$slides, function(){ i++; title = $(this).data("tab-name") || self.settings.defTabText + " " + i; htmlString += "<li>" + title + "</li>"; }); self.$nav.children("ul").append( htmlString ); self.$nav = $template.children("ul"); }, toggleTransition: function() { var self = this; if( !self.settings.cssTransition ) return; self.$context.removeClass("csstransitions"); clearTimeout(self.timer); self.timer = setTimeout(function(){ self.$context.addClass("csstransitions"); }, 200); }, accordion: function() { var self = this; if( self.settings.accordionView === "always" ) return; if( !self.settings.accordionDefWidth ) self.settings.accordionDefWidth = self.$nav.outerWidth(); ( self.$context.outerWidth() <= self.settings.accordionDefWidth ) ? self.settings.accordionView = true : self.settings.accordionView = false; ( self.settings.accordionView === true ) ? self.$context.addClass("accordion") : self.$context.removeClass("accordion"); } }; // end of Plugin.prototype $.fn[pluginName] = function ( options ) { return this.each(function() { new Plugin( this, options ); }); }; })( jQuery, window, document ); |
И инициализируем:
$(".openTabby").openTabby();
Или с настройками, например:
$(".openTabby").openTabby({
defSlide: 2 //Активная вкладка
});
Автор: Michael Mammoliti
openTabby на github
Подскажите пожалуйста. Если вставить фото в первую вкладку, то при загрузке страницы высота неполная пока клик не сделаешь. Как можно пофиксить?
На самом деле вроде разобрался, но если фотки по разной высоте будут, то уже так не поиграешь.
Нужно инициировать плагин после полной загрузки документа (с картинками), например так:
$(window).on('load', function () { $(".openTabby").openTabby(); });Как всегда респект за помощь. Добрался таки до страницы переделать эту заморочку. Фотки так подгружаются и сразу отображаются, но вот менюшка дублируется. Понятно куда копать, как пойдет неизвестно)
ммм вместо активной вкладки)