jQuery document ready, metodo ready e uso di slideToggle()

In questo articolo vedremo come utilizzare jQuery document ready.

Per specificare che le funzioni, con le relative istruzioni, devono essere eseguite dopo il caricamento della pagina, si utilizza questa funzione:

$(document).ready(function() {

….

});

Infatti il metodo ready esegue il codice contenuto nella relativa funzione solo quando il documento è stato interamente caricato, ovvero quando la pagina è pronta.

Banner Pubblicitario

Oppure più semplicemente posso scrivere:

$(function() {

….

});

Esempio d’uso di jQuery document ready e slideToggle()

Facciamo subito un semplice esempio d’uso.

Premete il pulsante sotto, vedrete che la scritta Coding Creativo scomparire. Dopo ri-cliccate sul pulsante per farla di nuovo apparire.

Coding Creativo

Costruiamo il nostro esempio inserendo innanzitutto il livello da mostrare e nascondere e il pulsante su cui premere per ottenere l’effetto.

Banner pubblicitario

<div id="nascondi">Coding Creativo</div>
<button id="premi">Premi il pulsante per nascondere e mostrare il testo</button>

Per sviluppare questo esempio abbiamo dunque bisogno del metodo slideToggle() che mostra o nasconde un determinato oggetto.

Quindi basterà questo semplicissimo script:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#premi").click(function(){
    $("#nascondi").slideToggle();
  });
});
</script>

Ricordiamo che al posto di utilizzare $(document).ready(function() avremmo potuto scrivere semplicemente $(function().

SlideToggle()

Il metodo slideToggle() può avere dei parametri:

Velocità – posso specificare la velocità con cui nascondere o mostrare un oggetto. Questi valori possono essere: slow, fast, normal. Ad esempio slideToggle(“slow”). Normal è chiaramente il valore di default, da specificare solo quando si vuole una variazione ad un effetto applicato in precedenza. Si può anche esprimere un valore in millisecondi, normal corrisponde a 400 millisecondi. Ovviamente valori inferiori renderebbero l’effetto più veloce.

Modalità – swing o linear. Swing vuol dire che la velocità è lenta all’inizio e alla fine dell’effetto, ma veloce nel mezzo. Linear invece è il valore di default che indica una velocità costante per tutto il tempo.

Function(), cioè la funzione da eseguire quando si attiva il metodo.

Questi parametri sono opzionali e si possono utilizzare anche singolarmente.

Facciamo alcuni esempi di utilizzo di slideToggle() con parametri

Questa volta cliccate sul pulsante e attendete l’apertura della finestra di dialogo.

Coding Creativo

Per realizzare questo esempio ho nuovamente inserito il div con il pulsante sotto.

<div id="nascondo">Coding Creativo</div>
<button id="pulsante">Prova del pulsante</button>

E dopo ho inserito il semplicissimo script per nascondere il livello (div) e far aprire la finestra di dialogo con alert().

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#pulsante").click(function(){
    $("#nascondo").slideToggle(900, function(){
      alert("Prova del metodo slideToggle su Coding Creativo");
    });
  });
});
</script>

Potete trovare anche altre documentazioni interessanti sul sito w3schools e anche su api.jquery.com.

Questi sono solo alcuni esempi realizzati utilizzando jQuery document ready e slideToggle().

Lezione precedente: jQuery selectors

Lezione successiva: jQuery hide()