Wie füge ich ein JQuery-Plugin zu Drupal hinzu?

Sollte ich den Code einfach in die Hauptvorlagendatei einfügen, oder gibt es eine andere empfohlene Möglichkeit, neue Jquery-Plugins in Drupal 7 anzufügen?

Am einfachsten fügen Sie es einfach in die .info-Datei Ihres Themas ein:

scripts[] = js/my_jquery_plugin.js

Die einzige Ausnahme ist, wenn Sie eine externe Ressource (CDN / Hosted Script) hinzufügen. In diesem Fall sollten Sie drupal_add_js () verwenden, wie von Jamie Hollern erläutert

Drupal hat JQuery damit verpackt.

Um eine js-Datei hinzuzufügen, können Sie drupal_add_js wie in anderen Posts beschrieben verwenden.

Dies funktioniert in einfachen Fällen, aber wenn Sie Plugins haben, die von anderen Plugins abhängen. Vielleicht möchten Sie sich die Libraries API ansehen . Ich gehe davon aus, dass in Kürze Module erstellt werden, die gängige Bibliotheken unterstützen. Einige für JQuery ui sind in see system_library () enthalten .

In diesem Beispiel können Sie zum Einbinden des Moduls jQuery ui.accordion drupal_add_library () verwenden.

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

Dadurch wird sichergestellt, dass das js zusammen mit dem CSS und allen davon abhängigen Bibliotheken enthalten ist. Es wird auch sichergestellt, dass die Bibliotheken nur einmal enthalten sind.

Wenn Sie sagen, welche Bibliothek Sie verwenden, kann ich Beispielcode für die Definition bereitstellen

Erstellen Sie also zuerst ein Modul, um die Bibliothek zu definieren (nennen Sie es qtip), und laden Sie das Modul in einen js-Ordner unter dem Modulordner hoch

dann implementiere 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;
}

Dann fügen Sie die Datei in Ihren Code ein

drupal_add_library('qtip', 'qtip');

Dies mag für eine einfache Bibliothek zu viel sein, aber wenn Sie eine große Anzahl von Bibliotheken über mehrere Sites und Themen verwalten müssen, erleichtert dies das Leben erheblich.

Wenn Sie das Skript nur auf einigen Seiten (nicht auf allen) laden möchten, können Sie es über Ihre template.php-Datei hinzufügen. Fügen Sie einfach Code hinzu, der diesem ähnlich ist:

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

Ich habe dies nur in Drupal 6 getestet.

Sie können dem Thema, das Sie auf der Drupal-Site verwenden, eine JavaScript-Datei hinzufügen, indem Sie eine script[] =Zeile in die .info-Datei des von Ihnen verwendeten Themas einfügen. Ich würde diesen Fall nur in Betracht ziehen, wenn Sie ein benutzerdefiniertes Thema oder eine geänderte Version eines vorhandenen Themas verwenden, das umbenannt wurde. Ich würde nicht empfehlen, dies zu tun, wenn Sie beispielsweise Garland verwenden. In solchen Fällen bedeutet dies, dass bei jeder Aktualisierung des Designs alle Änderungen verloren gehen oder die aktualisierten Designdateien kopiert werden und dieselben Änderungen wie in der vorherigen Version der Dateien erneut angewendet werden. Wenn durch die Änderung nur eine script[]Zeile hinzugefügt wird, ist die Änderung minimal, und es könnte sich lohnen, dies zu tun. Dies würde jedoch auch bedeuten, dass die JavaScript-Dateien nicht in dem Verzeichnis hinzugefügt werden, das die Designdateien enthält, oder Sie sollten die JavaScript-Dateien alle hinzufügen Zeitpunkt, an dem das Thema aktualisiert wird.

Alternativ können Sie ein benutzerdefiniertes Modul erstellen oder Code zu einem vorhandenen benutzerdefinierten Modul hinzufügen, das Sie bereits für diese Site verwenden.
Der Vorteil ist, dass die JavaScript-Dateien zu jedem Design als Standard- oder Verwaltungsdesign hinzugefügt werden, ohne dass alle auf der Website aktivierten Designs geändert werden müssen und die Benutzer selbst auswählen können.

Wie bereits in einer anderen Antwort berichtet, hook_init()ist der Haken, den Sie implementieren sollten. Ich werde hinzufügen, dass dies hook_library()der neue Hook ist, der in Drupal 7 für Javascript-Dateien wie jQuery-Plug-Ins hinzugefügt wurde.

Sie können das Js Injector- Modul verwenden, um Skripte direkt im Drupal-Verwaltungsbereich hinzuzufügen. Alternativ können Sie die Funktion drupal_add_js () verwenden, um Ihre js-Datei zu Ihrer Seite hinzuzufügen.

Sie können ein einfaches benutzerdefiniertes Modul erstellen und auf diese Weise hinzufügen. Der Code würde ungefähr so ​​aussehen:

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

Sie können einfach in verwenden, YOURTHEME_preprocess_theme()wenn Sie logische Bedingung anwenden möchten:

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

und füge auch in yourtheme.info hinzu:

scripts[] = js/yourplugin.js

Wenn Sie das Kontextmodul verwenden, installieren Sie Kontext-Assets hinzufügen. Richten Sie einen globalen Kontext oder einen bestimmten Kontext ein und fügen Sie eine neue Reaktion hinzu, um das JS-Asset nach Pfad oder Modul hinzuzufügen.

Keine Kodierung erforderlich.

Es gibt viele externe Bibliotheken, die heutzutage einbezogen werden müssen.

Es ist nicht immer wünschenswert, sie alle im js-Verzeichnis des Themas abzulegen, da diese Bibliotheken manchmal aus mehreren js-Dateien und mehreren css-Dateien bestehen.

Am Ende habe ich die libraries_get_pathFunktion des Bibliotheksmoduls verwendet, um ihre Pfade aus dem Verzeichnis sites / all / libraries zu ermitteln:

So habe ich ausgewählte Dateien hinzugefügt, die sich auf textext.js beziehen:

<?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");
  }

} ?>

Ich würde gerne hören, ob es ein externes Repository gibt, in dem alle diese Bibliotheken vordefiniert sind, sodass ich sie nicht manuell definieren muss.

Ich empfehle Ihnen, jQuery aus dem pupblic Google CDN zu laden. Weitere Informationen finden Sie unter folgendem Link: http://code.google.com/apis/libraries/devguide.html#jquery. Stellen Sie sicher, dass Sie dasselbe Skript nicht mehrmals auf Ihrer Website laden.

Das hat bei mir funktioniert, es ist nicht erforderlich, ein Modul für ein jQuery-Plugin zu erstellen oder eines zu installieren - in meiner template.php habe ich hinzugefügt:

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

}

Eine andere Möglichkeit besteht darin, der Datei
page.tpl.php den folgenden Code hinzuzufügen: drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');