JqueryUI - टॉगल क्लास

इस अध्याय में चर्चा करेंगे toggleClass()विधि, जो हेरफेर के लिए एक उपयोगी नया वर्ग है। toggleClass () विधि मिलान किए गए तत्वों के सेट में प्रत्येक तत्व से एक या एक से अधिक कक्षाएं जोड़ता या हटाता है।

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

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

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

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
अनु क्रमांक। पैरामीटर और विवरण
1

className

यह एक स्ट्रिंग है और सीएसएस वर्ग के नाम, या अंतरिक्ष-सीमांकित सूची में वर्ग नामों की सूची को जोड़ा, हटाया, या टॉगल किया जाता है।

2

switch

यह बुलियन का प्रकार है और यदि निर्दिष्ट किया जाता है, तो टॉगलक्लास () पद्धति को वर्ग जोड़ने के लिए यदि सही है , या गलत होने पर कक्षा को हटाने के लिए मजबूर करता है ।

3

duration

यह प्रकार संख्या या स्ट्रिंग का है और वैकल्पिक रूप से एक, धीमे, सामान्य, तेज़ या मिलीसेकंड में प्रभाव की अवधि प्रदान करता है। यदि छोड़ा गया है, तो चेतन () विधि डिफ़ॉल्ट निर्धारित करती है। इसका डिफ़ॉल्ट मान 400 है

4

easing

चेतन () विधि को पारित करने के लिए आसान कार्य का नाम।

5

complete

यह एक कॉलबैक विधि है जिसे प्रत्येक तत्व के लिए कहा जाता है जब इस तत्व के लिए प्रभाव पूरा होता है।

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

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

.toggleClass( className [, switch ] [, options ] )
अनु क्रमांक। पैरामीटर और विवरण
1

className

यह एक स्ट्रिंग है और सीएसएस वर्ग के नाम, या अंतरिक्ष-सीमांकित सूची में वर्ग नामों की सूची को जोड़ा, हटाया, या टॉगल किया जाता है।

2

switch

यह बुलियन का प्रकार है और यदि निर्दिष्ट किया जाता है, तो टॉगलक्लास () पद्धति को वर्ग जोड़ने के लिए यदि सही है , या गलत होने पर कक्षा को हटाने के लिए मजबूर करता है ।

3

options

यह सभी एनीमेशन सेटिंग्स का प्रतिनिधित्व करता है। सभी गुण वैकल्पिक हैं। संभावित मूल्य हैं -

  • duration- एक स्ट्रिंग या संख्या जो यह निर्धारित करती है कि एनीमेशन कब तक चलेगा .. इसका डिफ़ॉल्ट मान 400 है

  • easing- एक स्ट्रिंग जो संकेत करती है कि संक्रमण के लिए किस आसान फ़ंक्शन का उपयोग करना है। इसका डिफ़ॉल्ट मान स्विंग है । संभावित मूल्य यहां हैं ।

  • complete - यह प्रत्येक तत्व के लिए कॉलबैक पद्धति है जिसे इस तत्व के लिए प्रभाव पूरा होने पर बुलाया जाता है।

  • children - यह एक बूलियन है और यह दर्शाता है कि क्या मिलान अतिरिक्त रूप से मिलान किए गए तत्वों के सभी वंशजों पर लागू होना चाहिए।

  • queue - यह स्ट्रिंग / बुलियन का प्रकार है जो यह दर्शाता है कि एनीमेशन को प्रभाव कतार में रखना है या नहीं।

उदाहरण

निम्न उदाहरण टॉगलक्लास () पद्धति के उपयोग को प्रदर्शित करता है ।

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class 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>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

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

पाठ के लिए CSS कक्षाएं कैसे बदली जाती हैं, यह देखने के लिए टॉगल बटन पर क्लिक करें ।