Поддержка сервиса "Технологии сайта"

Технологии сайта для нахождение проверенных сайтов, программ и оформление сайтов.
Текущее время: 29 мар 2024, 02:26

Часовой пояс: UTC + 3 часа




Начать новую тему Ответить на тему  [ 1 сообщение ] 
Автор Сообщение
 Заголовок сообщения: [BBcode] "Адаптивные вкладки на jQuery"
СообщениеДобавлено: 06 июн 2015, 02:06 
Не в сети
Разработчик
Разработчик
Аватара пользователя

Зарегистрирован: 05 июн 2015, 23:25
Сообщения: 196
Откуда: Россия
Пол: Мужской
Долго думая, что можно создать и тут пришла идея создать вкладки для текста наподобие спойлера
Адаптивные вкладки на jQuery

Использование BBCode
Код:
[spo]{TEXT1}|{TEXT2}|{TEXT3}|{TEXT4}|{TEXT5}|{TEXT6}|{TEXT7}|{TEXT8}[/spo]


Замена HTML
Код:

<div class="container-tab">

   <ul class="accordion-tabs">
      <li class="tab-head-cont">
         <a href="#" class="is-active">{TEXT1}</a>
         <section>
            <p>{TEXT2}</p>
         </section>
      </li>
      <li class="tab-head-cont">
         <a href="#">{TEXT3}</a>
         <section>
            <p>{TEXT4}</p>
         </section>
      </li>
      <li class="tab-head-cont">
         <a href="#">{TEXT5}</a>
         <section>
            <p>{TEXT6}</p>   
         </section>
      </li>
      <li class="tab-head-cont">
         <a href="#">{TEXT7}</a>
         <section>
            <p>{TEXT8}</p>
         </section>
      </li>
   </ul>
   
</div>

Пример работы
Код:
[spo]1 Вкладка|Текст 1 Вкладки|2 Вкладка|Текст 2 Вкладки|3 Вкладка|Текст 3 Вкладки|4 Вкладка|Текст 4 Вкладки[/spo]


Открываем шаблон: overall_header
Найти:
Код:
{META}

Перед вставить:
Код:
<script>
   $(document).ready(function () {
      $('.accordion-tabs').children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
      $('.accordion-tabs').on('click', 'li > a', function(event) {
         if (!$(this).hasClass('is-active')) {
            event.preventDefault();
            $('.accordion-tabs .is-open').removeClass('is-open').hide();
            $(this).next().toggleClass('is-open').toggle();
            $('.accordion-tabs').find('.is-active').removeClass('is-active');
            $(this).addClass('is-active');
         } else {
            event.preventDefault();
         }
      });
   });
</script>
    <script type="text/javascript" src="ваша ссылка/jquery.min.js"></script>


Открываем: Стили - Темы - Ваш Стиль
И в самый низ:
Код:
/* TABS */
.accordion-tabs {
   *zoom: 1;
   width: 100%;
   border: 1px solid #dddddd;
   border-radius: 0.1875em;
   margin-bottom: 1.5em;
   margin-left:0;
   padding-left:0;
}
    .accordion-tabs:before,
   .accordion-tabs:after {
      content: " ";
      display: table;
   }
    .accordion-tabs:after {
      clear: both;
   }
      .accordion-tabs li{
         list-style:none;
      }
         .accordion-tabs li.tab-head-cont:first-child a {
            border-top-left-radius: 0.1875em;
            border-top-right-radius: 0.1875em;
            border-top: 0;
         }
         .accordion-tabs li.tab-head-cont:last-child a {
            border-bottom-left-radius: 0.1875em;
            border-bottom-right-radius: 0.1875em;
         }
         .accordion-tabs li.tab-head-cont a {
            text-decoration:none;
            border-top: 1px solid #dddddd;
            color: #888888;
            display: block;
            padding: 0.75em 0.809em;
         }
         .accordion-tabs li.tab-head-cont a:hover {
            color: #000000;
         }
         .accordion-tabs li.tab-head-cont a:focus {
            outline: none;
         }
         .accordion-tabs li.tab-head-cont a.is-active {
            background-color: #f7f7f7;
            border-bottom: 0;
            color:#333333;
         }
      .accordion-tabs li.tab-head-cont section {
         padding: 1.5em 1.618em;
         background: #f7f7f7;
         display: none;
         overflow: hidden;
         width: 100%;
      }

/* RESPONSIVE */
@media screen and (min-width: 40em) {
   .accordion-tabs {
      border: none;
      position: relative;
   }
      .accordion-tabs li.tab-head-cont {
         display: inline;
      }
         .accordion-tabs li.tab-head-cont:last-child a {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
         }
         .accordion-tabs li.tab-head-cont a {
            display: inline-block;
            vertical-align: baseline;
            zoom: 1;
            *display: inline;
            *vertical-align: auto;
            border-top: 0;
            border-top-right-radius: 0.1875em;
            border-top-left-radius: 0.1875em;
         }
         .accordion-tabs li.tab-head-cont a.is-active {
            background-color: #f7f7f7;
            border: 1px solid #dddddd;
            border-bottom: 1px solid #f7f7f7;
            margin-bottom: -1px;
         }
         .accordion-tabs li.tab-head-cont section {
            border-bottom-left-radius: 0.1875em;
            border-bottom-right-radius: 0.1875em;
            border: 1px solid #dddddd;
            float: left;
            left: 0;
            padding: 0.75em 0.809em;
         }
            .accordion-tabs li.tab-head-cont section p {
               -webkit-columns: 2;
               -moz-columns: 2;
               columns: 2;
            }
}

_________________

Изображение
Изображение
Заказывайте Подпись на аватарки для форума



Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ 1 сообщение ] 

Часовой пояс: UTC + 3 часа


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

Рекомендую создать свой форум бесплатно на http://4admins.ru

Русская поддержка phpBB