JqueryUI - Sınıfı Değiştir
Bu bölüm tartışacak switchClass()yöntem, manipülasyon için kullanışlı yeni bir sınıftır. switchClass () yöntemi, bir CSS sınıfından diğerine geçerek bir durumdan diğerine geçişi hareketlendirir.
Sözdizimi
JQueryUI 1.0 Sürümüne Eklendi
switchClass() yöntem aşağıdaki gibi temel sözdizimine sahiptir -
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )| Sr.No. | Parametre ve Açıklama |
|---|---|
| 1 | removeClassName Bu bir Dize'dir ve kaldırılacak CSS sınıf adını veya boşlukla sınırlanmış sınıf adlarının listesini temsil eder. |
| 2 | addClassName Bu, String tipindedir ve eşleşen her öğenin sınıf özelliğine eklenecek bir veya daha fazla sınıf adını (boşlukla ayrılmış) temsil eder. |
| 3 | duration Bu, Number veya String tipindedir ve isteğe bağlı olarak yavaş, normal, hızlı veya milisaniye cinsinden etkinin süresini sağlar. Atlanırsa animate () yöntemi varsayılanı belirler. Varsayılan değeri 400'dür . |
| 4 | easing Animate () yöntemine aktarılacak hareket hızı işlevinin adı. |
| 5 | complete Bu, bu öğe için efekt tamamlandığında her öğe için çağrılan bir geri çağrı yöntemidir. |
JQueryUI Sürüm 1.9'a Eklendi
1.9 sürümü ile bu yöntem artık destekler çocuk seçeneği de olacak hareketlendirmek soyundan unsurlar.
.switchClass( removeClassName, addClassName [, options ] )| Sr.No. | Parametre ve Açıklama |
|---|---|
| 1 | removeClassName Bu bir Dize'dir ve kaldırılacak CSS sınıf adını veya boşlukla sınırlanmış sınıf adlarının listesini temsil eder. |
| 2 | addClassName Bu, String tipindedir ve eşleşen her öğenin sınıf özelliğine eklenecek bir veya daha fazla sınıf adını (boşlukla ayrılmış) temsil eder. |
| 3 |
options Bu, tüm animasyon ayarlarını temsil eder. Tüm özellikler isteğe bağlıdır. Olası değerler -
|
Örnekler
Aşağıdaki örnek, switchClass () yönteminin kullanımını gösterir .
<!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>Yukarıdaki kodu bir HTML dosyasına kaydedelim switchclassexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı da görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -
Tıklayın Anahtarı Sınıf kutuyu sınıfların etkisini görmek için düğmeye.