JqueryUI - Değiştir

Bu bölüm tartışacak toggle()jQueryUI görsel efektleri yöntemi. toggle () yöntemi, öğenin gizli olup olmamasına bağlı olarak show () veya hide () yöntemlerini değiştirir.

Sözdizimi

toggle() yöntem aşağıdaki sözdizimine sahiptir -

.toggle( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Parametre ve Açıklama
1	effect Bu, geçiş için hangi efektin kullanılacağını belirten bir String'dir. Bu bir String'dir ve öğe görünürlüğünü ayarlarken kullanılacak efekti temsil eder. Etkiler aşağıdaki tabloda listelenmiştir.
2	options Bu, Object tipindedir ve etkiye özgü ayarları ve yumuşatmayı belirtir . Ek olarak, her efektin, jQueryUI Efektleri tablosunda açıklanan birden çok efekt arasında ortak olarak belirtilebilen kendi seçenekleri vardır .
3	duration Bu, Number veya String tipindedir ve animasyonun ne kadar süre çalışacağını belirler. Varsayılan değeri 400'dür .
4	complete Bu, bu öğe için efekt tamamlandığında her öğe için çağrılan bir geri çağrı yöntemidir.

jQueryUI Etkileri

Aşağıdaki tablo, effects () yöntemiyle kullanılabilecek çeşitli efektleri açıklamaktadır -

Sr.No.	Etki ve Açıklama
1	blind Öğeyi bir pencere kör gibi gösterir veya gizler: belirtilen yöne ve moda bağlı olarak alt kenarı aşağı veya yukarı veya sağ kenarı sağa veya sola hareket ettirerek .
2	bounce Öğenin, isteğe bağlı olarak öğeyi göstererek veya gizleyerek dikey veya yatay yönde sekmesine neden olur.
3	clip Ortada buluşana kadar öğenin karşıt kenarlarını birlikte hareket ettirerek öğeyi gösterir veya gizler.
4	drop Öğeyi sayfanın üzerine düşüyor ya da düşüyormuş gibi göstererek gösterir ya da gizler.
5	explode Sayfanın içine giriyor veya sayfadan patlıyor gibi radyal yönlerde hareket eden birden çok parçaya bölerek öğeyi gösterir veya gizler.
6	fade Opaklığını ayarlayarak öğeyi gösterir veya gizler. Bu, çekirdek solma efektleriyle aynıdır, ancak seçenekler yoktur.
7	fold Karşıt kenarlıkları içeri veya dışarı ayarlayarak öğeyi gösterir veya gizler ve ardından diğer kenarlık kümesi için de aynısını yapar.
8	highlight Öğeyi gösterirken veya gizlerken anlık olarak arka plan rengini değiştirerek öğeye dikkat çeker.
9	puff Opaklığını ayarlarken öğeyi yerinde genişletir veya daraltır.
10	pulsate Öğenin belirtildiği gibi gösterildiğinden veya gizlendiğinden emin olmadan önce öğenin opaklığını açar ve kapatır.
11	scale Öğeyi belirli bir yüzde oranında genişletir veya daraltır.
12	shake Elemanı dikey veya yatay olarak ileri geri sallar.
13	size Öğeyi belirtilen bir genişlik ve yüksekliğe yeniden boyutlandırır. Hedef boyutun nasıl belirtildiği dışında ölçeğe benzer.
14	slide Öğeyi sayfanın üstüne veya dışına kayıyormuş gibi hareket ettirir.
15	transfer Öğenin başka bir öğeye aktarılmış gibi görünmesini sağlayan geçici bir anahat öğesini canlandırır. Anahat öğesinin görünümü, ui-effects-transfer sınıfı veya bir seçenek olarak belirtilen sınıf için CSS kuralları aracılığıyla tanımlanmalıdır.

Misal

Aşağıdaki örnek , yukarıdaki tabloda listelenen farklı efektlerle toggle () yönteminin kullanımını gösterir .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Toggle 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>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).toggle('explode', 300);
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
   </body>
</html>

Yukarıdaki kodu bir HTML dosyasına kaydedelim toggleexample.htmve javascript'i destekleyen standart bir tarayıcıda açın, aşağıdaki çıktıyı da görmelisiniz. Şimdi, sonuçla oynayabilirsiniz -

Sınıfların nasıl gösterildiğini ve gizlendiğini kontrol etmek için Geçiş düğmesine tıklayın.