การเพิ่ม CSS และ JS ให้กับฟอร์มพร้อมไฟล์แนบ


36

ฉันจำเป็นต้องเพิ่มไฟล์ CSS และ JavaScript ภายนอกและท้องถิ่นลงในแบบฟอร์ม แต่ฉันไม่สามารถหาวิธีที่ถูกต้องในการทำเช่นนี้ ฉันเพียงแค่เพิ่มพา ธ และ URL สำหรับไฟล์ JS และ CSS หรือไม่

ฉันถือว่า$form['#attached']['css'][]และ$form['#attached']['js'][]เป็นสถานที่ที่ถูกต้องในการทำเช่นนี้ดังนั้นพวกเขาจะได้รับการโหลดใหม่ในการสร้างแบบฟอร์ม ฉันดูเหมือนจะหายไปบางสิ่งบางอย่าง

คำตอบ:


70

คุณได้ดูเอกสารประกอบแล้วหรือยัง?

แนบ CSS และ JS กับแบบฟอร์ม

http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#attached

$form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';

$form['#attached']['js'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.js';

ไฟล์ภายนอก

http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_process_attached/7

สามารถโหลดไฟล์ 'js' ภายนอกและ 'css' ได้ ตัวอย่างเช่น:

$build['#attached']['js']['http://code.jquery.com/jquery-1.4.2.min.js'] = array('type' => 'external');

ฉันมี. คุณสามารถบอกฉันว่ามันอ้างอิงถึงวิธีการจัดการไฟล์ CSS ภายนอกได้หรือไม่
vintorg

ไปที่api.drupal.org/api/drupal/includes%21common.inc/function/…แล้วค้นหา 'ภายนอก'
Alex Gill

2
เพียงบันทึก - คุณสามารถเพิ่ม JavaScript ตามที่อธิบายไว้ข้างต้นในแบบฟอร์มเฉพาะโดยการเพิ่มฟังก์ชั่นชื่อ<module name>_form_<form id>_alterในโมดูลของคุณ ค้นหา id ของแบบฟอร์มได้อธิบายไว้ที่นี่: drupal.stackexchange.com/questions/5802/…
Nux

1
ตัวอย่างนี้แย่มากเพราะคุณสมมติว่านี่เป็นไฟล์แนบเท่านั้นในแบบฟอร์ม!
doublejosh

6
ความคิดเห็นโดย doublejosh หมายถึง: โดยปกติแล้วหนึ่งควรผนวกกับอาร์เรย์มากกว่าแทนที่ ตัวอย่างควรจะเป็นเช่นนั้น$form['#attached']['css'][] = drupal_get_path('module', 'ajax_example') . '/ajax_example.css';เป็นต้น
tanius

11

นี่คือวิธีการเพิ่มอินไลน์ CSSในแบบฟอร์ม ...

$form['#attached']['css'][] = array(
  'data' => '.my-example-element { display: none; }',
  'type' => 'inline',
);

โปรดทราบว่าคุณควรจะเพิ่มไปยังอาร์เรย์แบบ CSS มากกว่าแทนที่ ความหมายที่คุณควรใช้: ['css'][] =แทนที่จะ['css'] =หลีกเลี่ยงการบีบส่วนเพิ่มเติมอื่น ๆ


6

นี่คือวิธีหนึ่งในการทำสิ่งนี้ผ่านทาง การเรียกใช้ฟังก์ชันโดยใช้#after_buildคุณสมบัติ เพียงส่ง id แบบฟอร์มของคุณในกรณีเปลี่ยน

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'my_form':
      $form['#after_build'][] = 'mymodule_after_build';
      break;
  }
}

function mymodule_after_build($form, &$form_state) {
  $path = drupal_get_path('module', 'mymodule');
  drupal_add_js ("$path/mymodule.js");
  return $form; 
}

นอกจากนี้คุณสามารถทำตามบทช่วยสอนที่ดีนี้การเพิ่ม css และ js ไปยังแบบฟอร์ม drupal

หวังว่านี่จะช่วยได้ :)


ในขณะนี้ยังคงทำงานใน Drupal 7 มันน่าจะเป็นสับ D6 , จำเป็นเพราะ#attachedไม่ได้อยู่ใน D6
tanius

คุณไม่ควรใช้drupal_add_jsแบบฟอร์ม คุณจะพบกับปัญหาสถานะการตรวจสอบ
doublejosh

1
@doublejosh นี้เป็นปีที่สามคำตอบเก่า :)
Prerit โมฮัน
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.