Posted 29 ноября, 20158 yr comment_96654 Просмотр файла Category Tabs by IPS Themes Category Tabs for IPS Community Suite 4 is a simple plugin that will convert all or specific forum categories into a tab system. Clicking a new tab will hide the currently shown category and then instantly load the new one. Category Tabs is fully responsive and comes shipped with five different tab styles. Features Five unique themes to choose from Add an "All" tab which will show all categories Choose which groups have access to Category Tabs. Assign specific categories to tabs. Align the tabs left, right or center. Integrated with IPS4 Localization Coming Soon Additional themes Unique icons per tab Добавил http1 Добавлено 29.11.2015 Категория Интерфейс Язык Язык: EN
2 марта, 20177 yr comment_124315 2 часа назад, Sipsb сказал: Вы на год смотрели? А год здесь при чем, тема в IPS за это время особо не менялась, а модулю большего и не надо. В общем, переделал его немного, чтоб можно было использовать "спокойнее" (без этой вкладки с ключом) и вроде как "чистый" вариант получается... Автор зашифровал JS и CSS в своем модуле, непонятно только для чего, если только совсем от школьников... Ибо тот же DevToosl в Хроме все прекрасно дешифрует и показывает. Итак, переходим в редактирование темы: forums/front/index/index и после строки (в самом начале): {template="pageHeader" group="global" app="core" params="\IPS\Member::loggedIn()->language()->addToStack('forums')"} Вставляем код: <div id="catTabs" class="ipsthemesCategoryTabs ipsTabs ipsClearfix theme1 pos1" data-nodes="3,15,20,25,30,1" data-alltab="{"enabled":"1","lang":"Все разделы"}" data-controller="plugins.ipsthemesCategoryTabs"><ol role="tablist"><li><a href="#" class="tab-all ipsTabs_item ipsTabs_activeItem"></a></li></ol></div> Основные параметры:data-nodes= здесь перечислены ID категорий - которые хотим показать во вкладкахdata-alltab= выводит самым первым вкладку на все разделы, если не нужна - можно вообще этот параметр удалить Ну и скрипт со стилем, думаю тут уже понятно где подключать.. Спойлер <script> (function($, _, undefined) { "use strict"; ips.controller.register('plugins.ipsthemesCategoryTabs', { initialize: function() { var self = this; self.container = self.scope, self.nodeIDs = self.container.data('nodes'), self.all_tab = self.container.data('alltab'), self.nodeArray = self.nodeIDs.indexOf(',') === -1 ? false : self.nodeIDs.split(','); self.cats = []; if (!self.nodeArray) { self.container.remove(); return; } for (var i = 0; i < self.nodeArray.length; i++) { self.cats.push('.cForumList > li[data-categoryid="' + self.nodeArray[i] + '"]'); } self.cats = $(self.cats.join(',')); self.buildTabs().then(self.setupEvents()).then(function() { self.container.find("li:first-child a").trigger("click"); }); }, buildTabs: function() { var d = $.Deferred(), self = this; self.cats.not(':first').hide(); self.cats.each(function() { var t = $(this), anch = t.find('.cForumTitle a:last-child').eq(0).clone().addClass('ipsTabs_item'), unread = t.find(".ipsDataItem_unread").length != 0 ? "unread" : ""; anch[0].rel = t.attr('data-categoryid').split(' ').pop(); $('<li/>').append(anch).addClass(unread).appendTo(self.container.children('ol')); }); if (self.all_tab.enabled == "1") { self.buildAllTab(); } d.resolve(); return d.promise(); }, buildAllTab: function() { var link = $("<a/>", { href: "#", text: this.all_tab.lang, class: "tab-all ipsTabs_item" }); this.container.children('ol').prepend($("<li/>").append(link)); }, setupEvents: function(options) { var d = $.Deferred(), self = this; self.link = self.container.find('a'); self.link.on('click', function(e) { e.preventDefault(); var t = $(this); if (t.hasClass("tab-all")) { self.hideTab().then(function() { t.addClass('ipsTabs_activeItem'); self.cats.show(); }); return } self.hideTab().then(self.showTab(t)); }); d.resolve(); return d.promise(); }, hideTab: function() { var d = $.Deferred(); this.link.removeClass('ipsTabs_activeItem'); this.cats.hide(); d.resolve(); return d.promise(); }, showTab: function(t) { var catId = t.attr('rel'); t.addClass('ipsTabs_activeItem'); this.container.parent().find('li.cForumRow[data-categoryid="' + catId + '"]').show(); } }); }(jQuery, _)); </script> <style> #catTabs { margin-bottom: 15px; } #catTabs ol { list-style-type: none; margin: 0; padding: 0; } @media screen and (max-width:767px) { #catTabs ol { margin-top: 10px; width: 100%; } } #catTabs ol > li { float: left; } @media screen and (max-width:767px) { #catTabs ol > li { margin-bottom: 4px !important; width: 100%; } #catTabs ol > li .ipsTabs_item { width: 100%; } } #catTabs ol > li .ipsTabs_item:not(.ipsTabs_activeItem) { display: block !important; } #catTabs.pos1 > ol { float: left; } </style> Стиль под тему Default, переделываем по свою. Итог: Все работает без всякого модуля, указываем ID разделов - которые нужны во вкладках, забиваем на это болт и живем спокойно. Протестировано на 4.1.18.2 Боже, какой же я хернёй иногда по ночам занимаюсь...
12 января, 20195 yr comment_154553 В 02/03/2017 в 01:00, poreeff сказал: А год здесь при чем, тема в IPS за это время особо не менялась, а модулю большего и не надо. В общем, переделал его немного, чтоб можно было использовать "спокойнее" (без этой вкладки с ключом) и вроде как "чистый" вариант получается... Автор зашифровал JS и CSS в своем модуле, непонятно только для чего, если только совсем от школьников... Ибо тот же DevToosl в Хроме все прекрасно дешифрует и показывает. Итак, переходим в редактирование темы: forums/front/index/index и после строки (в самом начале): Cole o código: Parâmetros principais: data-nodes = lista IDs de categoria aqui - que queremos mostrar nas guias data-alltab = exibe a primeira guia em todas as seções, se não for necessário - você pode excluir esse parâmetro. Bem, o script com o estilo, já está claro onde conectar .. Mostrar conteúdo <script> (function($, _, undefined) { "use strict"; ips.controller.register('plugins.ipsthemesCategoryTabs', { initialize: function() { var self = this; self.container = self.scope, self.nodeIDs = self.container.data('nodes'), self.all_tab = self.container.data('alltab'), self.nodeArray = self.nodeIDs.indexOf(',') === -1 ? false : self.nodeIDs.split(','); self.cats = []; if (!self.nodeArray) { self.container.remove(); return; } for (var i = 0; i < self.nodeArray.length; i++) { self.cats.push('.cForumList > li[data-categoryid="' + self.nodeArray[i] + '"]'); } self.cats = $(self.cats.join(',')); self.buildTabs().then(self.setupEvents()).then(function() { self.container.find("li:first-child a").trigger("click"); }); }, buildTabs: function() { var d = $.Deferred(), self = this; self.cats.not(':first').hide(); self.cats.each(function() { var t = $(this), anch = t.find('.cForumTitle a:last-child').eq(0).clone().addClass('ipsTabs_item'), unread = t.find(".ipsDataItem_unread").length != 0 ? "unread" : ""; anch[0].rel = t.attr('data-categoryid').split(' ').pop(); $('<li/>').append(anch).addClass(unread).appendTo(self.container.children('ol')); }); if (self.all_tab.enabled == "1") { self.buildAllTab(); } d.resolve(); return d.promise(); }, buildAllTab: function() { var link = $("<a/>", { href: "#", text: this.all_tab.lang, class: "tab-all ipsTabs_item" }); this.container.children('ol').prepend($("<li/>").append(link)); }, setupEvents: function(options) { var d = $.Deferred(), self = this; self.link = self.container.find('a'); self.link.on('click', function(e) { e.preventDefault(); var t = $(this); if (t.hasClass("tab-all")) { self.hideTab().then(function() { t.addClass('ipsTabs_activeItem'); self.cats.show(); }); return } self.hideTab().then(self.showTab(t)); }); d.resolve(); return d.promise(); }, hideTab: function() { var d = $.Deferred(); this.link.removeClass('ipsTabs_activeItem'); this.cats.hide(); d.resolve(); return d.promise(); }, showTab: function(t) { var catId = t.attr('rel'); t.addClass('ipsTabs_activeItem'); this.container.parent().find('li.cForumRow[data-categoryid="' + catId + '"]').show(); } }); }(jQuery, _)); </script> <style> #catTabs { margin-bottom: 15px; } #catTabs ol { list-style-type: none; margin: 0; padding: 0; } @media screen and (max-width:767px) { #catTabs ol { margin-top: 10px; width: 100%; } } #catTabs ol > li { float: left; } @media screen and (max-width:767px) { #catTabs ol > li { margin-bottom: 4px !important; width: 100%; } #catTabs ol > li .ipsTabs_item { width: 100%; } } #catTabs ol > li .ipsTabs_item:not(.ipsTabs_activeItem) { display: block !important; } #catTabs.pos1 > ol { float: left; } </style> Estilo sob o tema do padrão, podemos refazer de acordo com o nosso. Conclusão: Tudo funciona sem nenhum módulo, especificamos o ID das seções - as quais são necessárias nas guias, nós as soltamos e vivemos em paz. Testado em 4.1.18.2 Deus, que tipo de besteira eu às vezes faço à noite ... You can do a tutorial on how to do this
31 августа, 20195 yr comment_159062 В 02.03.2017 в 09:00, poreeff сказал: data-alltab= выводит самым первым вкладку на все разделы, если не нужна - можно вообще этот параметр удалить после удаления, скрипт перестает работать и вместо вкладок появляются ссылки на категории Только что, cards-vip сказал: после удаления, скрипт перестает работать и вместо вкладок появляются ссылки на категории Помогите решить проблемку пожалуйста
19 октября, 20195 yr comment_159781 Glad to of found this i used it alot on mybb so nice to see it for ipb
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.