एक Custom Plugin लिखना
In this page:
(function ($) {
$.fn.pluginName = function (options) {
var settings = $.extend({ option: defaultValue }, options);
return this.each(function () {
// plugin logic
});
};
})(jQuery);एक Plugin शुरू करना
एक plugin लिखना $.fn में सीधे एक named function attach करने से शुरू होता है, ताकि इसे jQuery के अपने किसी built-in method जैसे ही invoke किया जा सके।
उदाहरण: Start a Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function() {
return this.css("border", "2px solid blue");
};
$(".box").myPlugin();
</script>
</body>
</html>Options Add करना
Options एक plugin को अलग-अलग situations में reuse करने लायक flexible बनाते हैं, और sensible defaults define करने का मतलब है कि plugin तब भी सही से काम करता है।
उदाहरण: Add Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function(options) {
const settings = $.extend({color: "blue"}, options);
return this.css("border", "2px solid " + settings.color);
};
$(".box").myPlugin({color: "red"});
</script>
</body>
</html>Elements के लिए each इस्तेमाल करना
किसी plugin के अंदर each() इस्तेमाल करें जब भी उसे current selection के हर element के लिए अलग से अपना operation perform करना हो, क्योंकि plugin को call किया जा सकता है।
उदाहरण: Use each for Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">One</div><div class="box">Two</div>
<script>
$.fn.myPlugin = function() {
return this.each(function() {
$(this).css("border", "2px solid blue");
});
};
$(".box").myPlugin();
</script>
</body>
</html>Global Variables से बचना
Plugin code को अपने helper variables private रखना चाहिए बजाय उन्हें globals बनाने के, क्योंकि global names उसी page पर दूसरे scripts के साथ silently collide कर सकते हैं।
उदाहरण: Avoid Global Variables
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
(function($) {
$.fn.myPlugin = function() {
const borderStyle = "2px solid blue";
return this.css("border", borderStyle);
};
})(jQuery);
$(".box").myPlugin();
</script>
</body>
</html>पूरा Custom Plugin
एक genuinely useful, reusable plugin एक clear, specific name; sensible defaults; एक flexible options object; this return करके chainability; और combine करता है।
उदाहरण: Complete Custom Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
(function($) {
$.fn.myPlugin = function(options) {
const settings = $.extend({color: "blue"}, options);
return this.each(function() {
$(this).css("border", "2px solid " + settings.color);
});
};
})(jQuery);
$(".box").myPlugin({color: "green"});
</script>
</body>
</html>- plugin को बिना
this.each(...)के लिखना, ताकि यह सिर्फ selection के पहले element को affect करे। $.extend({}, defaults, options)के बजाय सीधेoptionsassign करके defaults को overwrite करना, user द्वारा supply न की गई settings खोते हुए।- plugin के अंदर बिना इसे
(function ($) { ... })(jQuery)में wrap किए$इस्तेमाल करना, जो टूट जाता है जब$किसी दूसरी library द्वारा reassign किया जाता है।
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: