Как добавить плагин Jquery в Drupal?


19

Должен ли я просто вставить код в основной файл шаблона или есть какой-либо другой рекомендуемый способ присоединения новых плагинов Jquery в Drupal 7?


Какой плагин JQuery вы хотите использовать и почему? Обычно добавление любого типа Javascript добавляется с помощью функции drupal_add_js( api.drupal.org/api/drupal/includes--common.inc/function/… ).
Джейми Холлерн

Ответы:


15

Самый простой способ - просто добавить его в файл .info вашей темы:

scripts[] = js/my_jquery_plugin.js

Единственное исключение - если вы добавляете внешний ресурс (CDN / размещенный скрипт), и в этом случае вы должны использовать drupal_add_js (), как объяснил Джейми Холлерн


1
Но хромированная консоль меня изменила:Uncaught TypeError: undefined is not a function
TangMonk

@ Алекс, у меня тупой вопрос. Я знаю, что Drupal использует библиотеку jquery. Допустим, я добавляю функцию «наверх», используя идею «scripts [] = js / back_to_top.js» в theme.info. Мне также нужно добавить файл jquery (например, jquery v1.9, v1.11)?
CocoSkin

@CocoSkin у тебя все будет хорошо
Алекс Вебер

Вообще-то, нет. Это не всегда работает. Два примера: 1) scripts [] = js / jquery.hoverintent.js 2) scripts [] = js / jquery.scrollme.js
sea26.2

Как правило, не очень хороший способ сделать это. Как вы контролируете, на каких страницах он загружен? Использованиеdrupal_add_library()
anthonygore

12

Drupal имеет Jquery в комплекте с ним.

Чтобы добавить файл js, вы можете использовать drupal_add_js так же, как описано в других сообщениях.

Это будет работать в простых случаях, но если вы начинаете иметь плагины, которые зависят от других плагинов. Вы можете посмотреть на библиотеки API . Я ожидаю, что со временем будут созданы модули для поддержки популярных библиотек, есть некоторые для встроенного интерфейса JQuery, см. System_library () .

В этом примере для включения модуля jQuery ui.accordion вы можете использовать drupal_add_library ()

drupal_add_library('system', 'ui.accordion');

Это обеспечит включение js вместе с CSS и любыми библиотеками, которые зависят от него. Это также обеспечит включение библиотек только один раз.

Если вы скажете, какую библиотеку вы используете, я могу предоставить пример кода для ее определения.

Поэтому сначала создайте модуль для определения библиотеки (назовите его qtip) и загрузите модуль в папку js под папкой модуля

затем реализовать hook_library ()

function qtip_library() (
 $libraries['qTip'] = array(
    'title' => 'qTip', 
    'website' => 'http://craigsworks.com/projects/qtip/docs/', 
    'version' => '1.0.0-rc3', 
    'js' => array(
      drupal_get_path('module', 'qtip') . '/js/jquery.qtip-1.0.0.min.js' => array(),
    ),
    'dependencies' => array(
      array('system', 'jquery'),
    ),
  );
  return $libraries;
}

Затем добавить файл, вставленный в ваш код

drupal_add_library('qtip', 'qtip');

Это может быть излишним для простой библиотеки, но если вам приходится управлять большим количеством библиотек на нескольких сайтах и ​​темах, это значительно облегчает жизнь.


Спасибо, я использую библиотеку QTip
craigsworks.com/projects/qtip

5

Если вы хотите загрузить скрипт только на некоторых страницах (не на всех), вы можете добавить его через файл template.php. Просто добавьте код, похожий на этот:

function YourTheme_preprocess_node(&$variables) {

 $node = $variables['node'];
if (!empty($node) && ($node->nid == 983)
 // here you can esily add more pages
) {

drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.core.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/jquery-ui-1.7.3.custom.js');
drupal_add_js('sites/all/libraries/jquery.ui/ui/ui.progressbar.js');

drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.progressbar.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.core.css');
drupal_add_css('sites/all/libraries/jquery.ui/themes/redmond/ui.theme.css');
 }
}

Я проверял это только в Drupal 6.


3

Вы можете добавить файл JavaScript к теме, которую вы используете на сайте Drupal, добавив script[] =строку в файл .info той темы, которую вы используете. Я хотел бы рассмотреть этот случай, только если вы используете настроенную тему или измененную версию существующей темы, которая была переименована; Я бы не советовал делать это, если вы используете, например, Garland. Выполнение этого в таких случаях будет означать потерю всех изменений при каждом обновлении темы или копирование обновленных файлов темы, а затем повторное применение тех же изменений, которые были применены к предыдущей версии файлов; если изменение только добавляет script[]строку, то изменение минимально, и это может стоить сделать, но это также означает, что файлы JavaScript не добавляются в каталог, содержащий файлы темы, или вы должны добавлять файлы JavaScript каждый раз время тема обновляется.

В качестве альтернативы вы можете создать пользовательский модуль или добавить код в существующий пользовательский модуль, который вы уже используете для этого сайта.
Преимущество заключается в том, что файлы JavaScript будут добавляться к каждой теме, установленной по умолчанию или теме администрирования, без необходимости изменять все темы, которые включены на сайте, и которые пользователи могут выбирать для себя.

Как уже сообщалось в другом ответе, hook_init()это хук, который вы должны реализовать. Я добавлю, что hook_library()это новый хук, добавленный в Drupal 7 для файлов Javascript, таких как плагины jQuery.


3

Вы можете использовать модуль Js Injector для добавления скриптов прямо в админ панели Drupal. В качестве альтернативы вы можете использовать функцию drupal_add_js (), чтобы добавить свой js-файл на свою страницу.


Я думаю, что это именно то, что мне нужно, я выберу ваш ответ как лучше, но я хочу посмотреть, существуют ли другие решения в первую очередь;)
Бруно Винсент

Вы можете добавить эту строку в ваш скрипт theme.info [] = 'путь к вашему файлу', который является одним из методов, но с этим методом js будет загружаться на все ваши страницы, что обычно не является хорошей практикой. С помощью двух вышеуказанных методов вы можете добавить js именно на те страницы, которые вы хотите.
Шабир А.

1

Вы можете создать простой пользовательский модуль и добавить его таким образом. Код будет похож на следующее:

MYMODULE_init() {
  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/FILE.js');
}

Пользовательский модуль для добавления JQuery? Шутки в сторону?
Чудо

только если это внешнее, см. мой ответ
Алекс Вебер

1

Вы можете просто использовать, YOURTHEME_preprocess_theme()если хотите применить логическое условие:

drupal_add_js(drupal_get_path('theme','your_theme').'/js/yourplugin.js');

и добавьте также в файл yourtheme.info:

scripts[] = js/yourplugin.js


1

Если вы используете модуль Context, установите Context Add Assets. Настройте глобальный контекст или конкретный контекст и добавьте новую реакцию для добавления ресурса JS по пути или по модулю.

Кодирование не требуется.


Благодарность! Преимущество этого заключается в том, что вы можете ограничивать библиотеки определенными путями, но кодирование не требуется.
Druvision

1
Но для плагинов jQuery, таких как textext.js, которые содержат в среднем 5 CSS-файлов и 5 JS-файлов, это все еще много работы.
Druvision

1

Есть много внешних библиотек, которые должны быть включены в настоящее время.

Поместить их все в каталог js темы не всегда желательно, поскольку иногда эти библиотеки состоят из нескольких файлов js и нескольких файлов css.

В итоге я использовал libraries_get_pathфункцию модуля "библиотеки", чтобы получить их пути из каталога sites / all / library dir:

Вот как я добавил выбранные файлы, которые относятся к textext.js:

<?php 
function MYMODULE_init() {

  // Add jQuery library to a specific page.
  if (arg(0) == 'messages' && arg(1) == 'new') {
    // Add the jQuery TextExt library ( http://textextjs.com/ )
    $libdir = libraries_get_path('jquery-textext');
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.core.js");
    drupal_add_js("$libdir/src/js/textext.plugin.tags.js");
    drupal_add_js("$libdir/src/js/textext.plugin.autocomplete.js");
    drupal_add_js("$libdir/src/js/textext.plugin.suggestions.js");
    drupal_add_js("$libdir/src/js/textext.plugin.filter.js");
    drupal_add_js("$libdir/src/js/textext.plugin.focus.js");
    drupal_add_js("$libdir/src/js/textext.plugin.prompt.js");
    drupal_add_js("$libdir/src/js/textext.plugin.ajax.js");
    drupal_add_js("$libdir/src/js/textext.plugin.arrow.js");

    drupal_add_css("$libdir/src/css/textext.core.css");
    drupal_add_css("$libdir/src/css/textext.plugin.tags.css");
    drupal_add_css("$libdir/src/css/textext.plugin.autocomplete.css");
    drupal_add_css("$libdir/src/css/textext.plugin.focus.css");
    drupal_add_css("$libdir/src/css/textext.plugin.prompt.css");
    drupal_add_css("$libdir/src/css/textext.plugin.arrow.css");
  }

} ?>

Я хотел бы услышать, есть ли внешний репозиторий, в котором все эти библиотеки предопределены, поэтому мне не придется определять их каждую вручную.


Как вы добавляете в него страницы?
Umair

0

Я рекомендую вам загрузить jQuery из кукольного Google CDN. Проверьте эту ссылку для получения дополнительной информации: http://code.google.com/apis/libraries/devguide.html#jquery. Просто убедитесь, что вы не загружаете один и тот же скрипт несколько раз на своем сайте.


0

это то, что сработало для меня, нет необходимости создавать модуль для плагина jQuery или устанавливать его - в моем template.php я добавил:

function YOURTHEME_js_alter(&$javascript){
    // overwriting for newer jQuery version
    $javascript['misc/jquery.js']['data'] = path_to_theme() . '/assets/js/jquery-1.9.0.js';
    // also the min...
    $javascript['misc/ui/jquery.ui.core.min.js']['data'] = path_to_theme() . '/assets/js/jquery-ui-1.10.0.custom.min.js';
    // here I add the library (jQuery plugin) to resolve an error -> $.browser.msie undefined
    $javascript[path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js'] = array(   
        "group" => -100,
        "weight" => -18.990,
        "version" => "1.1.0",
        "every_page" => true,
        "type" =>   "file",
        "scope" => "header",
        "cache" => true,
        "defer" => false,
        "preprocess" => true,
        "data" =>  path_to_theme() . '/assets/js/jquery-migrate-1.1.0.min.js',
    );

}

-4

Другой способ - добавить следующий код в файл
page.tpl.php. drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');


4
Добавление кода непосредственно в шаблоны считается плохой практикой.
mpdonadio

«Добавление кода непосредственно в шаблоны считается плохой практикой» ... так что модуль SQL-инжекторов - лучший метод?
Бруно Винсент

Несколько других упомянутых способов можно считать хорошей практикой @BrunoVincent, это зависит от того, на каком уровне вы хотите атаковать (код в теме, код в пользовательском модуле или просто установить модуль, такой как js инжектор)
Клайв

в некоторых случаях это полезно делать, например, вы хотите добавить javascript-файл conditionnaly
houmem
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.