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.
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.
Costruiamo il nostro esempio inserendo innanzitutto il livello da mostrare e nascondere e il pulsante su cui premere per ottenere l’effetto.
<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.
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().
Alcuni link utili:
Rimuovere attributi agli elementi del DOM con JavaScript
Creare attributi agli elementi
Creare elementi nel dom con javascript
Come creare una galleria di immagini con javascript
Utilizzare gli array in javascript
Come creare una calcolatrice con javascript
Validare un form con javascript
Saper utilizzare il metodo getElementById
Alcuni esempi con javascript alert