Das jQuery-UI - Framework stellt die toggle()- Methode bereit, um den Wechsel zwischen Anzeigen- oder Ausblenden -Funktionalitäten anzuzeigen , abhängig vom Status der ausgewählten Elemente und der Art des vom Benutzer gewählten Umschalteffekts.

Syntax:

(selector).toggle( effectType [, options ] [, duration ] [, complete ] )

Parameter: Diese Methode akzeptiert vier Parameter, wie oben erwähnt und unten beschrieben:

  • effectType: Der Typ ist string. Er gibt den Typ des Effekts an, der für den Toggle-Übergang verwendet wird.
  • Optionen: Der Typ ist Objekt . Es gibt die effektorientierte spezifische Einstellung für Beschleunigungsoptionen an.
  • Dauer: Die Typen sind number oder string . Damit wird etwa festgelegt, wie lange der Toggle-Effekt laufen soll. Zum Beispiel „schnell“, „langsam“ oder Standardwert 400 ms.
  • complete: Dies ist die Callback-Methode, die aufgerufen wird, wenn der Toggle-Effekt abgeschlossen ist.

Rückgabewert: Gibt die ausgewählten Elemente mit dem angegebenen Toggle-Effekt zurück.

Links für die jQuery-Benutzeroberfläche:

<link
href=“https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css“rel=“stylesheet“type=“text/css“/>
<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>

Beispiel 1: Im folgenden Beispiel wird die toggle()- Funktionalität in jQuery-Code mit Pulsate -Effekttyp implementiert , der als Parameter übergeben wird, der den Toggle-Effekt für die übereinstimmenden Elemente anzeigt. Der Effekttyp „Pulsieren“ passt die Deckkraft des ausgewählten Elements ein- oder ausschaltend an. ui-widget-content und ui-widget-header sind die integrierten Klassen, die vom CSS-Framework der jQuery-Benutzeroberfläche bereitgestellt werden, um die Benutzeroberfläche interaktiver und ansprechender zu gestalten.

<!DOCTYPE html>
<html>
      
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1"> 
      
    <title>jQuery UI toggle method</title>
      
    <!--Pre-compiled libraries of jQuery UI -->
    <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>
      
    <style>
        .mainDiv {
            width: 550px; 
            height: 180px;
        }
          
        #toggleBtnId {
            padding: .4em 1em;
            text-decoration: none; 
        }
      
        #container { 
            width: 300px;
            height: 150px; 
            padding: 0.3em;
            position: relative;
        }
  
        #container h3 { 
            margin: 0; 
            padding: 0.4em;
            text-align: center;
        }     
  
        .height{
            height: 10px;
        }
    </style>
          
    <script>
        $(function() {
            function toggleEffect() {
                $( "#container" ).toggle('pulsate', 500);
            };
              
            $( "#toggleBtnId" ).click(function() {
                toggleEffect();
                return false;
            });
        });
    </script>
</head>
      
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <b>jQuery UI toggle method</b>
      
    <div class="height"></div><br/>
      
    <div class = "mainDiv">
        <div id = "container" 
            class = "ui-widget-content">
              
            <h3 class = "ui-widget-header">
                Toggle
            </h3>
              
            <p>
                We are learning jQuery UI framework's
                toggle() method! Please click button
                to show and hide the above div.
            </p>
        </div>
    </div>
      
    <input type = "button" id = "toggleBtnId"
            class = "ui-state-default"
            value = "Click this" />
</body>
  
</html>

Ausgabe:

Beispiel 2: Das jQuery-UI-Framework stellt die toggle()- Methode mit vielen verschiedenen visuellen Umschalteffekten als Parameter bereit. Im folgenden Beispielcode demonstrieren wir die Methode mit einer Combobox-Menüoption, um einige Toggle-Effekttypen auszuwählen. Wenn der Effekttyp vom Benutzer ausgewählt wird, wird er für die Ausgabe an die Methode toggle() übergeben , wie im Ausgabebild gezeigt. Der Programmierer kann den Code schreiben und je nach Anforderung der Anwendung Effekttypen als Parameter auswählen.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
      
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
          
    <title>
        jQuery UI toggle Method with All effects
    </title>
      
    <link href = 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
            rel = "stylesheet">
              
    <script src=
        "http://code.jquery.com/jquery-2.1.3.js">
    </script>
      
    <script src=
        "http://code.jquery.com/ui/1.11.2/jquery-ui.js">
    </script>
      
    <style>
        .height { 
            height: 10px;
        }
          
        .divClass { 
            width: 500px;
            height: 200px;
        }
          
        #btnID { 
            padding: .4em 1em;
            text-decoration: none;
        }
        #container { 
            width: 250px; 
            height: 180px; 
            padding: 0.5em;
            position: relative;
        }
          
        #container h4 { 
            margin: 0; 
            padding: 0.3em;
            text-align: center;
        }
    </style>
      
    <script>
        $( function() {
              
            // Toggle the selected effect
            // type by the user
            function toggleEffect() {
              
            var effectType = $( "#typesOfEffectId" ).val(); 
              
            // Toggle the effect with call back
            $( "#container" ).toggle( effectType, 800);
            };
              
            // Set effect from select menu value
            $( "#btnID" ).on( "click", function() {
                toggleEffect();
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
      
    <b>
        jQuery UI toggle method
        with all type of effects
    </b>
      
    <div class="height"></div>
      
    <div class="divClass">
          
        <div id="container" class="ui-widget-content">
            <h4 class="ui-widget-header">Toggle</h4>
      
            <p>
                In this tutorial, we are going to
                learn about jQuery UI framework
                toggle method with different variety
                of effects. The type of effect is
                selected from combobox menu to get
                different toggle effects.
            </p>
        </div>
    </div>
    <br/>
  
    <select name="effectTypes" id="typesOfEffectId">
        <option value="blind">Blind</option>
        <option value="clip">Clip</option>
        <option value="drop">Drop</option>
        <option value="explode">Explode</option>
        <option value="fade">Fade</option>
        <option value="fold">Fold</option>
        <option value="highlight">Highlight</option>
        <option value="puff">Puff</option>
        <option value="shake">Shake</option>
        <option value="bounce">Bounce</option> 
        <option value="slide">Slide</option>
    </select>
  
    <button id="btnID" class="ui-state-default">
        Toggle Effect
    </button>
</body>
  
</html>

Ausgabe: