DrupalにJqueryプラグインを追加するには?


19

メインテンプレートファイルにコードを貼り付けるだけですか、それともDrupal 7に新しいJqueryプラグインを追加する他の推奨方法はありますか?


どのような種類のJQueryプラグインを使用したいと考えていますか?通常、関数drupal_add_jsapi.drupal.org/api/drupal/includes--common.inc/function/…)を使用して、あらゆる種類のJavascriptを追加します。
ジェイミーホラーン

回答:


15

最も簡単な方法は、テーマの.infoファイルに追加することです。

scripts[] = js/my_jquery_plugin.js

唯一の例外は、外部リソース(CDN /ホストスクリプト)を追加する場合です。この場合、Jamie Hollernが説明したように、drupal_add_js()を使用する必要があります


1
しかし、クロムコンソールは私を変えます:Uncaught TypeError: undefined is not a function
TangMonk 14

@アレックス私は愚かな質問を得た。Drupalがjqueryライブラリを使用していることは知っています。theme.infoで「scripts [] = js / back_to_top.js」というアイデアを使用して、「トップに戻る」機能を追加するとします。jqueryファイル(jquery v1.9、v1.11など)も追加する必要がありますか?
CocoSkin 14年

@CocoSkinあなたは大丈夫です
アレックスウェーバー14年

実は違う。それは常に機能するとは限りません。2つの例: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のUIのいくつかありますsystem_libraryは)(

jQuery ui.accordionモジュールを含むこの例では、drupal_add_library()を使用できます

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

これにより、CSSおよびそれに依存するライブラリとともにjsが含まれるようになります。また、ライブラリが1回だけ含まれるようにします。

どのライブラリを使用していると言ったら、それを定義する方法のサンプルコードを提供できます

したがって、最初にライブラリを定義するモジュールを作成し(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
Vonder

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

Drupalサイトで使用しているテーマにJavaScriptファイルを追加するには、使用しているテーマscript[] =の.infoファイルに行を追加します。このケースは、カスタマイズされたテーマ、または名前が変更された既存のテーマの修正バージョンを使用している場合にのみ検討します。たとえば、Garlandを使用している場合は、実行しないことをお勧めします。そのような場合に行うと、テーマが更新されるたびにすべての変更が失われるか、更新されたテーマファイルをコピーし、ファイルの以前のバージョンに適用された同じ変更を再適用します。変更がscript[]行の追加のみである場合、変更は最小限であり、それを行う価値があるかもしれませんが、JavaScriptファイルがテーマファイルを含むディレクトリに追加されないことを意味するか、JavaScriptファイルを毎回追加する必要がありますテーマが更新される時間。

別の方法として、カスタムモジュールを作成するか、そのサイトで既に使用している既存のカスタムモジュールにコードを追加できます。
長所は、JavaScriptファイルがすべてのテーマに追加され、デフォルトまたは管理テーマとして設定され、サイトで有効になっているすべてのテーマを変更する必要がなく、ユーザーが自分で選択できることです。

別の答えですでに報告されているように、hook_init()あなたが実装すべきフックです。私はそれが追加されますhook_library()jQueryのプラグインのようなJavaScriptファイルのためのDrupal 7で追加された新しいフックです。


3

Js Injectorモジュールを使用して、Drupal管理パネルでスクリプトを直接追加できます。または、drupal_add_js()関数を使用して、jsファイルをページに追加できます。


私はこれがまさに私が必要とするものだと思います、私はあなたの答えを最良のものとして選択しますが、他の解決策が最初に存在するかどうかを見たいです;)
ブルーノヴィンセント

この行をtheme.info script [] = 'path to your file'に追加できますが、これは1つの方法ですが、この方法ではjsがすべてのページにロードされますが、これは通常良い方法ではありません。上記の2つの方法を使用すると、必要なページにjsを追加できます。
シャビールA.

1

簡単なカスタムモジュールを作成し、そのように追加できます。コードは次のようになります。

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

JQueryを追加するためのカスタムモジュール?マジ?
Vonder

外部の場合のみ、私の答えを参照してください
アレックスウェーバー

1

YOURTHEME_preprocess_theme()論理条件を適用する場合は、単にinを使用できます。

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
しかし、平均で5つのCSSファイルと5つのJSファイルを含むtextext.jsのようなjQueryプラグインの場合、まだ多くの作業が必要です。
Druvision

1

最近含まれる必要がある外部ライブラリがたくさんあります。

それらをすべてテーマのjsディレクトリの下に置くことは、必ずしも望ましいとは限りません。これらのライブラリは、複数のjsファイルと複数のcssファイルで構成されることがあるためです。

最終libraries_get_path的に、ライブラリモジュールの機能を使用して、sites / all / libraries 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

pupblic Google CDNからjQueryをロードすることをお勧めします。詳細については、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インジェクターのようなモジュールをインストールする)上でこれを攻撃するレベル何によって決まる
クライヴ

たとえば、あなたがconditionnaly JavaScriptファイルを追加したい場合は、いくつかのケースでは、このように行うことが有益である
houmem
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.