JqueryUI - स्विच क्लास
इस अध्याय में चर्चा करेंगे switchClass()विधि, जो हेरफेर के लिए एक उपयोगी नया वर्ग है। स्विचक्लास () विधि एक सीएसएस एक सीएसएस क्लास से दूसरे में जाती है, जो एक राज्य से दूसरे राज्य में संक्रमण को एनिमेट करती है।
वाक्य - विन्यास
JQueryUI के संस्करण 1.0 में जोड़ा गया
switchClass() विधि का मूल सिंटैक्स इस प्रकार है -
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | removeClassName यह एक स्ट्रिंग है और इसे हटाने के लिए सीएसएस वर्ग का नाम या वर्ग-नाम की अंतरिक्ष-सीमांकित सूची का प्रतिनिधित्व करता है। |
| 2 | addClassName यह स्ट्रिंग का प्रकार है और प्रत्येक मिलान किए गए तत्व की श्रेणी विशेषता में जोड़े जाने वाले एक या अधिक वर्ग नामों (स्थान अलग) का प्रतिनिधित्व करता है। |
| 3 | duration यह प्रकार संख्या या स्ट्रिंग का है और वैकल्पिक रूप से एक, धीमे, सामान्य, तेज़ या मिलीसेकंड में प्रभाव की अवधि प्रदान करता है। यदि छोड़ा गया है, तो चेतन () विधि डिफ़ॉल्ट निर्धारित करती है। इसका डिफ़ॉल्ट मान 400 है । |
| 4 | easing चेतन () विधि को पारित करने के लिए आसान कार्य का नाम। |
| 5 | complete यह एक कॉलबैक विधि है जिसे प्रत्येक तत्व के लिए कहा जाता है जब इस तत्व के लिए प्रभाव पूरा होता है। |
JQueryUI के संस्करण 1.9 में जोड़ा गया
संस्करण 1.9 के साथ, यह विधि अब बच्चों के विकल्प का समर्थन करती है , जो कि वंशज तत्वों को भी चेतन करेगी।
.switchClass( removeClassName, addClassName [, options ] )| अनु क्रमांक। | पैरामीटर और विवरण |
|---|---|
| 1 | removeClassName यह एक स्ट्रिंग है और इसे हटाने के लिए सीएसएस वर्ग का नाम या वर्ग-नाम की अंतरिक्ष-सीमांकित सूची का प्रतिनिधित्व करता है। |
| 2 | addClassName यह स्ट्रिंग का प्रकार है और प्रत्येक मिलान किए गए तत्व की श्रेणी विशेषता में जोड़े जाने वाले एक या अधिक वर्ग नामों (स्थान अलग) का प्रतिनिधित्व करता है। |
| 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>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>आइए हम उपरोक्त कोड को एक HTML फ़ाइल में सहेजते हैं switchclassexample.htmऔर इसे एक मानक ब्राउज़र में खोलें जो जावास्क्रिप्ट का समर्थन करता है, आपको निम्न आउटपुट भी देखना होगा। अब, आप परिणाम के साथ खेल सकते हैं -
बॉक्स पर कक्षाओं के प्रभाव को देखने के लिए स्विच क्लास बटन पर क्लिक करें ।