Bagaimana cara menambahkan plugin Jquery ke Drupal?

Haruskah saya menempelkan kode ke file templat utama, atau adakah cara lain yang disarankan untuk melampirkan plugin Jquery di Drupal 7?

Cara termudah adalah menambahkannya pada file .info tema Anda:

scripts[] = js/my_jquery_plugin.js

Satu-satunya pengecualian adalah jika Anda menambahkan sumber daya eksternal (skrip CDN / host), dalam hal ini Anda harus menggunakan drupal_add_js (), seperti yang dijelaskan oleh Jamie Hollern

Drupal memiliki Jquery yang dikemas dengannya.

Untuk menambahkan file js, Anda dapat menggunakan drupal_add_js dengan cara dijelaskan dalam posting lain.

Ini akan berfungsi dalam kasus-kasus sederhana, tetapi jika Anda mulai memiliki plugin yang bergantung pada plugin lain. Anda mungkin ingin melihat api perpustakaan . Saya berharap dalam modul waktu akan dibuat untuk mendukung perpustakaan populer, ada beberapa untuk JQuery ui dibangun di lihat system_library () .

Dalam contoh ini untuk menambahkan modul jQuery ui.accordion Anda dapat menggunakan drupal_add_library ()

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

Ini akan memastikan js disertakan bersama dengan CSS dan semua perpustakaan yang bergantung padanya. Ini juga akan memastikan bahwa perpustakaan hanya disertakan sekali.

Jika Anda mengatakan perpustakaan mana yang Anda gunakan, saya bisa memberikan kode sampel untuk cara mendefinisikannya

Jadi pertama buat modul untuk mendefinisikan perpustakaan (sebut saja qtip) dan unggah modul ke folder js di bawah folder modul

kemudian implementasikan 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;
}

Kemudian untuk menambahkan file yang dimasukkan ke dalam kode Anda

drupal_add_library('qtip', 'qtip');

Ini mungkin berlebihan untuk perpustakaan sederhana tetapi jika Anda harus mengelola sejumlah besar perpustakaan di beberapa situs dan tema itu memang membuat hidup lebih mudah.

Jika Anda ingin memuat skrip hanya pada beberapa halaman (tidak semua), Anda dapat menambahkannya melalui file template.php Anda. Cukup tambahkan kode yang mirip dengan ini:

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

Saya hanya menguji ini di Drupal 6.

Anda dapat menambahkan file JavaScript ke tema yang Anda gunakan di situs Drupal, dengan menambahkan script[] =baris dalam file .info dari tema yang Anda gunakan. Saya akan mempertimbangkan kasus ini hanya jika Anda menggunakan tema yang disesuaikan, atau versi modifikasi dari tema yang sudah ada yang telah diganti namanya; Saya tidak akan menyarankan untuk melakukannya jika Anda menggunakan, misalnya, Garland. Melakukannya dalam kasus seperti itu berarti kehilangan semua perubahan setiap kali tema diperbarui, atau menyalin file tema yang diperbarui, dan kemudian menerapkan kembali perubahan yang sama yang diterapkan pada versi file sebelumnya; jika perubahan hanya menambahkan script[]baris, maka perubahannya minimal, dan itu bisa dilakukan, tetapi itu juga berarti file JavaScript tidak ditambahkan dalam direktori yang berisi file tema, atau Anda harus menambahkan file JavaScript setiap waktu tema diperbarui.

Sebagai alternatif, Anda dapat membuat modul khusus, atau menambahkan kode ke modul khusus yang sudah ada yang sudah Anda gunakan untuk situs itu.
Pronya adalah bahwa file JavaScript akan ditambahkan ke setiap tema diatur sebagai default, atau tema administrasi, tanpa perlu mengubah semua tema yang diaktifkan di situs, dan pengguna dapat memilih sendiri.

Seperti yang sudah dilaporkan dalam jawaban lain, hook_init()adalah hook yang harus Anda terapkan. Saya akan menambahkannyahook_library() adalah pengait baru yang ditambahkan dalam Drupal 7 untuk file Javascript seperti plug-in jQuery.

Anda dapat menggunakan modul Js Injector untuk menambahkan skrip langsung di panel admin Drupal. Atau Anda dapat menggunakan fungsi drupal_add_js () untuk menambahkan file js Anda ke halaman Anda.

Anda dapat membuat modul kustom sederhana dan menambahkannya seperti itu. Kode akan serupa dengan yang berikut:

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

Anda dapat menggunakannya YOURTHEME_preprocess_theme()jika Anda ingin menerapkan kondisi logis:

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

dan tambahkan juga di file yourtheme.info:

scripts[] = js/yourplugin.js

Jika Anda menggunakan modul Konteks, instal Aset Tambah Konteks. Menyiapkan konteks global, atau konteks tertentu, dan menambahkan reaksi baru untuk menambahkan aset JS melalui jalur atau modul.

Tidak diperlukan pengkodean.

Ada banyak perpustakaan eksternal yang perlu dimasukkan saat ini.

Menempatkan mereka semua di bawah direktori js tema tidak selalu diinginkan karena kadang-kadang perpustakaan tersebut terdiri dari beberapa file js dan beberapa file css.

Saya akhirnya menggunakan libraries_get_pathfungsi modul perpustakaan untuk mengambil jalur mereka dari situs / semua / direktori perpustakaan:

Inilah cara saya menambahkan file terpilih yang berhubungan dengan 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");
  }

} ?>

Saya akan senang mendengar jika ada repositori eksternal di mana semua perpustakaan itu sudah ditentukan sehingga saya tidak perlu mendefinisikannya masing-masing secara manual.

Saya menyarankan Anda untuk memuat jQuery dari Google CDN pupplic. Periksa tautan ini untuk info lebih lanjut: http://code.google.com/apis/libraries/devguide.html#jquery. Pastikan Anda tidak memuat skrip yang sama beberapa kali di situs Anda.

ini yang berhasil bagi saya, tidak perlu membuat modul untuk plugin jQuery atau menginstalnya - di template.php saya menambahkan:

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

}

cara lain adalah dengan menambahkan kode berikut ke file page.tpl.php
drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'). '/plugin.js', 'file');