मौजूदा Plugins Integrate करना
In this page:
<script src="jquery.js"></script>
<script src="plugin-name.js"></script> <!-- after jQuery -->
$("selector").pluginName({option: value});एक jQuery Plugin क्या है?
एक jQuery plugin jQuery.fn से attached एक function है ताकि यह किसी भी jQuery selection पर callable हो जाए, library की built-in क्षमता से आगे extend करते हुए।
उदाहरण: What is a jQuery Plugin?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight();
</script>
</body>
</html>एक Plugin Include करना
एक plugin आमतौर पर jQuery खुद के बाद रखे गए एक script tag से load किया जाता है, क्योंकि इसे नए methods attach करने से पहले jQuery.fn का पहले से exist करना ज़रूरी है।
उदाहरण: Include a Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// Plugin script tags must come after the jQuery script tag,
// since they attach methods onto jQuery.fn which must already exist
console.log(typeof $.fn.on);
</script>
</body>
</html>Plugin Options इस्तेमाल करना
अच्छे plugins अक्सर एक argument के रूप में options object accept करते हैं, users को behavior customize करने देते हुए — colors, speeds, callback functions — बिना।
उदाहरण: Use Plugin Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.highlight = function(options) {
const settings = $.extend({color: "yellow"}, options);
return this.css("background", settings.color);
};
$("p").highlight({color: "pink"});
</script>
</body>
</html>एक Plugin Initialize करना
कई plugins एक selected element पर एक method call करके initialize होते हैं, जैसे $('.carousel').slick(), और initialization आमतौर पर एक document-ready के अंदर किया जाता है।
उदाहरण: Initialize a Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="carousel">Slide</div>
<script>
$.fn.highlight = function() { return this.css("background", "yellow"); };
$(document).ready(function() {
$(".carousel").highlight();
});
</script>
</body>
</html>एक छोटा Plugin Integration Project
किसी project में third-party plugin add करने से पहले, इसकी documentation में required files, सही initialization method, available।
उदाहरण: Small Plugin Integration Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// Before adding a plugin, check: required files, init method, options, browser support
console.log("Checklist before integrating a third-party plugin");
</script>
</body>
</html>- jQuery से पहले plugin script include करना, ताकि
jQuery.fnundefined हो और plugin load होने में fail हो जाए। - एक ऐसा plugin method call करना जो exist नहीं करता, जैसे
$("p").highlightX(), एक typo या missing script की वजह से। - गलत form में options pass करना, जैसे object के बजाय एक string, ताकि plugin उन्हें ignore करे और अपने defaults इस्तेमाल करे।
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: