Табы (вкладки) для сайта на DLE
Привет друзья! Сегодня появилось немного времени и я решил посвятить его сайту. Мне нужно было сделать простые три вкладки (табы) для удобства. На сайте добавляются сказки. Соответственно сайт на DLE. Первая вкладка по умолчанию текст - сама сказка. Вторая вкладка - ссылка на воспроизведение, ну а третья - скачать файл.
Согласитесь если ссылка на воспроизведение будет внизу или сам файл , то не очень удобно скроллить всю страницу что бы к ним добраться. Сверху тоже всё это дело не смотрелось. И я решил использовать табы в полной новости.
Перебрав дюжину скриптов и не найдя ни чего нужного, обратился за помощью в группу и ребята помогли. Оказалось всё проще чем казалось. Если , Вы используете DLE то ни чего лишнего городить не нужно. Для начала обратимся к источнику и немного изучим информацию , а так же примеры. А в админке DLE уже есть готовые табы.
И так приступим, для начала HTML
<div class="wrapper">
<div class="tabs">
<div role="tablist" aria-label="fairy-tales">
<buttontab role="tab" aria-selected="true" id="js">Читать
</buttontab>
<buttontab role="tab" aria-selected="false" id="ruby">Слушать
</buttontab>
<buttontab role="tab" aria-selected="false" id="php"> Скачать
</buttontab>
</div>
<div class="tabs-none" role="tabpanel" aria-labelledby="js">
<div class="maincont">
{full-story}
</div>
[pages]<div class="storenumber">{pages}</div>[/pages]
</div>
<div role="tabpanel" aria-labelledby="ruby" hidden>
<br>
<h4> {title} Слушать онлайн бесплатно в хорошем качестве</h4>
<br>
<center> [xfvalue_audio] </center>
</div>
<div role="tabpanel" aria-labelledby="php" hidden>
<br>
<h4> {title} Скачать бесплатно аудиосказку</h4>
<br>
<center> [xfvalue_download] </center>
</div>
</div>
</div>
Сам скрипт
<script> const tab = document.querySelector('.tabs');
const tabButtons = tab.querySelectorAll('[role="tab"]');
const tabPanels = Array.from(tab.querySelectorAll('[role="tabpanel"]'));
function tabClickHandler(e) {
//Hide All Tabpane
tabPanels.forEach(panel => {
panel.hidden = 'true';
});
//Deselect Tab Button
tabButtons.forEach( button => {
button.setAttribute('aria-selected', 'false');
});
//Mark New Tab
e.currentTarget.setAttribute('aria-selected', 'true');
//Show New Tab
const { id } = e.currentTarget;
const currentTab = tabPanels.find(
panel => panel.getAttribute('aria-labelledby') === id
);
currentTab.hidden = false;
}
tabButtons.forEach(button => {
button.addEventListener('click', tabClickHandler);
})</script>
Ну и стили CSS
<style>
/* Reset */
html {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
//Wrapper
.wrapper {
max-width: auto;
margin: 4rem auto;
padding: 2rem;
background: white;
box-shadow: 0 0 3px 5px rgba(0,0,0,0.08653);
}
// Tabs
.tabs {
display: grid;
}
[role="tablist"] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
buttontab {
background: #e7e7e7;
border: 0;
color: black;
border-radius: 5px 5px 0 0 ;
--bs-color: rgba(0,0,0,0.5);
box-shadow: inset 0 -2px 5px var(--bs-color);
cursor:pointer;
font-size: 20px;
padding: 15px;
}
buttontab[aria-selected="true"] {
background: #ffc600;
box-shadow: none;
color: rgba(0,0,0,0.7);
}
buttontab:focus {
outline: 0;
--bs-color: rgba(0,0,0,0.6);
}
</style>
Да , забыл сказать что нужно подключить библиотеку jquery, хотя она уже по умолчанию подключена в DLE.
Стили правим под свои нужды , код тоже. Я просто привёл пример как реализовал у себя на сайте.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.