it-swarm.com.de

Wie füge ich Jupery 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) anzuhängen?

18
Vonder

Der einfachste Weg ist, es einfach in die .info-Datei Ihres Themas einzufügen:

scripts[] = js/my_jquery_plugin.js

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

15
Alex Weber

Drupal hat Jquery damit verpackt.

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

Dies funktioniert in einfachen Fällen, aber wenn Sie Plugins haben, die von anderen Plugins abhängen. Vielleicht möchten Sie sich die Bibliotheken API ansehen. Ich gehe davon aus, dass in der Zeit Module erstellt werden, die beliebte Bibliotheken unterstützen. Es gibt einige für JQuery ui, die in see system_library () integriert sind.

In diesem Beispiel können Sie drupal_add_library () verwenden, um das Modul jQuery ui.accordion einzuschließen

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

Dadurch wird sichergestellt, dass das js zusammen mit dem CSS und allen davon abhängigen Bibliotheken enthalten ist. Außerdem wird 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;
}

Fügen Sie dann die in Ihren Code eingegebene Datei hinzu

drupal_add_library('qtip', 'qtip');

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

12
Jeremy French

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

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.

5
Nebojsa

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

3
Shabir A.

Sie können dem Thema, das Sie auf der Site Drupal) verwenden, eine JavaScript-Datei hinzufügen, indem Sie in der .info-Datei des von Ihnen verwendeten Themas eine Zeile script[] = Hinzufügen In diesem Fall nur, wenn Sie ein benutzerdefiniertes Thema oder eine modifizierte 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 würde dies zu einem Verlust führen Alle Änderungen jedes Mal, wenn das Thema aktualisiert wird, oder um die aktualisierten Themendateien zu kopieren und dann dieselben Änderungen erneut anzuwenden, die auf die vorherige Version der Dateien angewendet wurden. Wenn die Änderung nur eine script[] - Zeile hinzufügt, dann Die Änderung ist minimal und könnte sich lohnen. Es würde jedoch auch bedeuten, dass die JavaScript-Dateien nicht in dem Verzeichnis hinzugefügt werden, das die Themendateien enthält, oder Sie sollten die JavaScript-Dateien bei jeder Aktualisierung des Themas hinzufügen.

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

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

3
kiamlaluno

Sie können ein einfaches benutzerdefiniertes Modul erstellen und auf diese Weise hinzufügen. Der Code ähnelt dem folgenden:

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

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

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

und fügen Sie auch in yourtheme.info Datei hinzu:

scripts[] = js/yourplugin.js

1
gbwebservice

Wenn Sie das Kontextmodul verwenden, installieren Sie Context Add Assets. 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 Codierung erforderlich.

1
ebeyrent

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

Es ist nicht immer wünschenswert, sie alle in das js-Verzeichnis des Themas zu stellen, da diese Bibliotheken manchmal aus mehreren js-Dateien und mehreren CSS-Dateien bestehen.

Am Ende habe ich das libraries_get_path Funktion des Bibliotheksmoduls, um ihre Pfade aus dem Verzeichnis sites/all/library zu übernehmen:

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, damit ich sie nicht jeweils manuell definieren muss.

1
Druvision

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

}
0

Ich empfehle Ihnen, jQuery aus dem Schüler-Google-CDN zu laden. Überprüfen Sie diesen Link für weitere Informationen: http://code.google.com/apis/libraries/devguide.html#jquery . Stellen Sie nur sicher, dass Sie nicht dasselbe Skript mehrmals auf Ihrer Website laden .

0
ANDiTKO