Виджет нерешенных и последних тем (Двойной виджет для IPS 4.7)

[Ryancoolround]

Сегодня мы сделаем двойной виджет с вкладками, на которых будет отображаться, разная, нужная вам информация. В примере на скриншоте ниже я смог объединить два виджета (Последние темы и Нерешенные темы), что позволило мне сэкономить место на главной странице форума.

Так как до этого решения додумался не я, то в этом случае я просто обязан сообщить об источнике решения. Решение предоставил пользователь andros0789 с форума IPBMafia.

Для данного виджета понадобится модуль Страницы, в котором нужно создать необходимые вам блоки с необходимыми вам виджетами или лентами. Это нужно что бы получить специальные ключи виджетов которые понадобятся позже (Пример: {block="svezhie-temy"} - Свежие темы, {block="vidzhet-s-nereshennymi-temami"} - Нерешенные темы).

Далее вам нужно создать еще один блок, при создании которого нужно обязательно выбрать пункт "Настроить", и в появившейся вкладке обязательно выбрать пункт "Ручной HTML". В окно "Контент" которого вам нужно будет поставить следующий код:

<!-- The tab bar -->
                        <div class="ipsTabs ipsTabs_small ipsTabs_stretch ipsClearfix" id="blocksTab_01" data-ipstabbar="" data-ipstabbar-contentarea="#blocksTab_01_content">
                           <a href='#blocksTab_01' data-action='expandTabs'><i class='icon-caret-down'></i></a>
                           <ul role='tablist'>
                              <li role='presentation'>
                                 <a href="#ipsTabs_1" role='tab' id='blocksTab_01_forums' class='ipsTabs_item ipsType_center' aria-selected="true">Нужно решение</a>
                              </li>
                              <li role='presentation'>
                                 <a href="#ipsTabs_2" id='blocksTab_01_orion' role='tab' class='ipsTabs_item ipsType_center'>Свежие темы</a>
                              </li>
                           </ul>
                        </div>
                        <br>
                        <!-- The tab panel wrapper -->
                        <div id="blocksTab_01_content" class="ipsTabs_panels">
                           <!-- The tab 1 -->
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_forums_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="vidzhet-s-nereshennymi-temami"}
                              <br>
                           </div>
                           <!-- The tab 2 -->
                           <div id="ipsTabs_blocksTab_01_blocksTab_01_orion_panel" class="ipsTabs_panel" style="" aria-hidden="" animating="false">
                              {block="svezhie-temy"}
                              <br>
                           </div>
                        </div>

Не забудьте заменить мои ключи вашими.

На этом настройка закончена, вставьте созданный блок через панель "Управление блоками" в необходимое место у вас на форуме.

[Ryancoolround]

В общем, в одном из репортов, для моих проектов, мне сообщили, что в моей игре мало информации по игре. Ну и что бы добавить эту информацию, я как раз воспользовался приблизительно похожей разметкой, как в этой теме. По итогу я получил следующий вариант:

Спойлер

Что бы это реализовать, нам необходима сама разметка:

<div class="tab-container">
        <button class="tab" onclick="openTab('game')">Окно 1</button>
        <button class="tab" onclick="openTab('about-game')">Окно 2</button>
    </div>

    <div id="game" class="tab-content" style="display: block;">
      <!-- Добавляем контент, который необходимо отобразить в Окне 1 -->
    </div>

    <div id="about-game" class="tab-content">
      <!-- Добавляем контент, который необходимо отобразить в Окне 2 -->
    </div>

Далее нам нужны необходимые стили для этого:

.tab-container {
  margin-top: 20px;
  text-align: center;
}

.tab {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
}

.tab-content {
  display: none;
}

Ну и что бы все это работало, можно добавить небольшой JavaScript:

function openTab(tabName) {
  const tabContents = document.getElementsByClassName('tab-content');
  for (let i = 0; i < tabContents.length; i++) {
      tabContents[i].style.display = 'none';
  }
  document.getElementById(tabName).style.display = 'block';
}