Головні новини
Ви тут: Головна / Цікаве / Як зробити панель вкладок на сайті

Як зробити панель вкладок на сайті



На одному з сайтів, де стояла своя форма додавання коментарів, вирішив поставити ще віджети коментарів ВКонтакті і Фейсбук. Зрозуміло, що розміщувати на одній сторінці відразу три форми – не гарно. Краще, щоб завантажилася одна, основна форма додавання коментарів, а інші можна було б вибрати легким натисканням клавіші. Розкажу, як це зробив я.

Як зробити панель вкладок на сайті
Щоб особливо не напружуватися, вирішив просто використовувати віджет jQuerty – Tabs. Спочатку йдемо в розділ Themes на сайті jQueryui.com, де можна або вибрати готову, або створити свою тему, яка підходить для Вашого сайту. Тут все дуже просто – хочете створити свою тему – міняйте потрібні параметри на закладці “Roll Your Own”, хочете вибрати готову – переходьте на закладку “Gallery” і вибирайте підходящу. Визначившись з темою, тиснемо кнопочку “Download theme” і потрапляємо на вкладку Download Builder. Тут відзначаємо чекбоксами в трьох пунктах – “Core” і “Widget” (це розділ “UI Core”) і “Tabs” (розділ “Widget”). Відповідно, у двох перших – бібліотеки ядра і віджетів, в третьому – сам віджет “Tabs”. Після цього внизу сторінки натискаємо кнопку “Download” і зберігаємо отриманий zip-архів на комп’ютері.

Розпаковуємо архів – у ньому три папки (css, js, development-bundle) і один файл (index.html). Папки CSS і JS копіюємо в кореневу директорію Вашого сайту. Тепер підключаємо віджет. Робиться це так:

Відкриваємо в текстовому редакторі файл index.html з папки. У ньому ви побачите html-код, який в блоці містить щось на зразок цього:

<link href="css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script></pre>

Копіюємо цю ділянку коду (у Вашому випадку він може трохи відрізнятися) і вставляємо його в файл вашого сайту, що містить блок. У більшості випадків цей файл так і називається – header.php. Зберігаємо зміни, завантажуємо на хостинг.

Тепер знову уважно дивимось в файл index.html і знаходимо там приблизно ось такий код:

<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
Копіюємо даний код і вставляємо його в те місце вашого шаблону, де б ви хотіли щоб відображались таби (панель вкладок. Вставивши код, його треба трохи допрацювати під свої потреби, а саме:
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>

Тут написати назви закладок. У розділи


поставити код, який буде відображатися при відкритті вкладки. Наприклад так:

<div id="tabs">
<ul>
<li><a href="#tabs-1"> Коментарі ВКонтакті</a></li>
<li><a href="#tabs-2">Коментарі Фейсбук</a></li>
<li><a href="#tabs-3">Коментарі на сайті</a></li>
</ul>
<div id="tabs-1">Код віджета коментарів ВКонтакті</div>
<div id="tabs-2"> Код віджета коментарів Фейсбук </div>
<div id="tabs-3"> Код віджета стандартних коментарів </div>
</div>

Зберігаємо файл, завантажуємо на хостинг і насолоджуємося отриманим результатом.



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers