25
Июн
12
Добавил: admin
Добавление JavaScript или JQuery в Drupal 7 должным образом может помочь избежать многих проблем.
В зависимости от того, где мы хотим чтобы скрипт .js сработал возможно его добавление в page--front.tpl.php, page.tpl.php, node.tpl.php или для всего сайта.
Использование JQuery в Drupal 7.
Во избежание конфликтов с другими библиотеками JavaScript, отработка JQuery выделена в отдельном пространстве. Теперь весь код JavaScript должен работать с $ и вынесен в контекст.
(function ($) {
//Code javascript
})(jQuery);
Behaviors в Drupal 7, сравнение с Drupal 6
Drupal 6
// Prefill the search box with Search... text.
$(document).ready(function(){
$('#search input:text').autofill({
value: "Search..."
});
});
Drupal 7
(function ($) {
// Prefill the search box with Search... text.
Drupal.behaviors.drupaldeveloper = {
attach: function (context) {
$('#search-block-form input:text', context).autofill({
value: "Search ..."
});
}
};
})(jQuery);
Теперь рассмотрим подключение JavaScript на нашем сайте:
Javascript через .info
scripts[] = javascript.js
В этом случае скрипт будет работать на каждой странице, этот случай удобен для запуска простых скриптов, которые не смогут создать никаких проблем с скриптами JavaScript или JQuery используемые другими модулями, такие как Views или Image API, но при добавлении на сайт библиотек JavaScript: JQuery, Prototype, Moo Tools и т.д. ... будьте осторожны и в этом случае лучше использовать способы, которыми мы рассмотрим ниже.
Подключение javascript в template.php
drupal_add_js(drupal_get_path('theme', 'nameoftheme') . '/js/jquery-1.7.2.js');
Добавление JQuery при выполнении условия для page--front.tpl.php
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path('theme', 'develway') . '/js/jquery-1.7.2.js');
}
Примеры использования drupal_add_js с сайта Drupal.org
В этом случае мы получаем контроль над type, scope, weight, а также setting - добавляет глобальную конфигурацию Drupal JavaScript. Необходимые настройки для нормального функционирования некоторых модулей. Все конфигурации будут доступны в Drupal.settings.
drupal_add_js('misc/collapse.js');
drupal_add_js('misc/collapse.js', 'file');
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);
drupal_add_js('http://example.com/example.js', 'external');
drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');
Добавление javascript в template.php для NODE.
function nameoftheme_preprocess_node(&$vars) {
if ($vars['page'] && $vars['node']->nid == 777) {
drupal_add_js(path_to_theme() . '/js/javascript.js');
}
}
Данный скрипт будет срабатывать в ноде с идентификатором 777: nid == 777.
а также через theme_preprocess:
function theme_preprocess(&$vars){
$node = menu_get_object('node');
if($node && $node->nid == 777){
drupal_add_js('sites/all/themes/theme/js/javascript.js');
}
}
Подключение внешнего Javascript в template.php.
drupal_add_js('http://domain.net/javascript.js', 'external'));
Также возможно подключение Javascript через require_once напрямую в tpl.php.
<?php require_once dirname(__FILE__) . '/javascript.inc'; ?>
code must be included within:
<script type="text/javascript">
//js code
</script>
Такой способ возможен и работает отлично, но также нужно понимать что данный скрипт будет запускаться только в том файле в котором мы его инклюдим, обычно все скрипты подключаются в template.php
Не забудьте очистить Кэш после добавления или удаления любого файла или функции и т.д. ...
Кроме того, проверяйте на совместимость все скрипты с основными модулеми Drupal такими как: Views, Image API, потому что большинство проблем возникает как раз токи просто из-за неправильного подключения Javascript, например: проблемы с загрузкой или удалением изображений, постоянные проблемы с AJAX и т.д... постоянно проверяйте и просто правильно подключайте скрипты!
