На одном из сайтов, где стояла своя форма добавления комментариев, решил поставить ешё виджеты комментариев ВКонтакте и Фейсбук. Понятно, что размещать на одной странице сразу три формы – не комильфо. Лучше, чтобы грузилась одна, основная форма добавления комментариев, а другие можно было бы выбрать легким нажатием клавиши. Расскажу, как это сделал я.
Чтобы особо не утруждаться, решил просто использовать виджет 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>
Копируем этот участок кода (в Вашем случае он может немного отличаться) и вставляем его в файл вашего сайта, содержащий блок <head>. В большинстве случаев этот файл так и называется – header.php. Сохраняем изменения, загружаем на хостинг.
Теперь опять внимательно исследуем файл index.html и находим там примерно вот такой код:
<!-- Tabs --> <h2 class="demoHeaders">Tabs</h2> <div id="tabs"> <ul></li> <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-?”> … </div> поставить код, который будет отображаться при открытии вкладки. Например так:
<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>
Сохраняем файл, загружаем на хостинг и наслаждаемся полученным результатом. Пример работы скрипта можно посмотреть, например, здесь.