Jak dodać wtyczkę Jquery do Drupala?

Czy powinienem po prostu wkleić kod do głównego pliku szablonu, czy jest jakiś inny zalecany sposób dołączania nowych wtyczek Jquery w Drupal 7?

Najprostszym sposobem jest dodanie go do pliku .info motywu:

scripts[] = js/my_jquery_plugin.js

Jedynym wyjątkiem jest dodawanie zewnętrznego zasobu (CDN / hostowany skrypt), w którym to przypadku należy użyć drupal_add_js (), jak wyjaśniono w Jamie Hollern

Drupal ma w pakiecie Jquery.

Aby dodać plik js, możesz użyć drupal_add_js w sposób opisany w innych postach.

Będzie to działać w prostych przypadkach, ale jeśli zaczniesz mieć wtyczki, które zależą od innych wtyczek. możesz zajrzeć do interfejsu API bibliotek . Spodziewam się, że z czasem zostaną utworzone moduły do ​​obsługi popularnych bibliotek, niektóre są dostępne dla interfejsu użytkownika JQuery, patrz system_library () .

W tym przykładzie z włączonym modułem jQuery ui.accordion możesz użyć drupal_add_library ()

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

To upewni się, że js jest dołączony wraz z CSS i wszelkimi bibliotekami, które od niego zależą. Zapewni to również, że biblioteki zostaną uwzględnione tylko raz.

Jeśli powiesz, której biblioteki używasz, mogę podać przykładowy kod, jak ją zdefiniować

Najpierw utwórz moduł, aby zdefiniować bibliotekę (nazwij go qtip) i prześlij moduł do folderu js pod folderem modułu

następnie zaimplementuj 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;
}

Następnie, aby dodać plik wstaw do kodu

drupal_add_library('qtip', 'qtip');

Może to być przesadą w przypadku prostej biblioteki, ale jeśli musisz zarządzać dużą liczbą bibliotek na wielu stronach i tematach, znacznie ułatwia to życie.

Jeśli chcesz załadować skrypt tylko na niektóre strony (nie wszystkie), możesz dodać go poprzez plik template.php. Po prostu dodaj kod podobny do tego:

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');
 }
}

Testowałem to tylko w Drupal 6.

Możesz dodać plik JavaScript do motywu, którego używasz na stronie Drupal, dodając script[] =wiersz w pliku .info używanego motywu. Rozważę ten przypadek tylko wtedy, gdy używasz dostosowanego motywu lub zmodyfikowanej wersji istniejącego motywu, którego nazwa została zmieniona; Nie sugerowałbym tego, jeśli używasz na przykład Garland. W takich przypadkach oznaczałoby to utratę wszystkich zmian przy każdej aktualizacji motywu lub skopiowanie zaktualizowanych plików motywu, a następnie ponowne zastosowanie tych samych zmian, które zastosowano w poprzedniej wersji plików; jeśli zmiana polega tylko na dodaniu script[]wiersza, to zmiana jest minimalna i warto ją zrobić, ale oznaczałoby to również, że pliki JavaScript nie są dodawane w katalogu zawierającym pliki motywu lub pliki JavaScript należy dodawać co czas aktualizacji motywu.

Alternatywnie możesz utworzyć moduł niestandardowy lub dodać kod do istniejącego modułu niestandardowego, którego już używasz dla tej witryny.
Zaletą jest to, że pliki JavaScript byłyby dodawane do każdego motywu ustawionego jako domyślny, lub motyw administracyjny, bez potrzeby zmiany wszystkich motywów, które są włączone w witrynie, i że użytkownicy mogą sami wybrać.

Jak już hook_init()wspomniano w innej odpowiedzi, należy zastosować hak. Dodam, że hook_library()jest to nowy haczyk dodany w Drupal 7 do plików Javascript, takich jak wtyczki jQuery.

Za pomocą modułu Js Injector można dodawać skrypty bezpośrednio w panelu administracyjnym Drupal. Alternatywnie możesz użyć funkcji drupal_add_js (), aby dodać plik js do strony.

Możesz stworzyć prosty niestandardowy moduł i dodać go w ten sposób. Kod byłby podobny do następującego:

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

Możesz po prostu użyć, YOURTHEME_preprocess_theme()jeśli chcesz zastosować warunek logiczny:

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

i dodaj również w pliku yourtheme.info:

scripts[] = js/yourplugin.js

Jeśli używasz modułu Context, zainstaluj Context Add Assets. Skonfiguruj kontekst globalny lub określony i dodaj nową reakcję, aby dodać zasób JS według ścieżki lub modułu.

Nie wymaga kodowania.

Istnieje wiele bibliotek zewnętrznych, które należy obecnie uwzględnić.

Umieszczenie ich wszystkich w katalogu js kompozycji nie zawsze jest pożądane, ponieważ czasami biblioteki te składają się z wielu plików js i wielu plików css.

Skończyło się na tym, że użyłem libraries_get_pathfunkcji modułu bibliotek do pobrania ich ścieżek z katalogu strony / wszystkie / biblioteki:

Oto jak dodałem wybrane pliki, które odnoszą się do 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");
  }

} ?>

Chciałbym usłyszeć, czy istnieje zewnętrzne repozytorium, w którym wszystkie te biblioteki są wstępnie zdefiniowane, więc nie będę musiał definiować ich ręcznie.

Polecam załadować jQuery ze szczeniętego CDN Google. Sprawdź ten link, aby uzyskać więcej informacji: http://code.google.com/apis/libraries/devguide.html#jquery. Upewnij się, że nie ładujesz tego samego skryptu wiele razy w swojej witrynie.

to działało dla mnie, nie trzeba tworzyć modułu dla wtyczki jQuery ani instalować - w moim template.php dodałem:

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',
    );

}

innym sposobem jest dodanie następującego kodu do pliku
page.tpl.php drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');