Cara membuat jquery bekerja di Drupal 7 - untuk Pemula

8

Saya telah membaca banyak tutorial online tentang cara membuat jquery bekerja pada drupal 7. Meskipun ada banyak baris kode dan contoh, apa yang tidak dapat saya temukan adalah potongan kode apa yang harus diletakkan di mana (mungkin sudah jelas bagi sebagian besar pengembang)

Jadi, yang saya lakukan adalah

1) Saya membuat blok khusus baru

2) Di sana dari UI drupal, saya menulis kode saya

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3) Saya menampilkan blok, tetapi jquery tidak dimuat.

Saya membaca bahwa saya harus meletakkan kode ini dalam file templat, file tema, file css, file info dan saya tidak tahu apa lagi!

Tidak jelas bagi saya di mana file persis dan di jalur mana saya harus meletakkan kode di atas agar berfungsi dengan baik?

Ada saran?

Terimakasih banyak!

apdr
sumber

Jawaban:

11

Beberapa hal di sini:

  1. Jika Anda dapat menghindari memasukkan javascript dan PHP ke situs melalui UI, itu mungkin akan menghemat masalah Anda. Jika Anda tidak memiliki alternatif itu ok tapi di sini ada beberapa alasan mengapa itu bukan ide bagus: https://drupal.stackexchange.com/a/2512/10729 (perhatikan bahwa itu ditujukan untuk PHP, bukan js tetapi sebagian besar poin masih berdiri untuk js). The contoh modul memiliki contoh menciptakan blok kustom.
  2. Untuk melampirkan js, jika Anda menginginkannya di semua halaman Anda dapat menambahkannya ke file info tema Anda. Jika Anda hanya menginginkannya di beberapa tempat, sebaiknya gunakan drupal_add_js () jadi hanya pada halaman-halaman yang diperlukan. Untuk melampirkan perilaku js ke formulir, Anda juga dapat menggunakan atribut #attached pada item formulir Anda.
  3. Jika Anda menggunakan $ (dokumen) .ready (), itu akan mem-javascript Anda ketika halaman dibuka, namun jika halaman diperbarui melalui ajax maka javascript Anda tidak akan menyala lagi, jadi markup baru tidak akan terpengaruh oleh apa pun javascript Anda adalah. Untuk menangani kasus ini, Anda harus menggunakan perilaku drupal alih-alih siap dokumen.

Sebagai contoh:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Do your thing here.
    }
  };
})(jQuery);

Saya sarankan membaca halaman ini:
Mengelola JavaScript di Drupal 7
Bekerja dengan JavaScript dan jQuery

jorok
sumber
7

Dalam .js Anda masukkan seperti kode ini;

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

     // All our js code here
     alert('Hello jQuery');
     // end our js code

   }

 };})(jQuery);

Di template.php tema Anda, buat hook_preprocess_html kemudian gunakan drupal_add_js

function themename_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/your.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

Ubah nama saja

sibiru
sumber
1
Perhatikan bahwa ini akan menambahkan javascript ke setiap halaman, yang mungkin atau mungkin tidak diinginkan.
rooby
1
Hehe ya ini akan menambahkan javascript ke setiap halaman. Biarkan saja @apdr coba dan uji dengan sepengetahuannya
sibiru
2
jika Anda ingin agar js dimuat pada setiap halaman melalui tema, tidakkah lebih masuk akal jika hanya mencantumkan file dalam file .info tema?
Jimajamma
3

File .js Anda akan terlihat seperti ini:

(function ($) {
    Drupal.behaviors.cdgi = {
        attach: function(context) {

        //your code

        }
    }
}(jQuery));

gunakan drupal_add_js () di modul Anda untuk menambahkan file ini di Drupal. referensi yang bagus di sini dan di sini .

sering membersihkan cache;)

please_reboot
sumber