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.