JqueryUI - कक्षा जोड़ें

इस अध्याय में चर्चा करेंगे addClass()विधि, जो jQueryUI दृश्य प्रभावों को प्रबंधित करने के लिए उपयोग की जाने वाली विधियों में से एक है। addClass () विधि CSS गुणों में परिवर्तन को एनिमेट करने की अनुमति देता है।

AddClass () विधि सभी शैली परिवर्तनों को एनिमेट करते हुए मिलान किए गए तत्वों में निर्दिष्ट कक्षाएं जोड़ें।

वाक्य - विन्यास

JQueryUI के संस्करण 1.0 में जोड़ा गया

addClass() विधि का मूल सिंटैक्स इस प्रकार है -

.addClass( className [, duration ] [, easing ] [, complete ] )

अनु क्रमांक।	पैरामीटर और विवरण
1	className यह एक स्ट्रिंग है जिसमें एक या अधिक सीएसएस कक्षाएं (रिक्त स्थान द्वारा अलग) हैं।
2	duration यह संख्या या स्ट्रिंग का प्रकार है, और प्रभाव के मिलीसेकंड की संख्या को इंगित करता है। 0 का मान तत्व को नई शैली में सीधे लेता है, बिना प्रगति के। इसका डिफ़ॉल्ट मान 400 है ।
3	easing यह टाइप स्ट्रिंग का है और प्रभाव में प्रगति के रास्ते को इंगित करता है। इसका डिफ़ॉल्ट मान स्विंग है । संभावित मूल्य यहां हैं ।
4	complete यह एक कॉलबैक विधि है जिसे प्रत्येक तत्व के लिए कहा जाता है जब इस तत्व के लिए प्रभाव पूरा होता है।

JQueryUI के संस्करण 1.9 में जोड़ा गया

संस्करण 1.9 के साथ, यह विधि अब बच्चों के विकल्प का समर्थन करती है , जो कि वंशज तत्वों को भी चेतन करेगी।

.addClass( className [, options ] )

अनु क्रमांक।	पैरामीटर और विवरण
1	className यह एक स्ट्रिंग है जिसमें एक या अधिक सीएसएस कक्षाएं (रिक्त स्थान द्वारा अलग) हैं।
2	options यह सभी एनीमेशन सेटिंग्स का प्रतिनिधित्व करता है। सभी गुण वैकल्पिक हैं। संभावित मूल्य हैं - duration- यह प्रकार संख्या या स्ट्रिंग का है, और प्रभाव के मिलीसेकंड की संख्या को इंगित करता है। 0 का मान तत्व को नई शैली में सीधे लेता है, बिना प्रगति के। इसका डिफ़ॉल्ट मान 400 है । easing- यह टाइप स्ट्रिंग का है और प्रभाव में प्रगति के रास्ते को इंगित करता है। इसका डिफ़ॉल्ट मान स्विंग है । संभावित मूल्य यहां हैं । complete - यह प्रत्येक तत्व के लिए कॉलबैक पद्धति है जिसे इस तत्व के लिए प्रभाव पूरा होने पर बुलाया जाता है। children- यह प्रकार बूलियन का है और यह दर्शाता है कि क्या मिलान अतिरिक्त रूप से मिलान किए गए तत्वों के सभी वंशजों पर लागू होना चाहिए। इसका डिफ़ॉल्ट मान गलत है । queue- यह बूलियन या स्ट्रिंग का प्रकार है और यह दर्शाता है कि एनीमेशन को प्रभाव कतार में रखना है या नहीं। इसका डिफ़ॉल्ट मान सत्य है ।

उदाहरण

निम्न उदाहरण addClass () विधियों के उपयोग को दर्शाता है ।

सिंगल क्लास पास करना

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं addclassexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -

बॉक्स पर कक्षाओं के प्रभाव को देखने के लिए क्लास जोड़ें और निकालें बटन पर क्लिक करें ।

कई कक्षाएं पास करना

यह उदाहरण दिखाता है कि ऐडक्लास विधि में कई वर्गों को कैसे पास किया जाए ।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>