Альтернатива Categories in tabs

Интересные скрипты, хитрости, трюки с оформлением, "недокументированные" возможности, всяческие "довески" к форумам. HTML, CSS, JavaScript и т.п. (только готовые рецепты)
Правила форума
В этой теме выкладываем только готовые "рецепты", если у вас есть чем поделиться.
Пожалуйста, не нужно создавать темы с запросами на тот или иной скрипт
Ответить

Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Альтернатива Categories in tabs

Сообщение s666 » 06 май 2017, 10:22

Для предустановленного стиля просильвер. Несколько не устроил меня дизайн и и функционал вкладок. Но идея мне понравилась. Сделал свой вариант, в нём появилась вкладка "Все" (показывает страницу в привычном виде) и все вкладки, где есть непрочитанные сообщения, подсвечиваются красным цветом. Вот так это выглядит в натуре:
Изображение

Код достаточно простой.
В overall_header_content_before вставляем -

Код: Выделить всё

<style>
  input[type='radio'] {
   opacity: 0;
   filter: alpha(opacity=0);
   width: 0;
   height: 20px;
   z-index: 99999;
   position: relative;
   cursor: pointer;
}
input[type='radio'] + label {
   position: relative;
   left: -21px;
   width: 5%;
   font-size: 12px;
   color: #141414;
   text-shadow: 1px 1px 3px #adadad;
   font-weight: 500;
   font-size: 1.1em;
   font-family: 'Tahoma', Arial, sans-serif;
   cursor: pointer;
   height: 20px;
   padding: 2px 2px 10px 2px;
   border-radius: 5px 5px 0px 0px;
   border-width: 0px;
   border-color: #141414;
}
 
input[type='radio']:checked + label {
   background: linear-gradient(to top, #EDEDEB, #A1A29C);
   border-width: 2px 2px 0px 2px;
}

</style>
Это стили наших ТАБов, внешний вид можно подобрать самостоятельно. linear-gradient(to top, #EDEDEB, #A1A29C) задаёт плавный переход цвета ТАБа.
В этот же файл запишем пару новых функций:

Код: Выделить всё

<script language="JavaScript" type="text/javascript">
function showforum(id)     // Сделает выбранную категорию видимой
{
    $('.forabg').each(function () {             // перебираем все категории                  
        if (this.id==id) {this.style.display='block';}
        else {
          if (id=='all') {this.style.display='block';}
          else {this.style.display='none';}
        };
    });
}

function isnew(obj)     // узнаем есть ли непрочитанные сообщения
{
      var elems = obj.getElementsByTagName('dt');
      var ret = false
      for(var i=0; i<elems.length; i++) {
         var location = elems[i].title;
         if (location.indexOf("прочитанные")>1){
           ret = true ;
        }
      
      }   
      return ret
}
</script>
Тут вроде всё просто... продолжаем - создадим "меню" со списком категорий. Добавим следующий код:

Код: Выделить всё

<!-- IF SCRIPT_NAME eq 'index' --> 
      <div id="line-end-color" style="width: 100%; display: block;  height: 24px; top: 0px; position: relative; background: #A1A29C; ">   
       <div class="option-group">
         <input type="radio" value="option0" name="prog_lang" id="option0" checked onclick="showforum('all')"/>    // Вкладка "Все"
            <label for="option0" id="caption0"> Все</label>
         <input type="radio" value="option1" name="prog_lang" id="option1" onclick="showforum('page1')"/>            //  Вкладка с названием категории
            <label for="option1" id="caption1"> Первые шаги</label>    // И так далее...  
      </div>
    </div>
<!-- ENDIF -->
Код создания вкладки следующий:
<input type="radio" value="option1" name="prog_lang" id="option1" onclick="showforum('page1')"/>
<label for="option1" id="caption1"> Название категории 1</label>

Value, id, for для следующей вкладки должны быть option2, для третьей - option3 и т.д. Id для label должно быть caption1, caption2, caption3 и т.д. onclick для следующих вкладок имеет такой вид: onclick="showforum('page2')", onclick="showforum('page3')", onclick="showforum('page4')" и т.д.
Вот на этом редактирование файла overall_header_content_before можно закончить. Сохраняем внесённые изменения.

Открываем файл overall_footer_after. Тут нужно сделать маленькое пояснение. В просильвере категории не имеют своего ID, что затрудняет управление этими объектами. Я обошел этот недостаток и нарисовал простой код, присваивающий ID категориям. Выглядит это так:

Код: Выделить всё

<script language="JavaScript" type="text/javascript">
$(function () {                                      // Когда страница загрузится
    var n=0 ;
    var isnews = false ;
    var location = window.location.href;
    if (location.indexOf("index")>1) {        // если мы находимся на странице форумов

    $('.forabg').each(function () {             // получаем все категории и даем им иди.
        n++;                  
        this.id='page'+n ;
        isnews = isnew(this);
        objs = document.getElementById('caption'+n); 
        if (isnews) {objs.style.color='red'; objs.title='Непрочитанные сообщения';};
    });
    option0.checked='checked';     // активирует вкладку "Все"
    
 </script>  
 

Вот в принципе и все манипуляции. Возможно потребуется навести марафет для двух строк "последние посещение" и "отметить все форумы как прочтённые". У меня в таблице стилей такой код:

Код: Выделить всё

/*forums*/
p.responsive-center.time, p.right.responsive-center.time.rightside {
    color: #29532e;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.0em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
    margin-right: 10%;
    margin-left: 10%;
    background: #EDEDEB;
    height: 40px;
    line-height: 4;
    margin-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
}
.action-bar.compact {
    margin-right: 10%;
    background: #EDEDEB;
    width: 80%;
    margin: auto;
    border-bottom: 1px solid #b3a7a7;
}
Он выравнивает колонку с форумами. Для вашего стиля он может быть другим.
Если у Вас установлено расширение Lightbox, то потребуется корректировка кода. Это расширение меняет название классов.
Тестовый форум Чарка

Аватара пользователя

Pussy
Сообщения: 270
Зарегистрирован: 09 июн 2016, 17:59
Благодарил (а): 24 раза
Поблагодарили: 16 раз
Пол:
Контактная информация:

Альтернатива Categories in tabs

Сообщение Pussy » 18 май 2017, 12:41

s666, а на мобильном как смотрится?

Ответить