अध्याय 9: jQuery प्लगइन्स (jQuery Plugins)

अध्याय 9: jQuery प्लगइन्स (jQuery Plugins)

jQuery प्लगइन्स jQuery की शक्ति और कार्यक्षमता को बढ़ाने के लिए बनाए गए एक्सटेंशन्स हैं। प्लगइन्स का उपयोग करके, आप अपने वेब पेज पर जटिल और उन्नत फीचर्स को आसानी से जोड़ सकते हैं, बिना मैन्युअल रूप से कोड लिखे। jQuery प्लगइन्स का उपयोग करना सरल है और वेब डेवलपर्स के लिए एक महत्वपूर्ण उपकरण है, जो उनके काम को सरल और कुशल बनाता है।

इस अध्याय में, हम jQuery प्लगइन्स की विभिन्न तकनीकों और उनके उपयोग के बारे में जानेंगे। हम निम्नलिखित महत्वपूर्ण बिंदुओं पर चर्चा करेंगे:

  1. jQuery प्लगइन्स का परिचय (Introduction to jQuery Plugins): jQuery प्लगइन्स क्या हैं और उनका महत्व।
  2. प्लगइन का उपयोग कैसे करें (How to Use a Plugin): एक jQuery प्लगइन को अपने प्रोजेक्ट में कैसे शामिल और उपयोग करें।
  3. लोकप्रिय jQuery प्लगइन्स (Popular jQuery Plugins): कुछ लोकप्रिय और उपयोगी jQuery प्लगइन्स का परिचय।
  4. कस्टम प्लगइन बनाना (Creating a Custom Plugin): अपना खुद का jQuery प्लगइन कैसे बनाएं।

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

प्लगइन्स का उपयोग (Using Plugins)

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

1. प्लगइन को शामिल करना (Including a Plugin)

सबसे पहले, आपको jQuery और jQuery प्लगइन की फाइलों को अपने HTML डोक्यूमेंट में शामिल करना होगा। आमतौर पर, यह फाइलें सीडीएन (CDN) से जोड़ी जाती हैं या आप इन्हें अपने प्रोजेक्ट में डाउनलोड कर सकते हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Plugin</title>
    <!-- jQuery लाइब्रेरी शामिल करना -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- jQuery प्लगइन शामिल करना (उदाहरण: jQuery UI) -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <!-- jQuery UI CSS फाइल शामिल करना -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
    <!-- आपका कंटेंट यहाँ आएगा -->
</body>
</html>

इस उदाहरण में, jQuery लाइब्रेरी और jQuery UI प्लगइन को सीडीएन से शामिल किया गया है।

2. प्लगइन का उपयोग करना (Using the Plugin)

एक बार जब आपने प्लगइन को अपने HTML डोक्यूमेंट में शामिल कर लिया है, तो आप अपने jQuery कोड में इस प्लगइन का उपयोग कर सकते हैं। प्लगइन आमतौर पर एक मेथड या फंक्शन के रूप में होता है जिसे आप jQuery सेलेक्टर पर कॉल कर सकते हैं।

उदाहरण: jQuery UI Datepicker प्लगइन का उपयोग

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Plugin</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(document).ready(function(){
            // Datepicker प्लगइन का उपयोग करना
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

इस उदाहरण में, जब पेज लोड होता है, तो #datepicker इनपुट फील्ड पर jQuery UI Datepicker प्लगइन लागू होता है, जिससे उपयोगकर्ता एक कैलेंडर पॉपअप के माध्यम से तारीख चुन सकते हैं।

3. प्लगइन ऑप्शंस और मेथड्स (Plugin Options and Methods)

ज्यादातर jQuery प्लगइन्स अतिरिक्त ऑप्शंस और मेथड्स के साथ आते हैं जो आपको प्लगइन के व्यवहार को कस्टमाइज़ करने की अनुमति देते हैं। आप इन ऑप्शंस और मेथड्स का उपयोग करके प्लगइन को अपनी आवश्यकताओं के अनुसार सेट कर सकते हैं।

उदाहरण: jQuery UI Datepicker प्लगइन के ऑप्शंस का उपयोग

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Plugin</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(document).ready(function(){
            // Datepicker प्लगइन के साथ ऑप्शंस का उपयोग करना
            $("#datepicker").datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

इस उदाहरण में, datepicker() मेथड के साथ विभिन्न ऑप्शंस (जैसे, dateFormat, changeMonth, और changeYear) का उपयोग करके Datepicker प्लगइन को कस्टमाइज़ किया गया है।

लोकप्रिय jQuery प्लगइन्स (Popular jQuery Plugins)

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

1. jQuery UI

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

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery UI Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(document).ready(function(){
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

इस उदाहरण में, jQuery UI डेटपिकर का उपयोग किया गया है, जो उपयोगकर्ता को एक पॉपअप कैलेंडर से तारीख चुनने की अनुमति देता है।

2. Slick

Slick एक लोकप्रिय और लचीला कारौसेल/स्लाइडर प्लगइन है, जो आपके वेब पेज पर खूबसूरत और रिस्पॉन्सिव स्लाइडर्स बनाने की अनुमति देता है।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Slick Slider Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.css"/>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').slick();
        });
    </script>
</head>
<body>
    <div class="slider">
        <div><img src="image1.jpg" alt="Image 1"></div>
        <div><img src="image2.jpg" alt="Image 2"></div>
        <div><img src="image3.jpg" alt="Image 3"></div>
    </div>
</body>
</html>

इस उदाहरण में, Slick प्लगइन का उपयोग करके एक सरल स्लाइडर बनाया गया है जो उपयोगकर्ता को स्लाइडिंग इमेज देखने की अनुमति देता है।

3. DataTables

DataTables एक शक्तिशाली jQuery प्लगइन है जो HTML टेबल्स को इंटरेक्टिव और फीचर-रिच बनाता है। यह सॉर्टिंग, पेजिनेशन, सर्चिंग और अन्य डेटा मैनेजमेंट सुविधाएं प्रदान करता है।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>DataTables Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function(){
            $('#example').DataTable();
        });
    </script>
</head>
<body>
    <table id="example" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <!-- अन्य डेटा रो -->
        </tbody>
    </table>
</body>
</html>

इस उदाहरण में, DataTables प्लगइन का उपयोग करके एक इंटरैक्टिव टेबल बनाया गया है जिसमें सॉर्टिंग, पेजिनेशन और सर्चिंग की सुविधाएं शामिल हैं।

4. Select2

Select2 एक प्लगइन है जो सेलेक्ट बॉक्स को एन्हांस करता है, जिससे वे अधिक यूजर-फ्रेंडली और सर्चेबल बन जाते हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Select2 Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#mySelect').select2();
        });
    </script>
</head>
<body>
    <select id="mySelect" style="width: 200px;">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</body>
</html>

इस उदाहरण में, Select2 प्लगइन का उपयोग करके एक सर्चेबल और एन्हांस्ड सेलेक्ट बॉक्स बनाया गया है।

5. jQuery Validation

jQuery Validation एक लोकप्रिय प्लगइन है जो फॉर्म वेलिडेशन को सरल और प्रभावी बनाता है। यह आसानी से कस्टमाइजेबल है और विभिन्न प्रकार के इनपुट फील्ड्स की वेलिडेशन को सपोर्ट करता है।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Validation Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myForm").validate();
        });
    </script>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

इस उदाहरण में, jQuery Validation प्लगइन का उपयोग करके एक सरल फॉर्म वेलिडेशन किया गया है।

कस्टम प्लगइन्स बनाना (Creating Custom Plugins)

jQuery कस्टम प्लगइन्स का उपयोग करके, आप अपनी आवश्यकता के अनुसार नई कार्यक्षमता को आसानी से जोड़ सकते हैं और इसे पुन: उपयोग कर सकते हैं। कस्टम प्लगइन बनाना एक बहुत ही शक्तिशाली तरीका है जिससे आप अपने कोड को और अधिक मॉड्यूलर और मेन्टेनेबल बना सकते हैं। इस सेक्शन में, हम देखेंगे कि कैसे एक सरल jQuery कस्टम प्लगइन बनाया जा सकता है।

1. कस्टम प्लगइन का बेसिक स्ट्रक्चर

jQuery कस्टम प्लगइन का बेसिक स्ट्रक्चर एक फ़ंक्शन के रूप में होता है जिसे jQuery के प्रोटोटाइप में जोड़ा जाता है। इसका सिंटैक्स निम्नलिखित है:

(function($){
    $.fn.customPlugin = function(options) {
        // डिफ़ॉल्ट सेटिंग्स
        var settings = $.extend({
            // डिफ़ॉल्ट ऑप्शंस
        }, options);

        // प्लगइन का मुख्य कोड
        return this.each(function() {
            // यहां आप अपने कोड को लागू कर सकते हैं
        });
    };
}(jQuery));

 

2. एक सरल कस्टम प्लगइन बनाना

नीचे एक उदाहरण है जो एक कस्टम प्लगइन बनाता है जो चयनित तत्वों का बैकग्राउंड रंग बदलता है:

<!DOCTYPE html>
<html>
<head>
    <title>Custom jQuery Plugin Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        (function($){
            $.fn.changeBackground = function(options) {
                // डिफ़ॉल्ट सेटिंग्स
                var settings = $.extend({
                    color: "yellow"
                }, options);

                // प्लगइन का मुख्य कोड
                return this.each(function() {
                    $(this).css("background-color", settings.color);
                });
            };
        }(jQuery));

        $(document).ready(function(){
            // प्लगइन का उपयोग करना
            $("#changeColorButton").click(function(){
                $("p").changeBackground({color: "lightblue"});
            });
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="changeColorButton">Change Background Color</button>
</body>
</html>

इस उदाहरण में, एक कस्टम प्लगइन changeBackground बनाया गया है जो चयनित पैराग्राफ के बैकग्राउंड रंग को बदलता है। जब बटन (#changeColorButton) पर क्लिक किया जाता है, तब सभी <p> तत्वों का बैकग्राउंड रंग lightblue हो जाता है।

3. कस्टम प्लगइन में ऑप्शंस और सेटिंग्स

कस्टम प्लगइन में ऑप्शंस और सेटिंग्स जोड़कर आप इसे अधिक लचीला बना सकते हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Custom jQuery Plugin with Options Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        (function($){
            $.fn.changeBackground = function(options) {
                // डिफ़ॉल्ट सेटिंग्स
                var settings = $.extend({
                    color: "yellow",
                    textColor: "black"
                }, options);

                // प्लगइन का मुख्य कोड
                return this.each(function() {
                    $(this).css({
                        "background-color": settings.color,
                        "color": settings.textColor
                    });
                });
            };
        }(jQuery));

        $(document).ready(function(){
            // प्लगइन का उपयोग करना
            $("#changeColorButton").click(function(){
                $("p").changeBackground({
                    color: "lightgreen",
                    textColor: "white"
                });
            });
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="changeColorButton">Change Background and Text Color</button>
</body>
</html>

इस उदाहरण में, changeBackground प्लगइन को और अधिक कस्टमाइजेबल बनाने के लिए textColor ऑप्शन जोड़ा गया है। जब बटन (#changeColorButton) पर क्लिक किया जाता है, तब सभी <p> तत्वों का बैकग्राउंड रंग lightgreen और टेक्स्ट रंग white हो जाता है।

4. कस्टम प्लगइन में मेथड्स जोड़ना

आप अपने कस्टम प्लगइन में मेथड्स जोड़ सकते हैं ताकि आप प्लगइन को और अधिक कार्यक्षमता प्रदान कर सकें।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Custom jQuery Plugin with Methods Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        (function($){
            var methods = {
                init : function(options) {
                    // डिफ़ॉल्ट सेटिंग्स
                    var settings = $.extend({
                        color: "yellow",
                        textColor: "black"
                    }, options);

                    // प्लगइन का मुख्य कोड
                    return this.each(function() {
                        $(this).css({
                            "background-color": settings.color,
                            "color": settings.textColor
                        });
                    });
                },
                reset : function() {
                    // रिसेट मेथड का कोड
                    return this.each(function() {
                        $(this).css({
                            "background-color": "",
                            "color": ""
                        });
                    });
                }
            };

            $.fn.changeBackground = function(methodOrOptions) {
                if (methods[methodOrOptions]) {
                    return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' +  methodOrOptions + ' does not exist on jQuery.changeBackground');
                }
            };
        }(jQuery));

        $(document).ready(function(){
            // प्लगइन का उपयोग करना
            $("#changeColorButton").click(function(){
                $("p").changeBackground({
                    color: "lightgreen",
                    textColor: "white"
                });
            });
            $("#resetButton").click(function(){
                $("p").changeBackground('reset');
            });
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="changeColorButton">Change Background and Text Color</button>
    <button id="resetButton">Reset Colors</button>
</body>
</html>

इस उदाहरण में, changeBackground प्लगइन में दो मेथड्स जोड़े गए हैं: init और reset। init मेथड का उपयोग बैकग्राउंड और टेक्स्ट रंग बदलने के लिए किया जाता है, जबकि reset मेथड का उपयोग रंगों को मूल स्थिति में वापस लाने के लिए किया जाता है। आप methodOrOptions पैरामीटर के माध्यम से इन मेथड्स को कॉल कर सकते हैं।

5. कस्टम इवेंट्स जोड़ना

कभी-कभी आप चाहते हैं कि आपका कस्टम प्लगइन कुछ इवेंट्स ट्रिगर करे ताकि अन्य कोड इन इवेंट्स को सुन सके और प्रतिक्रिया दे सके।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Custom jQuery Plugin with Events Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        (function($){
            var methods = {
                init : function(options) {
                    var settings = $.extend({
                        color: "yellow",
                        textColor: "black"
                    }, options);

                    return this.each(function() {
                        $(this).css({
                            "background-color": settings.color,
                            "color": settings.textColor
                        }).trigger('backgroundChanged', [settings.color, settings.textColor]);
                    });
                },
                reset : function() {
                    return this.each(function() {
                        $(this).css({
                            "background-color": "",
                            "color": ""
                        }).trigger('backgroundReset');
                    });
                }
            };

            $.fn.changeBackground = function(methodOrOptions) {
                if (methods[methodOrOptions]) {
                    return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' +  methodOrOptions + ' does not exist on jQuery.changeBackground');
                }
            };
        }(jQuery));

        $(document).ready(function(){
            // प्लगइन का उपयोग करना
            $("p").on('backgroundChanged', function(event, color, textColor){
                console.log('Background changed to: ' + color + ' and text color changed to: ' + textColor);
            });

            $("p").on('backgroundReset', function(){
                console.log('Background and text color reset.');
            });

            $("#changeColorButton").click(function(){
                $("p").changeBackground({
                    color: "lightgreen",
                    textColor: "white"
                });
            });
            $("#resetButton").click(function(){
                $("p").changeBackground('reset');
            });
        });
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="changeColorButton">Change Background and Text Color</button>
    <button id="resetButton">Reset Colors</button>
</body>
</html>

इस उदाहरण में, changeBackground प्लगइन में backgroundChanged और backgroundReset कस्टम इवेंट्स ट्रिगर किए गए हैं। ये इवेंट्स तब ट्रिगर होते हैं जब बैकग्राउंड और टेक्स्ट रंग बदले या रीसेट किए जाते हैं। आप इन इवेंट्स को सुनने के लिए .on() मेथड का उपयोग कर सकते हैं और प्रतिक्रिया दे सकते हैं।

निष्कर्ष

jQuery कस्टम प्लगइन्स का उपयोग करना और बनाना बहुत ही आसान और प्रभावी है। आप अपने कस्टम प्लगइन्स में विभिन्न ऑप्शंस, मेथड्स और इवेंट्स जोड़कर उन्हें और अधिक कार्यक्षम बना सकते हैं। इन तकनीकों का उपयोग करके, आप अपने कोड को अधिक मॉड्यूलर और पुन: उपयोग करने योग्य बना सकते हैं, जिससे आपका वेब डेवलपमेंट अनुभव और अधिक सुगम और प्रभावी हो जाता है। अब, आप इन कस्टम प्लगइन्स का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक इंटरैक्टिव और आकर्षक बना सकते हैं।

यह भी जानें

jquery tutorial in hindi 1 Good Vibes Only

अध्याय 8: jQuery AJAX

jquery tutorial in hindi 1 Good Vibes Only

अध्याय 2: jQuery सेटअप (jQuery Setup)

jquery tutorial in hindi 1 Good Vibes Only

अध्याय 5: jQuery इफेक्ट्स (jQuery Effects)

jquery tutorial in hindi 1 Good Vibes Only

अध्याय 6: jQuery एनीमेशन (jQuery Animation)



Table of Contents

→ Index