Drupal में Jquery plugin कैसे जोड़ें?

Question

क्या मुझे मुख्य टेम्पलेट फ़ाइल में कोड पेस्ट करना चाहिए, या ड्रुपल 7 में नए जेकरी प्लगइन्स संलग्न करने का कोई अन्य अनुशंसित तरीका है?

Comments

आप किस तरह का JQuery प्लगइन इस्तेमाल करना चाहते हैं और क्यों? किसी भी प्रकार के जावास्क्रिप्ट को जोड़ने पर फ़ंक्शन drupal_add_js( api.drupal.org/api/drupal/includes--common.inc/function/… ) का उपयोग करके जोड़ा जाता है ।

— जेमी होलेर्न जूल

Qtip - craigsworks.com/projects/qtip/download

— Vonder

Answer 1

सबसे आसान तरीका यह है कि आप इसे अपनी थीम की .info फ़ाइल में जोड़ें:

scripts[] = js/my_jquery_plugin.js

एकमात्र अपवाद यह है कि यदि आप एक बाहरी संसाधन (CDN / होस्टेड स्क्रिप्ट) जोड़ रहे हैं, तो उस स्थिति में आपको drupal_add_js () का उपयोग करना चाहिए, जैसा कि जेमी होलेर्न द्वारा समझाया गया है।

Comments

लेकिन क्रोम कंसोल ने मुझे बदल दिया:Uncaught TypeError: undefined is not a function

— TangMonk

@ एलेक्स मुझे एक गूंगा सवाल मिला। मुझे पता है कि द्रुपाल jquery लाइब्रेरी का उपयोग कर रहा है। मान लीजिए कि मैं ".in [] = js / back_to_top.js "theme.info में विचार का उपयोग करके" बैक टू टॉप "मस्ती को जोड़ रहा हूं। क्या मुझे jquery फ़ाइल (जैसे jquery v1.9, v1.11) भी जोड़ने की आवश्यकता है?

— कोकोऑकिन

@ कोको आपको ठीक होना चाहिए

— एलेक्स वेबर

दरअसल नहीं। वह हमेशा काम नहीं करता है। दो उदाहरण: 1) स्क्रिप्ट [] = js / jquery.hoverintent.js 2) स्क्रिप्ट] [] = js / jquery.scrollme.js

— sea26.2

आम तौर पर यह करने के लिए एक अच्छा तरीका नहीं है। आप इसे किस पेज पर लोड करते हैं, इसे कैसे नियंत्रित करते हैं? का प्रयोग करेंdrupal_add_library()

— anthonygore

Answer 2

Drupal ने Jquery को इसके साथ पैक किया है।

एक js फ़ाइल जोड़ने के लिए आप अन्य पोस्ट में जिस तरह से descibed कर रहे हैं, drupal_add_js का उपयोग कर सकते हैं।

यह सरल मामलों में काम करेगा, लेकिन यदि आपके पास ऐसे प्लगइन्स होने लगते हैं जो अन्य प्लगइन्स पर निर्भर करते हैं। आप पुस्तकालयों एपीआई को देखना चाहते हो सकता है । मुझे उम्मीद है कि लोकप्रिय पुस्तकालयों का समर्थन करने के लिए समय मॉड्यूल बनाया जाएगा, सिस्टम_लॉकेट्स () में देखे गए JQuery यूआई के लिए कुछ हैं ।

इस उदाहरण में jQuery ui.accordion मॉड्यूल का उपयोग करने के लिए आप drupal_add_library () का उपयोग कर सकते हैं

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

यह सुनिश्चित करेगा कि js CSS और किसी भी लाइब्रेरी के साथ शामिल है जो इस पर निर्भर है। यह भी सुनिश्चित करेगा कि पुस्तकालयों को केवल एक बार शामिल किया जाए।

यदि आप कहते हैं कि आप किस लाइब्रेरी का उपयोग कर रहे हैं तो मैं इसे परिभाषित करने के लिए नमूना कोड प्रदान कर सकता हूं

इसलिए पहले पुस्तकालय को परिभाषित करने के लिए एक मॉड्यूल बनाएं (इसे क्यूटीप कहते हैं) और मॉड्यूल फ़ोल्डर के नीचे मॉड्यूल को जेएस फ़ोल्डर में अपलोड करें

उसके बाद लागू करें 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');

यह एक साधारण पुस्तकालय के लिए ओवरकिल हो सकता है लेकिन अगर आपको कई साइटों और विषयों पर बड़ी संख्या में पुस्तकालयों का प्रबंधन करना है तो यह जीवन को आसान बनाता है।

Comments

धन्यवाद, मैं क्यूटीपी लाइब्रेरी का उपयोग कर रहा हूं - craigsworks.com/projects/qtip

— Vonder

Answer 3

यदि आप केवल कुछ पृष्ठों (सभी नहीं) पर स्क्रिप्ट लोड करना चाहते हैं, तो आप इसे अपने टेम्पलेट को जोड़ सकते हैं। फाइल। बस इसके समान कोड जोड़ें:

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

मैंने केवल ड्रुपल 6 में इसका परीक्षण किया।

Answer 4

आप Drupal साइट में जिस थीम का उपयोग कर रहे हैं, उसमें एक जावास्क्रिप्ट फ़ाइल जोड़ सकते हैं script[] =। आपके द्वारा उपयोग की जा रही थीम की .info फ़ाइल में एक पंक्ति जोड़कर । मैं इस मामले पर तभी विचार करूंगा जब आप एक स्वनिर्धारित विषय का उपयोग कर रहे हों, या किसी मौजूदा विषय का संशोधित संस्करण जिसका नाम बदल दिया गया हो; यदि आप उपयोग कर रहे हैं तो मैं ऐसा करने का सुझाव नहीं दूंगा, उदाहरण के लिए, गारलैंड। इस तरह के मामलों में ऐसा करने का मतलब होगा कि हर बार थीम अपडेट होने के बाद सभी बदलावों को खोना, या अपडेटेड थीम फाइलों को कॉपी करना और फिर फाइलों के पिछले संस्करण में लागू किए गए समान बदलावों को फिर से लागू करना; यदि परिवर्तन केवल एक script[]पंक्ति जोड़ रहा है , तो परिवर्तन न्यूनतम है, और यह करने लायक हो सकता है, लेकिन इसका अर्थ यह भी होगा कि थीम फ़ाइलों वाली निर्देशिका में जावास्क्रिप्ट फ़ाइलों को नहीं जोड़ा गया है, या आपको प्रत्येक जावास्क्रिप्ट फ़ाइल को जोड़ना चाहिए समय विषय अद्यतन किया जाता है।

विकल्प के रूप में, आप एक कस्टम मॉड्यूल बना सकते हैं, या उस मौजूदा कस्टम मॉड्यूल में कोड जोड़ सकते हैं जो आप पहले से ही उस साइट के लिए उपयोग कर रहे हैं।
समर्थक यह है कि जावास्क्रिप्ट फ़ाइलों को हर थीम में जोड़ा जाएगा, साइट पर सक्षम सभी विषयों को बदलने की आवश्यकता के बिना डिफ़ॉल्ट या प्रशासन थीम के रूप में सेट किया गया है, और उपयोगकर्ता अपने लिए चयन कर सकते हैं।

जैसा कि पहले ही एक अन्य जवाब में बताया गया है, hook_init()वह हुक है जिसे आपको लागू करना चाहिए। मुझे लगता hook_library()है कि jQuery प्लग-इन जैसे जावास्क्रिप्ट फ़ाइलों के लिए Drupal 7 में जोड़ा गया नया हुक है।

Answer 5

आप सीधे Drupal व्यवस्थापक पैनल में स्क्रिप्ट जोड़ने के लिए Js इंजेक्टर मॉड्यूल का उपयोग कर सकते हैं । वैकल्पिक रूप से आप अपने पेज में अपने js फ़ाइल को जोड़ने के लिए drupal_add_js () फ़ंक्शन का उपयोग कर सकते हैं ।

Comments

मुझे लगता है कि यह वही है जो मुझे चाहिए, मैं आपके उत्तर को सर्वश्रेष्ठ के रूप में चुनूंगा, लेकिन मैं यह देखना चाहता हूं कि क्या अन्य समाधान पहले से मौजूद हैं?)

— ब्रूनो विंसेंट

आप इस लाइन को अपने theme.info script [] = 'path to your file' में जोड़ सकते हैं जो कि एक तरीका है, लेकिन इस विधि से js आपके सभी पेजों पर लोड हो जाएगा जो आमतौर पर एक अच्छा अभ्यास नहीं है। उपरोक्त दो विधियों से आप उन पृष्ठों पर js जोड़ सकते हैं जिन्हें आप चाहते हैं।

— शाबिर ए।

Answer 6

आप एक सरल कस्टम मॉड्यूल बना सकते हैं और इसे इस तरह जोड़ सकते हैं। कोड निम्नलिखित के समान होगा:

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

Comments

JQuery जोड़ने के लिए कस्टम मॉड्यूल? गंभीरता से?

— वंडर जूल

केवल अगर यह बाहरी है, तो मेरा उत्तर देखें

— एलेक्स वेबर

Answer 7

YOURTHEME_preprocess_theme()यदि आप तार्किक स्थिति लागू करना चाहते हैं तो आप बस इसका उपयोग कर सकते हैं:

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

और yourtheme.info फ़ाइल में भी जोड़ें:

scripts[] = js/yourplugin.js

Answer 8

यदि आप प्रसंग मॉड्यूल का उपयोग कर रहे हैं, तो प्रसंग जोड़ें आस्तियाँ स्थापित करें। वैश्विक संदर्भ, या एक विशिष्ट संदर्भ सेट अप करें, और पथ या मॉड्यूल द्वारा जेएस संपत्ति को जोड़ने के लिए एक नई प्रतिक्रिया जोड़ें।

कोई कोडिंग की आवश्यकता है।

Comments

धन्यवाद! इसका लाभ यह है कि आप पुस्तकालयों को विशिष्ट पथों तक सीमित कर सकते हैं, फिर भी कोई कोडिंग की आवश्यकता नहीं है।

— Druvision

लेकिन textext.js जैसे jQuery प्लगइन्स के लिए जिसमें औसतन 5 सीएसएस और 5 जेएस फाइलें शामिल हैं, यह अभी भी बहुत काम है।

— Druvision

Answer 9

कई बाहरी पुस्तकालय हैं जिन्हें आजकल शामिल करने की आवश्यकता है।

उन सभी को विषय के जेएस निर्देशिका के तहत लाना हमेशा वांछनीय नहीं होता है क्योंकि कभी-कभी उन पुस्तकालयों को कई जेएस फ़ाइलों और कई टॉस फ़ाइलों से बना होता है।

मैं libraries_get_pathपुस्तकालयों मॉड्यूल के कार्य का उपयोग करते हुए साइटों / सभी / पुस्तकालयों से उनके रास्ते लेने के लिए समाप्त हुआ :

यहां बताया गया है कि मैंने चयनित फ़ाइलों को कैसे जोड़ा है जो टेक्सटेक्स्ट से संबंधित हैं:

<?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");
  }

} ?>

मुझे यह सुनना अच्छा लगेगा कि क्या कोई बाहरी भंडार है जिसमें उन सभी पुस्तकालयों को पूर्वनिर्धारित किया गया है, इसलिए मुझे उन्हें मैन्युअल रूप से परिभाषित नहीं करना पड़ेगा।

Comments

आप इसमें पेज कैसे जोड़ेंगे?

— उमैर

Answer 10

मुझे लगता है कि आप Google Google CDN से विद्यार्थियों को लोड करने के लिए recomment करते हैं। अधिक जानकारी के लिए इस लिंक की जाँच करें: http://code.google.com/apis/lbooks/devguide.html#jquery। बस सुनिश्चित करें कि आप अपनी साइट में एक ही स्क्रिप्ट को कई बार लोड न करें।

Answer 11

यह मेरे लिए काम कर रहा है, एक jQuery प्लगइन के लिए एक मॉड्यूल बनाने की जरूरत नहीं है या एक स्थापित करें - मेरे टेम्पलेट में।

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

}

Answer 12

एक अन्य तरीका यह है कि निम्नलिखित कोड को page.tpl.php फ़ाइल
drupal_add_js (drupal_get_path ('theme', 'path / to / your / plugin'), '/plugin .js', 'file') में जोड़ना है।

Comments

टेम्प्लेट में सीधे कोड जोड़ना बुरा अभ्यास माना जाता है।

— mpdonadio

"कोड को सीधे टेम्पलेट्स में जोड़ना बुरा अभ्यास माना जाता है" ... तो SQL इंजेक्टर मॉड्यूल सबसे अच्छा अभ्यास है?

— ब्रूनो विंसेंट

काफी कुछ अन्य तरीकों का उल्लेख किया जा सकता है जिन्हें अच्छा अभ्यास माना जा सकता है @BrunoVincent, यह निर्भर करता है कि आप किस स्तर पर इस पर हमला करना चाहते हैं (किसी थीम में कोड, किसी कस्टम मॉड्यूल में कोड, या बस js इंजेक्टर जैसे मॉड्यूल को स्थापित करें)

— क्लाइव

यह इस तरह से करने के लिए उपयोगी कुछ मामलों में है, उदाहरण के लिए आप एक जावास्क्रिप्ट फ़ाइल सशर्त जोड़ना चाहते हैं

— houmem