it-swarm-id.com

Bagaimana cara menambahkan plugin Jquery ke Drupal?

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

18
Vonder

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

15
Alex Weber

Drupal memiliki Jquery yang dikemas dengannya.

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

Ini akan berfungsi dalam kasus sederhana, tetapi jika Anda mulai memiliki plugin yang bergantung pada plugin lain. Anda mungkin ingin melihat libraries api . 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 dapat memberikan kode sampel untuk cara mendefinisikannya

Jadi pertama-tama 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.

12
Jeremy French

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.

5
Nebojsa

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

3
Shabir A.

Anda dapat menambahkan file JavaScript ke tema yang Anda gunakan di situs Drupal, dengan menambahkan baris script[] = Di 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 diubah 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 untuk menyalin file tema yang diperbarui, dan kemudian menerapkan kembali perubahan yang sama yang diterapkan pada versi file sebelumnya; jika perubahan hanya menambahkan baris script[], 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 kali 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 ditetapkan sebagai default, atau tema administrasi, tanpa perlu mengubah semua tema yang diaktifkan di situs, dan pengguna dapat memilih sendiri.

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

3
kiamlaluno

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

Anda cukup menggunakan dalam 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

1
gbwebservice

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.

1
ebeyrent

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_path fungsi modul perpustakaan untuk mengambil jalurnya 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.

1
Druvision

ini yang bekerja untuk saya, tidak perlu membuat modul untuk plugin jQuery atau menginstalnya - di templat.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',
    );

}
0

Saya sarankan Anda untuk memuat jQuery dari Google CDN pupblic. 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 .

0
ANDiTKO