जावास्क्रिप्ट जोड़ना
From Joomla! Documentation
Note that a more up-to-date Joomla document covering this topic can be found at Adding JavaScript and CSS to the page, although it currently doesn't cover the more advanced topics at the bottom of this page.
जावास्क्रिप्ट (एकमा स्क्रिप्ट भी रूप में जाना) मुख्य रूप से विस्तार करने और एक अंत उपयोगकर्ता के अनुभव को बढ़ाने के लिए क्लाइंट साइड वेब साइट के विकास में इस्तेमाल एक पटकथा भाषा है। जूमला उनके एक्सटेंशन मौजूदा एपीआई तरीकों का उपयोग कर में जावास्क्रिप्ट को शामिल करने के लिए आसान करने के लिए उपयोग तंत्र के साथ डेवलपर्स प्रदान करता है। अपने Joomla एक्सटेंशन में जावास्क्रिप्ट सहित के लिए तरीकों की एक संख्या में हैं, इनमें से कुछ नीचे वर्णित हैं।
उपयोग
वहाँ अपने कोड जूमला एपीआई का उपयोग करने में जावास्क्रिप्ट एम्बेड करने के लिए तीन तरीके हैं; JDocument :: addScriptDeclaration, .html # addScript JDocument :: addScript और स्क्रिप्ट। इन तरीकों में अपने घटक के दृश्य कक्षा में या तो बुलाया जाना चाहिए <टीटी> <yourcomponent> / विचार / <yourview> /view.html.php </ टीटी> या टेम्पलेट स्क्रिप्ट <टीटी> <yourcomponent> / विचार / <yourview> / Tmpl / <yourtemplate> .php </ टीटी> या एक मॉड्यूल के मामले में, अपने टेम्पलेट स्क्रिप्ट <टीटी> <yourmodule> / Tmpl / <yourtemplate> .php </ टीटी> में।
इनलाइन जावास्क्रिप्ट
// API: जावा स्क्रिप्ट कोड के ब्लॉक का उपयोग JDocument वर्ग '[http एक घटक या मॉड्यूल के प्रदर्शन टेम्पलेट के भीतर सीधे घोषित किया जा सकता है। joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration addScriptDeclaration] विधि:
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');
?>बाहरी जावास्क्रिप्ट
वैकल्पिक रूप से, आप एक अलग फाइल में अपने जावास्क्रिप्ट को अलग करने की इच्छा हो सकती है। एक बाहरी फ़ाइल में आपके जावास्क्रिप्ट को अलग अपने टेम्पलेट कोड आसान विशेष रूप से पढ़ने के लिए यदि जावास्क्रिप्ट लंबे या जटिल है बना सकते हैं।
वहाँ जूमला का उपयोग कर एक जावास्क्रिप्ट फ़ाइल को शामिल करने के दो तरीके हैं! एपीआई। पहले JDocument वर्ग 'का उपयोग शामिल JDocument.html # addScript addScript विधि:
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>दूसरी JHTML वर्ग 'का उपयोग करता है .html # स्क्रिप्ट स्क्रिप्ट विधि:
<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>एपीआई 3.x में बदल गया है, तो दूसरा पैरामीटर एक स्ट्रिंग नहीं हो सकता। आप वास्तव में इस विधि का उपयोग करने की जरूरत है, तो आप अपने जावास्क्रिप्ट फाइल करने के लिए पूर्ण लिंक शामिल करना चाहिए:
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
?>You can use options in a third parameter. This example shows the options version and relative . The file example should be saved in the folder media/com_example/js/example.min.js. So you do NOT need to insert the js in the path you insert as second parameter.
<?php
JHtml::_('script', 'com_example/example.min.js', array('version' => 'auto', 'relative' => true));
?>== == विवरण जूमला एपीआई JDocument :: addScriptDeclaration, दस्तावेज़ / JDocument.html # addScript JDocument :: addScript और स्क्रिप्ट तरीकों जावास्क्रिप्ट जूमला के index.php में Jdoc माध्यम एम्बेड सिर का टैग:
<jdoc:include type="head"/>JDocument :: addScript या का उपयोग /JHTML.html#script स्क्रिप्ट एम्बेड करने के लिए जावास्क्रिप्ट index.php निम्न HTML प्रतिपादन में नतीजा होगा शामिल तरीके:
<head>
...
<script type="text/javaScript" src="/media/system/js/sample.js"></script>
...
</head>वर्ग पद्धति को कॉल JDocument :: addScriptDeclaration निम्न HTML प्रस्तुत करना होगा:
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>इन विधियों का प्रयोग अत्यधिक की सिफारिश की है के रूप में यह स्पष्ट रूप से मुख्य PHP कोड से दूसरे पटकथा भाषा (जावास्क्रिप्ट) differentiates, सुनिश्चित करता है सभी जावास्क्रिप्ट सही ढंग </ head> <head> के बीच एम्बेडेड है टैग और, JDocument :: addScript और JHTML के मामले में :: स्क्रिप्ट सुनिश्चित करता है कि एक जावास्क्रिप्ट फ़ाइल केवल एक बार (यानी कोई जे एस फ़ाइल दोहराव नहीं है) शामिल है।
एक जावास्क्रिप्ट ढांचे का उपयोग
एक जावास्क्रिप्ट ढांचे के एक परिचित, सुसंगत और मंच स्वतंत्र रास्ते में विभिन्न कोडिंग कार्यों से निपटने के लिए सामान्य कार्यक्षमता के साथ डेवलपर्स प्रदान करता है। एक ढांचा डेवलपर विभिन्न वेब ब्राउज़र में एक खास समारोह और सॉफ्टवेयर की आवश्यकताओं पर ध्यान देने को लागू की जटिलताओं के बारे में भूल करने के लिए सक्षम बनाता है।
दो जावास्क्रिप्ट चौखटे जूमला 3.x के हिस्से के रूप में प्रदान की जाती हैं; jQuery और Mootools। jQuery के एक नव शुरू की रूपरेखा जो जूमला के नए बूटस्ट्रैप एचटीएमएल ढांचे के साथ एकीकृत करता है; जूमला की विरासत जावास्क्रिप्ट पुस्तकालय जो अब jQuery से रह रहा है और 3 पार्टी एक्सटेंशन के साथ पीछे संगतता के लिए शामिल किया गया है।
लगभग सभी मामलों में आप एक रूपरेखा का उपयोग करना चाहिए जब अपने एक्सटेंशन या टेम्पलेट्स में जावास्क्रिप्ट को विकसित करने और एक अन्य सहित जूमला के एपीआई के साथ बहुत सरल है।
जूमला 3.x jQuery
कृपया पर गाइड को देखने जूमला 3.x में जावास्क्रिप्ट चौखटे जूमला 3.x में एक रूपरेखा सहित के बारे में जानकारी के लिए
जूमला 1.5 / 2.5 Mootools
जब तक आप जावास्क्रिप्ट कोड है जो लाभ उठाता Mootools या आप जूमला 2.5 के लिए एक विस्तार विकसित कर रहे हैं या इससे पहले यह आप jQuery के बजाय का उपयोग की सिफारिश की है बनाए रखने रहे हैं।
सबसे पहले, आप अपने विस्तार में Mootools कोड को शामिल करने की आवश्यकता होगी। अपने विस्तार में Mootools ढांचे में शामिल करने के लिए, यदि आप अपने view.html.php या Tmpl फाइल करने के लिए निम्न कोड जोड़ें:
जूमला 1.5 के लिए
JHTML::_('behavior.mootools');जूमला 2.5 के लिए
JHtml::_('behavior.framework');इसी तरह के jQuery के ढांचे के बयान के रूप में एक ही परिणाम में ऊपर कोड परिणाम; कि यह सुनिश्चित करता है Mootools सही ढंग से और केवल एक बार शामिल है।
तब का उपयोग कर Mootools jQuery के लिए लगभग समान है:
JFactory::getDocument()->addScriptDeclaration('
window.addEvent("domready", function() {
alert($("list").getElements("li").length);
});
');Mootools के बारे में अधिक जानकारी http://mootools.net/ पर उपलब्ध है। एपीआई प्रलेखन के लिए, यात्रा http://mootools.net/docs/core।
3 पार्टी डेवलपर्स के लिए महत्वपूर्ण नोट
आप एक कस्टम टेम्पलेट ओवरराइड या विस्तार के लिए एक कस्टम जेएस फाइल को जोड़ने की जरूरत है कि पैदा कर रहे हैं, तो अपने कस्टम जे एस फ़ाइलों से पहले इस तरह jQuery या Mootools के रूप में महत्वपूर्ण निर्भरता को जोड़ने के लिए सुनिश्चित करें। जे एस रूपरेखा फ़ाइलें हमेशा किसी भी अन्य फ़ाइलों से पहले लोड किया जाना चाहिए यकीन है कि वे पहले मार डाला बनाने के लिए, अन्यथा अन्य फ़ाइलों है कि लोड व्यवस्थाएं की जरूरत है वे जेएस अपवादों में खत्म हो जाने की संभावना है पहले।
Protostar या Beez जैसे कुछ टेम्पलेट्स सभी निर्भरता तुम जैसे कार्यों का उपयोग करने की जरूरत डालने
JHtml::_('bootstrap.framework');
JQuery + बूटस्ट्रैप लोड करने के लिए, लेकिन आप अपने एक्सटेंशन या कस्टम टेम्पलेट्स ओवरराइड पर यह वास्तव में भरोसा नहीं करना चाहिए। हमेशा यकीन है कि अपने विस्तार या कस्टम ओवरराइड निर्भरता आप की जरूरत है इससे पहले कि टेम्पलेट यह करता लोड करना, मैं बाद में क्यों समझा जाएगा:
उदाहरण के लिए यदि आप एक कस्टम टेम्पलेट ओवरराइड कि कुछ jQuery स्क्रिप्ट है कि सभी पृष्ठों जहां कि टेम्पलेट ओवरराइड इस्तेमाल किया जा रहा है पर फैंसी बातें करता है के साथ एक जे एस फ़ाइल सम्मिलित करने की जरूरत मिला है। उस मामले में आप कि ओवरराइड फ़ाइल के शीर्ष खंड पर यह घोषणा करनी चाहिए:
JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
आप जूमला पर डाल करने की योजना है कि आप एक 3 पार्टी विस्तार विकसित कर रहे हैं! एक्सटेंशन निर्देशिका आप कुछ इस तरह करना चाहिए:
if($params->get('add_extension_resources', false))
{
JHtml::_('jquery.framework');
$doc->addScript('media/com_fancy/js/fancy-script.js');
}
सशर्त खंड जोड़ने या विस्तार संसाधनों है 'नहीं' 'दृढ़ता से प्रोत्साहित किया' और एक 'अच्छा अभ्यास' क्योंकि यह 3 पार्टी डेवलपर्स जो अपने एक्सटेंशन का उपयोग नहीं करना चाहते करने के लिए लचीलापन देता है माना के लिए तय करना संसाधनों और उपयोग कस्टम / जूमला के साथ लड़ाई करने के लिए बिना संशोधित फ़ाइलों! workarounds और भाड़े का उपयोग करते हुए आदेश डुप्लिकेट और संघर्ष से बचने के लिए अपने मूल एक्सटेंशन संसाधनों को दूर करने में सक्षम हो।
स्पष्टीकरण
आप Protostar टेम्पलेट से index.php के स्रोत कोड की जाँच करें, तो आप देख सकते हैं कि बयानों
JHtml::_('bootstrap.framework');
बयान से पहले जिस तरह से जोड़ा जाता है
<jdoc:include type="head" />
आपको लगता है कि इस ढांचे फ़ाइलें और अपने 3 पार्टी फ़ाइलों की तरह के तरीकों का उपयोग कर सकते हैं
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
$doc->addScript('media/com_fancy/js/fancy-script.js');
सही जगह पर सही क्रम में जोड़ दिया जाएगा, 'लेकिन यह मामला नहीं है' ', क्योंकि एक्सटेंशन फ़ाइलों और टेम्पलेट ओवरराइड फ़ाइलों कार्रवाई कर रहे हैं' 'पहली बार' और index.php अपने वर्तमान की फ़ाइल टेम्पलेट कार्रवाई की है 'पिछले' । इस कारण होगा कि अपने कस्टम जे एस फ़ाइलें पहली प्रविष्ट हो और ढांचे टेम्पलेट से डाली गई फ़ाइलों के बाद डाला मिलता है।
इसका कारण यह जूमला होता है! (जैसे $ डॉक्टर> addScript के रूप में) एपीआई जे एस फ़ाइलें रास्तों स्टोर करने के लिए एक सरणी का उपयोग करता है और वे एक ही क्रम में वे उस सरणी (फीफो ढेर) में डाला जहां दस्तावेज़ में गाया मिलता है। इसके अलावा, एक बार एक फ़ाइल पथ सरणी और एक अन्य API कॉल पर डाला जाता है एक ही फाइल इस कार्रवाई डुप्लिकेट से बचने के लिए नजरअंदाज कर दिया है डालने की कोशिश करता है। इसका यह भी मतलब है कि फ़ाइलों के क्रम में जब एक ही फाइल में कई बार डाला जा करने का प्रयास किया जाता है बदल नहीं है।
कर कहा है कि इस काम को करने
JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
पर अपने कस्टम ओवरराइड और विस्तार टेम्पलेट्स, आवश्यक है और फोन के साथ नुकसान या संघर्ष का कारण नहीं है
JHtml::_('bootstrap.framework');
अपने टेम्पलेट index.php फ़ाइल पर।
बाहरी कड़ियाँ
https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework
https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework
http://en.wikipedia.org/wiki/JavaScript
http://www.w3schools.com/js/default.asp
श्रेणी: टेम्पलेट्स
श्रेणी: मॉड्यूल
श्रेणी: अवयव
श्रेणी: प्लगइन्स
श्रेणी: ट्यूटोरियल
श्रेणी: जावास्क्रिप्ट