May 11 2016 at 13:43

Закладки (tab) с любой стороны от блока контента

Invite pending

Переносил сайт с платной cms на Joomla. Столкнулся с необходимостью использовать закладки (tab). Cреди модулей Joomla и на просторах интернета не смог найти закладки, удовлетворяющие мои потребности:

Бесплатные;
Код, без дополнительного использования больших библиотек, как jQuery UI;
Возможность расположить закладки в любой позиции (сверху, снизу, справа или слева от контента);
Наименование закладки должно автоматически приниматься из заголовка статьи;
Html должен содержать только блоки контента.

Решил сам написать данный скрипт, возможно, кому-нибудь он облегчит задачу и сэкономит немного времени. Итак, сам html, тут будет только контейнер с блоками и их заголовками:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tabs</title>
	<link rel="stylesheet" href="tabs.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script src="tabs.js"></script>

</head>
<body>
<div class="tabsTop">
	<div class="tabs">
		<div class="tabContent">
			<h3>Первая</h3>
		</div>
		<div class="tabContent">
			<h3>Вторая</h3>
		</div>
		<div class="tabContent">
			<h3>Третья</h3>
		</div>
	</div>
</div>
</body>
</html>

В head подключаем jQuery, стили и скрипты для работы закладок, tabs.css и tabs.js, соответственно.

.tabsLeft – общий контейнер модуля закладок, класс (.tabsLeft, .tabsTop, .tabsRight, .tabsBottom) определяет, где от контента будут расположены закладки;
.tabs – контенер блоков контента;
.tabContent – блок контента;
Первый h3 в .tabContent – заголовок блока контента, который станет названием закладки.

Теперь стили (tabs.css), общие правила блоков и меню закладок (сейчас их нет в html, их добавит скрипт):

.tabContent {
box-sizing: border-box;
border: 1px solid #ccc;
width: 400px;
min-height: 400px; 
padding: 0;
}
 
.tabsLink {
box-sizing: border-box;
padding: 0;
margin: 0;
z-index: 5;
}
.tabsLink li {
box-sizing: border-box;
cursor: pointer;
border: 1px solid #ccc;
padding: 5px 10px;
background: #fff;
}
.tabsLink li.active {
color: red;
}

Задаем ширину, высоту, границу, меню делаем условно выше блоков контента, активный пункт меню выделяем.

Стили для определения местоположения блока меню.

Сверху:

.tabsTop .tabContent {
margin: 4px 0 0 0;
}
.tabsTop .tabsLink li {
display: inline;
border-radius: 10px 10px 0 0;
margin: 0 -1px 0 0;
}
.tabsTop .tabsLink li.active {
border-bottom: 1px solid #fff;
}

Слева:

.tabsLeft .tabContent {
margin: 0 0 0 -1px;
float: left;
}
.tabsLeft .tabsLink {
float: left;
}
.tabsLeft .tabsLink li {
display: block;
border-radius: 10px 0 0 10px;
margin: 0 0 -1px 0;
}
.tabsLeft .tabsLink li.active {
border-right: 1px solid #fff;
}

Справа:

.tabsRight .tabContent {
margin: 0 -1px 0 0;
float: left;
}
.tabsRight .tabsLink {
float: left;
}
.tabsRight .tabsLink li {
display: block;
border-radius: 0 10px 10px 0;
margin: 0 0 -1px 0;
}
.tabsRight .tabsLink li.active {
border-left: 1px solid #fff;
}

Снизу:

.tabsBottom .tabContent {
margin: 0 0 0 0;
}
.tabsBottom .tabsLink {
margin: 5px 0 0 0;
}
.tabsBottom .tabsLink li {
display: inline;
border-radius: 0 0 10px 10px;
margin: 0 -1px 0 0;
}
.tabsBottom .tabsLink li.active {
border-top: 1px solid #fff;
}

Задаем вертикальное или горизонтальное меню, закругляем границы с нужной стороны, настраиваем отступы и границы активных пунктов.

Скрипты в файле tabs.js:

jQuery(document).ready(function($){
	
function menuBefore() {
$('.tabsLink').remove();
$('.tabs').before('<ul class="tabsLink"></ul>'); // Создаем меню до контента
}
function menuAfter() {
$('.tabsLink').remove();
$('.tabs').after('<ul class="tabsLink"></ul>'); // Создаем меню после контента
}

function createTabs() {
	$('.tabs .tabContent').each(function(i){ //Для каждого блока
		$('.tabsLink').append('<li id="link' + i + '">' + $(this).find('h3:eq(0)').html() + '</li>'); //добавляем в меню одноименную ссылку с нумерованным идентификатором
		$(this).addClass('link' + i++ + 'Block'); //присваеваем нумерованный класс текущему блоку
	});
	function hideContent() { 
	$('.tabContent').hide(); //Создаем функцию спрятать все блоки
	}
	hideContent(); //Прячем все блоки
	$('.tabContent:eq(0)').show(); //Показываем первый блок
	$('.tabsLink li:eq(0)').addClass('active'); //Присваиваем первой ссылке класс "active"
	$('.tabsLink li').click(function(){ //Заставляем закладки работать: при нажатии
		hideContent(); //прячем все блоки
		$('.tabsLink li').removeClass('active'); // убираем у всех ссылок класс "active"
		$(this).addClass('active'); //присваиваем кликнутой ссылке класс "active"
		var lnkClass = '.' + $(this).attr('id') + 'Block'; //из идентификатора кликнутой ссылки добавляем '.' и суффикс 'Block' получаем переменную которая является классом нужного блока
		$(lnkClass).show(); //показываем блок
	});
}
//Создаем условие для определения положения закладок:
if ( $('.tabs').parent().hasClass('tabsTop') || $('.tabs').parent().hasClass('tabsLeft') ) { // если у родителя .tabs класс tabsTop или tabsLeft
	menuBefore(); // создаем меню до контента
	createTabs(); // включаем закладки
} else { // в других случаях
	menuAfter(); // создаем меню после контента
	createTabs(); // включаем закладки
}
});

Все готово, осталось только добавить класс .tabsLeft, .tabsTop, .tabsRight или .tabsBottom в корневой div и заполнить контент блоков, не забыв про заголовки.

Hubs: