Semplice Dropdown Menù

In questo post mi occupo di sviluppare un semplice menù a tendina, il più semplice possibile. Ne ho sviluppato uno semplicissimo per un’applicazione che sfrutta le API della NASA per mostrare alcune immagini; per farlo, necessita della selezione della fotocamera che ha scattato le immagini da mostrare. Vediamo subito come si fa.

Nel menù che creiamo, avremo la possibilità di selezionare una sola voce per volta. Effettuata la selezione il sistema riprodurrà un suono e farà apparire a  schermo la selezione effettuata. Oltre questo, faremo in modo che tutte le selezioni effettuate appaiano in una apposita sezione della pagina.

HTML

Creiamo un contenitore per tutti gli elementi, un selettore che contiene le voci del nostro menù e altri 2 contenitori che serviranno ai nostri scopi.

<div class="container">
<div id="sel-div">
<select id="myselect">
<option>Select a Camera!</option>
<option>Front Hazard Avoidance Camera</option>
<option>Rear Hazard Avoidance Camera</option>
<option>MAST Camera</option>
<option>Chemistry and Camera Complex</option>
<option>Mars Hand Lens Imager</option>
<option>Mars Descend Imager</option>
<option>Navigation Camera</option>
</select>
</div>
<!-- End of sel-div -->
<div id="mess">
</div>
<div id="mess-arr">
</div>
</div>

CSS3

Diamo forma e colore ai contenitori che utilizzeremo:

body {
text-align: center;
margin-top: 80px;
background: black;
}

#mess {
font-size: 35px;
color: tomato;
margin: 25px;
}

#mess-arr {
background: DimGray;
color: yellow;
margin: 25px;
font-size: 15px;
}

Javascript/jQuery

Partiamo dalla base della nostra app, al quale aggiungiamo subito le variabili di cui abbiamo bisogno:

console.clear();

$(document).ready(function() {

var option,
opt_sel,
array = [],
arr_string,
audio;
})

Aggiungiamo la funzione che controlla le variazioni delle opzioni:

    $("#myselect").on('change', function() {
// il comportamento della nostra app andrà qui
}

Inseriamo il controllo che permette di riprodurre un suono di notifica della scelta effettuata:

new Audio('https://notificationsounds.com/soundfiles/19f3cd308f1455b3fa09a282e0d496f4/file-2a_arp-up.mp3').play();

Per evitare che le selezioni si sommino una all’altra in un contenitore che deve contenerne solamente una, lo svuotiamo con il metodo:

// svuota
<div id="mess">
$("#mess").empty();

Rimuoviamo l’attributo “:selected” da qualsiasi selezione già effettuata in precedenza:

$('option:selected', this).attr('selected',true).siblings().removeAttr('selected');

Recuperiamo la selezione effettuata e la trasformiamo in testo, che facciamo opportunamente apparire nel proprio contenitore:

option = $("#myselect :selected");
opt_sel = option.text();
$("#mess").append('<h2>Hai selezionato: ' + opt_sel + '<h2>');

Imponiamo l’inserimento della nostra selezione appena effettuata in un array, trasformiamo in testo e mostriamo nel suo div “#mess-arr”.

array.push(opt_sel);
arr_string = array.toString();
$("#mess-arr").text(arr_string);

Per evitare che appaia tra le nostre selezioni anche la prima, cioè il suggerimento “Select a Camera!”, la rimuoviamo con l’aiuto di un ciclo if :

if (opt_sel != "Select a Camera!") {
array.push(opt_sel);
arr_string = array.toString();
$("#mess-arr").text(arr_string);
} else {
alert("Hai selezionato un elemento non selezionabile. Prova ancora!")
};

Ed ora il testo completo:

console.clear();

$(document).ready(function() {

var option,
opt_sel,
array = [],
arr_string,
audio;

$("#myselect").on('change', function() {

new Audio('https://notificationsounds.com/soundfiles/19f3cd308f1455b3fa09a282e0d496f4/file-2a_arp-up.mp3').play();

// svuota
<div id="mess">
$("#mess").empty();

// rimuovi attributo selected
//da eventuali precedenti selezioni
$('option:selected', this).attr('selected', true).siblings().removeAttr('selected');

option = $("#myselect :selected");

opt_sel = option.text();

$("#mess").append('
<h2>Hai selezionato: ' + opt_sel + '
<h2>');

if (opt_sel != "Select a Camera!") {
array.push(opt_sel);
arr_string = array.toString();
$("#mess-arr").text(arr_string);
} else {
alert("Hai selezionato un elemento non selezionabile. Prova ancora!")
};

}); // fine funzione onChange

}) // fine document.ready

Un esempio comleto si trova in questo Fiddle.

 

Un pensiero su “Semplice Dropdown Menù

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.