วิธีทำให้ jQuery ทำงานกับ Drupal 7 - สำหรับมือใหม่

ฉันได้อ่านบทช่วยสอนออนไลน์มากมายเกี่ยวกับวิธีการทำให้ jQuery ทำงานบน drupal 7 แม้ว่าจะมีโค้ดและตัวอย่างมากมาย แต่สิ่งที่ฉันไม่สามารถหาได้คือโค้ดที่วางไว้ตรงไหน (อาจเป็นที่ชัดเจนสำหรับนักพัฒนาส่วนใหญ่)

ดังนั้นสิ่งที่ฉันทำคือ

1) ฉันสร้างบล็อกที่กำหนดเองใหม่

2) ตรงนั้นจาก drupal UI ฉันเขียนโค้ด

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3) ฉันแสดงบล็อก แต่ไม่ได้โหลด jquery

ฉันกำลังอ่านว่าฉันควรจะวางรหัสนี้ในไฟล์เทมเพลต, ไฟล์ธีม, ไฟล์ css, ไฟล์ข้อมูลและฉันไม่รู้อะไรเลย!

มันไม่ชัดเจนสำหรับฉันในไฟล์ที่แน่นอนและในพา ธ ที่ฉันต้องใส่โค้ดด้านบนเพื่อให้ทำงานได้อย่างถูกต้อง?

คำแนะนำใด ๆ?

ขอบคุณมาก!

สองสิ่งที่นี่:

1. หากคุณสามารถหลีกเลี่ยงการป้อน javascript และ PHP ลงในเว็บไซต์ผ่านทาง UI มันอาจจะช่วยให้คุณไม่ต้องกังวลกับเรื่องนี้อีก หากคุณไม่มีทางเลือกมันก็โอเค แต่นี่คือเหตุผลบางอย่างว่าทำไมมันจึงไม่ใช่ความคิดที่ดี: https://drupal.stackexchange.com/a/2512/10729 (โปรดทราบว่ามีวัตถุประสงค์เพื่อ PHP ไม่ใช่ js แต่ส่วนใหญ่ของ คะแนนยังคงอยู่สำหรับ js) ตัวอย่างโมดูลมีตัวอย่างของการสร้างบล็อกที่กำหนดเอง
2. สำหรับการแนบ js หากคุณต้องการในทุกหน้าคุณสามารถเพิ่มลงในไฟล์ข้อมูลของธีมได้ หากคุณต้องการในบางสถานที่ควรใช้drupal_add_js ()ดังนั้นจึงควรใช้เฉพาะในหน้าที่ต้องการ สำหรับการแนบพฤติกรรม js กับแบบฟอร์มคุณสามารถใช้#attached attribute ในไอเท็มฟอร์มของคุณ
3. หากคุณใช้ $ (เอกสาร). Ready () มันจะทำการเปิดจาวาสคริปต์ของคุณเมื่อโหลดหน้าเว็บอย่างไรก็ตามหากหน้านั้นได้รับการอัปเดตผ่าน ajax จาวาสคริปต์ของคุณจะไม่เริ่มทำงานอีกดังนั้นมาร์คอัปใหม่จะไม่ได้รับผลกระทบใด ๆ คือ. เพื่อจัดการกรณีเหล่านี้คุณควรใช้พฤติกรรม drupal แทนเอกสารพร้อม

ตัวอย่างเช่น:

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

ฉันแนะนำให้อ่านหน้าเหล่านี้: การ
จัดการ JavaScript ใน Drupal 7
การทำงานกับ JavaScript และ jQuery

ใน. jsของคุณเช่นรหัสนี้

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

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

   }

 };})(jQuery);

ในแม่แบบธีมของคุณสร้างhook_preprocess_htmlจากนั้นใช้drupal_add_js

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

เพียงแค่เปลี่ยนชื่อ

ไฟล์. js ของคุณควรมีลักษณะดังนี้:

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

        //your code

        }
    }
}(jQuery));

ใช้drupal_add_js ()ในโมดูลของคุณเพื่อเพิ่มไฟล์นี้ใน Drupal อ้างอิงที่ดีที่นี่และที่นี่

ล้างแคชบ่อยครั้ง;)