จะเพิ่ม Jquery plugin ใน Drupal ได้อย่างไร?

ฉันควรวางโค้ดในไฟล์เทมเพลตหลักหรือมีวิธีอื่นที่แนะนำในการแนบปลั๊กอิน Jquery ใหม่ใน Drupal 7

วิธีที่ง่ายที่สุดคือเพียงเพิ่มลงในไฟล์. info ของธีมของคุณ:

scripts[] = js/my_jquery_plugin.js

ข้อยกเว้นเพียงอย่างเดียวคือถ้าคุณกำลังเพิ่มทรัพยากรภายนอก (สคริปต์ CDN / โฮสต์) ซึ่งในกรณีนี้คุณควรใช้ drupal_add_js () ตามที่อธิบายโดย Jamie Hollern

Drupal ได้บรรจุ Jquery ไว้แล้ว

ในการเพิ่มไฟล์ js คุณสามารถใช้ drupal_add_js ในแบบที่อยู่ในโพสต์อื่น

สิ่งนี้จะทำงานได้ในกรณีง่าย ๆ แต่ถ้าคุณเริ่มมีปลั๊กอินซึ่งขึ้นอยู่กับปลั๊กอินอื่น ๆ คุณอาจต้องการที่จะมองไปที่ห้องสมุด API ผมคาดว่าในโมดูลเวลาจะได้รับการสร้างขึ้นเพื่อสนับสนุนห้องสมุดที่นิยมมีบางอย่างสำหรับ jQuery UI การสร้างขึ้นในดูsystem_library ()

ในตัวอย่างนี้เพื่อรวมโมดูล jQuery ui.accordion คุณสามารถใช้drupal_add_library ()

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

สิ่งนี้จะทำให้แน่ใจว่า js นั้นถูกรวมเข้ากับ CSS และไลบรารีใด ๆ ที่ขึ้นอยู่กับมัน นอกจากนี้ยังจะทำให้แน่ใจว่าห้องสมุดจะรวมเพียงครั้งเดียว

หากคุณบอกว่าคุณใช้ห้องสมุดใดฉันสามารถให้รหัสตัวอย่างสำหรับวิธีการกำหนด

ดังนั้นก่อนสร้างโมดูลเพื่อกำหนดไลบรารี (เรียกว่า qtip) และอัปโหลดโมดูลไปยังโฟลเดอร์ js ใต้โฟลเดอร์โมดูล

จากนั้นใช้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;
}

จากนั้นเพิ่มไฟล์ใส่รหัสของคุณ

drupal_add_library('qtip', 'qtip');

สิ่งนี้อาจเกินความจำเป็นสำหรับห้องสมุดที่เรียบง่าย แต่ถ้าคุณต้องจัดการห้องสมุดจำนวนมากในหลาย ๆ ไซต์และธีมมันทำให้ชีวิตง่ายขึ้นมาก

หากคุณต้องการโหลดสคริปต์เฉพาะในบางหน้า (ไม่ใช่ทั้งหมด) คุณสามารถเพิ่มสคริปต์ลงในไฟล์ template.php ของคุณ เพียงเพิ่มรหัสที่คล้ายกับสิ่งนี้:

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

ฉันทดสอบสิ่งนี้ใน Drupal 6 เท่านั้น

คุณสามารถเพิ่มไฟล์ JavaScript ลงในธีมที่คุณใช้ในไซต์ Drupal โดยเพิ่มscript[] =บรรทัดในไฟล์. info ของธีมที่คุณใช้ ฉันจะพิจารณากรณีนี้เฉพาะเมื่อคุณใช้ชุดรูปแบบที่กำหนดเองหรือรุ่นที่มีการปรับเปลี่ยนของชุดรูปแบบที่มีอยู่ที่ถูกเปลี่ยนชื่อ; ฉันจะไม่แนะนำให้ทำถ้าคุณใช้การ์แลนด์ การทำเช่นนี้ในกรณีดังกล่าวจะทำให้สูญเสียการเปลี่ยนแปลงทุกครั้งที่มีการอัพเดตชุดรูปแบบหรือคัดลอกไฟล์ชุดรูปแบบที่ได้รับการปรับปรุงแล้วนำการเปลี่ยนแปลงแบบเดียวกันมาใช้กับไฟล์รุ่นก่อนหน้าอีกครั้ง หากการเปลี่ยนแปลงนั้นเป็นการเพิ่มscript[]บรรทัดเท่านั้นการเปลี่ยนแปลงนั้นจะมีเพียงเล็กน้อยและอาจคุ้มค่าที่จะทำ แต่ก็หมายความว่าไฟล์ JavaScript จะไม่ถูกเพิ่มในไดเร็กทอรีที่มีไฟล์ธีมหรือคุณควรเพิ่มไฟล์ JavaScript ทุก เวลาชุดรูปแบบมีการปรับปรุง

คุณสามารถสร้างโมดูลที่กำหนดเองหรือเพิ่มรหัสลงในโมดูลที่กำหนดเองที่คุณใช้อยู่สำหรับไซต์นั้นได้
ข้อดีคือไฟล์ JavaScript จะถูกเพิ่มเข้าไปในทุกธีมถูกตั้งเป็นค่าเริ่มต้นหรือธีมการดูแลระบบโดยไม่จำเป็นต้องเปลี่ยนธีมทั้งหมดที่เปิดใช้งานบนเว็บไซต์และผู้ใช้สามารถเลือกได้เอง

ตามที่รายงานไปแล้วในคำตอบอื่นhook_init()เบ็ดคือสิ่งที่คุณควรใช้ ฉันจะเพิ่มนั่นhook_library()คือเบ็ดใหม่ที่เพิ่มใน Drupal 7 สำหรับไฟล์ Javascript เช่น jQuery ปลั๊กอิน

คุณสามารถใช้โมดูลJs Injectorเพื่อเพิ่มสคริปต์โดยตรงในแผงควบคุมของ Drupal หรือคุณสามารถใช้ฟังก์ชั่นdrupal_add_js ()เพื่อเพิ่มไฟล์ js ของคุณไปยังหน้าของคุณ

คุณสามารถสร้างโมดูลที่กำหนดเองง่าย ๆ และเพิ่มเข้าไปได้ รหัสจะคล้ายกับต่อไปนี้:

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

คุณสามารถใช้YOURTHEME_preprocess_theme()หากคุณต้องการใช้เงื่อนไขตรรกะ:

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

และเพิ่มในไฟล์ yourtheme.info:

scripts[] = js/yourplugin.js

หากคุณกำลังใช้โมดูลบริบทให้ติดตั้งเพิ่มบริบท ตั้งค่าบริบทส่วนกลางหรือบริบทที่เฉพาะเจาะจงและเพิ่มปฏิกิริยาใหม่เพื่อเพิ่มเนื้อหา JS โดยเส้นทางหรือโมดูล

ไม่จำเป็นต้องมีการเข้ารหัส

ปัจจุบันมีห้องสมุดภายนอกจำนวนมากที่ต้องรวมอยู่ในปัจจุบัน

การวางพวกเขาทั้งหมดไว้ในไดเรกทอรี js ของชุดรูปแบบอาจไม่เป็นที่ต้องการเสมอไปเนื่องจากบางครั้งไลบรารีเหล่านั้นประกอบด้วยไฟล์ js หลายไฟล์และไฟล์ css หลายไฟล์

ฉันลงเอยด้วยการใช้libraries_get_pathฟังก์ชั่นของโมดูลไลบรารีเพื่อใช้พา ธ จากไซต์ / all / ไลบรารี dir:

นี่คือวิธีที่ฉันเพิ่มไฟล์ที่เลือกซึ่งเกี่ยวข้องกับ 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");
  }

} ?>

ฉันชอบที่จะได้ยินว่ามีพื้นที่เก็บข้อมูลภายนอกซึ่งไลบรารีเหล่านั้นทั้งหมดถูกกำหนดไว้ล่วงหน้าดังนั้นฉันจะไม่ต้องกำหนดด้วยตนเอง

ฉันขอแนะนำให้คุณโหลด jQuery จาก pupblic Google CDN ตรวจสอบลิงค์นี้เพื่อดูข้อมูลเพิ่มเติม: http://code.google.com/apis/lไลบรารี/devguide.html#jquery. เพียงแค่ให้แน่ใจว่าคุณไม่ได้โหลดสคริปต์เดียวกันหลายครั้งในเว็บไซต์ของคุณ

นี่คือสิ่งที่ใช้งานได้สำหรับฉันไม่จำเป็นต้องสร้างโมดูลสำหรับปลั๊กอิน jQuery หรือติดตั้ง - ใน template.php ของฉันฉันเพิ่ม:

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

}

อีกวิธีหนึ่งคือการเพิ่มรหัสต่อไปนี้ไปยังไฟล์
page.tpl.php drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin') '/plugin.js', 'file');