Перейти к содержанию

Category Tabs by IPS Themes

http1

Автор http1
в Интерфейс

 Поделиться

Рекомендуемые сообщения

http1 Энтузиаст

http1

Опубликовано
Опубликовано
Category Tabs by IPS Themes

Просмотр файла

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
Ссылка на комментарий
Поделиться на другие сайты
  • 1 год спустя...
poreeff Энтузиаст

poreeff

Опубликовано
Опубликовано
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="{&quot;enabled&quot;:&quot;1&quot;,&quot;lang&quot;:&quot;Все разделы&quot;}" 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
Screenshot_9.png

Боже, какой же я хернёй иногда по ночам занимаюсь...

Ссылка на комментарий
Поделиться на другие сайты
  • 1 год спустя...
  • 2 недели спустя...
yRestrict Новобранец

yRestrict

Опубликовано
Опубликовано
В 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
Screenshot_9.png

Deus, que tipo de besteira eu às vezes faço à noite ...

You can do a tutorial on how to do this

Ссылка на комментарий
Поделиться на другие сайты
  • 7 месяцев спустя...
cards-vip Новичок

cards-vip

Опубликовано
Опубликовано
В 02.03.2017 в 09:00, poreeff сказал:

data-alltab= выводит самым первым вкладку на все разделы, если не нужна - можно вообще этот параметр удалить

после удаления, скрипт перестает работать и вместо вкладок появляются ссылки на категории

Только что, cards-vip сказал:

после удаления, скрипт перестает работать и вместо вкладок появляются ссылки на категории

Помогите решить проблемку пожалуйста 

Ссылка на комментарий
Поделиться на другие сайты
  • 1 месяц спустя...
RattieRats Новобранец

RattieRats

Опубликовано
Опубликовано

Glad to of found this i used it alot on mybb so nice to see it for ipb

Ссылка на комментарий
Поделиться на другие сайты
  • 3 года спустя...
Dimarik111 Специалист

Dimarik111

Опубликовано
Опубликовано

Обновлен работает под последнюю версию IPS

 

(JD)category tabs.xml

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...