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 यह सभी एनीमेशन सेटिंग्स का प्रतिनिधित्व करता है। सभी गुण वैकल्पिक हैं। संभावित मूल्य हैं -
|
उदाहरण
निम्न उदाहरण टॉगलक्लास () पद्धति के उपयोग को प्रदर्शित करता है ।
<!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 कक्षाएं कैसे बदली जाती हैं, यह देखने के लिए टॉगल बटन पर क्लिक करें ।