Перейти к содержанию
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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

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

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

×