Главная » Файлы » Полезные скрипты для Ucoz |
Простые вкладки (табы) на JQUERY для uCoz
13.02.2015, 12:16 | |
Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{}, вкладки из горизонтальных преобразуются в вертикальный аккордион. Вкладки помогают компактно разместить большое количество контента в одном месте, к примеру если у вас кино-сайт - можно в нескольких вкладках разместить разные видеоплееры, или комментарии разных систем (например комментарии сайта и ВК, как это сделано здесь) разместить во вкладках, чтоб они были в одном блоке. Установка 1. Это html-каркас самих вкладок. Их ставите по месту, и меняете заголовки и содержание вкладок на свои: Код <ul class="accordion-tabs"> <li class="tab-head-cont"> <a href="#" class="is-active">Вкладка 1</a> <section><p>Содержание вкладки 1</p></section> </li> <li class="tab-head-cont"> <a href="#">Вкладка 2</a> <section><p>Содержание вкладки 2</p></section> </li> <li class="tab-head-cont"> <a href="#">Вкладка 3</a> <section><p>Содержание вкладки 3</p></section> </li> <li class="tab-head-cont"> <a href="#">Вкладка 4</a> <section><p>Содержание вкладки 4</p></section> </li> </ul> ** Тут для примера заготовлено 4 вкладки, но их может быть столько - сколько вам нужно. 2. Сразу после блока вкладок пропишите сам jQuery-скрипт: Код <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> 3. И последнее, в свой основной CSS-файл или шаблон - вставьте стили вкладок: Код /* TABS */ .accordion-tabs { *zoom: 1; width: 60%; border: 1px solid #ddd; border-radius: 4px; margin: 1.5em auto; 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-radius: 4px 4px 0px 0px; border-top: 0;} .accordion-tabs li.tab-head-cont:last-child a { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .accordion-tabs li.tab-head-cont a { text-decoration:none; border-top: 1px solid #ddd; color: #888; display: block; padding: 14px;} .accordion-tabs li.tab-head-cont a:hover {color: #000;} .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:#333;} .accordion-tabs li.tab-head-cont section p { padding: 14px; margin: 0px;} .accordion-tabs li.tab-head-cont section { text-align:left; background: #f7f7f7; display: none; overflow: hidden; width: 100%;} /* RESPONSIVE */ @media screen and (min-width: 50em) { .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: 0px; border-bottom-right-radius: 0px;} .accordion-tabs li.tab-head-cont a { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; border-top: 0; border-radius: 4px 4px 0px 0px;} .accordion-tabs li.tab-head-cont a.is-active { background-color: #f7f7f7; border: 1px solid #ddd; border-bottom: 1px solid #f7f7f7; margin-bottom: -1px;} .accordion-tabs li.tab-head-cont section { border-radius: 4px; border: 1px solid #ddd; float: left; left: 0;} } Если все сделано правильно, то на этом все. Демо Источник | |
| |
Всего комментариев: 0 | |