Как вставить jQuery в Друпал

Главные вкладки

Аватар пользователя xox xox 9 мая 2012 в 9:51

Нашёл скрипт, который делает вкладки (tabs) используя jQuery и технологию ajax для подгрузки содержимого из файлов.

Сделал по инструкции - всё прекрасно работает. Теперь хочу запихнуть его в Друпал - не получается!!! В Друпале скрипт не работает. Даже стили не хотят подключаться. А делал я так - запихнул js-скрипт в папку js, прописал путь в info-файле, положил CSS-стили в pages.css своей темы. Не работает.

Перековырял весь интернет, последняя надежда на форум. Люди, объясните, как вставлять скрипты JQuery в Друпал?

А вот и сам скрипт:

РАЗМЕТКА HTML:
В ссылках указываем пути к фалам откуда будем загружать контент:

jQuery AJAX вкладки

Загрузка. Пожалуйста подождите...

CSS:

UL.mytabs {
position: relative;
z-index: 2;
}
UL.mytabs, UL.mytabs LI {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
float: left;
padding: 7px;
border: 1px solid #CCCCCC;
border-bottom: 1px solid #E0E0E0;
background: #F0F0F0;
text-decoration: none;
color: #333333;
height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
background: #FFFFFF;
}
UL.mytabs LI.current A {
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
position: relative;
z-index: 1;
clear: both;
border: 1px solid #E0E0E0;
padding: 10px;
top: -1px;
background:#fff;
}

jAVASKRIPT
Подгружаем jQuery и такой скрипт:

var containerId = '#tabs-container';
var tabsId = '#tabs';

$(document).ready(function(){
// Preload tab on page load
if($(tabsId + ' LI.current A').length > 0){
loadTab($(tabsId + ' LI.current A'));
}

$(tabsId + ' A').click(function(){
if($(this).parent().hasClass('current')){ return false; }

$(tabsId + ' LI.current').removeClass('current');
$(this).parent().addClass('current');

loadTab($(this));
return false;
});
});

function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');

$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
}

Комментарии

Аватар пользователя xox xox 9 мая 2012 в 15:38

Спасибо за ответы! Всё изучил, только скрипт мой всё равно не подключатся. Посмотрел quicktabs - вроде неплохой модуль, правда с аяксом работает коряво, и нет эффекта плавного появления. А самое главное - никак не получается убрать заголовок блока над вкладками.
Есть ли ещё похожий модуль?

Аватар пользователя xox xox 10 мая 2012 в 13:02

Спасибо, сам только что допетрил, как убирать заголовки у блоков.

Для меня не так важны табы, как возможность подключать к Друпалу скрипты jQuery. Хочется понять, как это делать, но не получается.