मौजूदा Plugins Integrate करना
एक jQuery plugin reusable code है जो jQuery में एक feature add करता है। Plugins effects, widgets, validation, और दूसरी features add कर सकते हैं।
In this page:
Syntax
<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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p>Text</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight();
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
// Plugin script tags must come after the jQuery script tag,
// since they attach methods onto jQuery.fn which must already exist
$("#output").text(typeof $.fn.on);
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p>Text</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.highlight = function(options) {
const settings = $.extend({color: "yellow"}, options);
return this.css("background", settings.color);
};
$("p").highlight({color: "pink"});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div class="carousel">Slide</div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.highlight = function() { return this.css("background", "yellow"); };
$(document).ready(function() {
$(".carousel").highlight();
});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
jQuery(document).off();
$("#output").empty();
});
</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>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
// Before adding a plugin, check: required files, init method, options, browser support
$("#output").text("Checklist before integrating a third-party plugin");
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- 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: