JqueryUI - Sınıfı aç / kapat
Bu bölüm tartışacak toggleClass()yöntem, manipülasyon için kullanışlı yeni bir sınıftır. toggleClass () yöntemi, eşleşen öğeler kümesindeki her öğeden bir veya daha fazla sınıf ekler veya kaldırır.
Sözdizimi
JQueryUI Sürüm 1.0'a eklendi
toggleClass() yöntem aşağıdaki gibi temel sözdizimine sahiptir -
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )| Sr.No. | Parametre ve Açıklama |
|---|---|
| 1 | className Bu bir Dize'dir ve eklenecek, kaldırılacak veya değiştirilecek CSS sınıf adını veya boşlukla sınırlandırılmış sınıf adlarının listesini temsil eder. |
| 2 | switch Bu, Boolean tipindedir ve belirtilirse, toggleClass () yöntemini, doğruysa sınıfı eklemeye veya yanlışsa sınıfı kaldırmaya zorlar . |
| 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.
.toggleClass( className [, switch ] [, options ] )| Sr.No. | Parametre ve Açıklama |
|---|---|
| 1 | className Bu bir Dize'dir ve eklenecek, kaldırılacak veya değiştirilecek CSS sınıf adını veya boşlukla sınırlandırılmış sınıf adlarının listesini temsil eder. |
| 2 | switch Bu, Boolean tipindedir ve belirtilirse, toggleClass () yöntemini, doğruysa sınıfı eklemeye veya yanlışsa sınıfı kaldırmaya zorlar . |
| 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, toggleClass () 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>
.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>Yukarıdaki kodu bir HTML dosyasına kaydedelim toggleclassexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı da görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -
Metin için CSS sınıflarının nasıl değiştiğini görmek için Değiştir düğmesine tıklayın .