Bootstrap contiene gli stili per creare bottoni con una freccia sulla destra. Al click della freccia viene mostrata una lista di link che possiamo personalizzare secondo le nostre esigenze. Questo comportamento visuale è del tutto assimilabile a quello di una classica dropdown, quindi possiamo usare gli stili di Bootstrap per creare una dropdown personalizzata.
Il codice sottostante mostra come creare la drop down.
<div class="btn-group"> <button type="button" class="btn btn-default" id="itemTypeDescription">Select</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="javascript:;">Item1</li> <li><a href="javascript:;">Item2</li> <li><a href="javascript:;">Item3</li> </ul> </div>
Il primo bottone mostra il testo dell'elemento selezionato, mentre il secondo mostra la freccia della dropdown. Il tag ul contiene invece la lista degli elementi da mostrare nella dropdown.
Una volta disegnata la dropdown, dobbiamo gestire il click sui link della lista per cambiare il testo del primo bottone con quello del lik selezionato. Il prossimo esempio di codice mostra come fare.
$(".dropdown-menu a").on("click", function () { $("#itemTypeDescription").html($(this).html()); });
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Load test di ASP.NET Core con k6
Creare alias per tipi generici e tuple in C#
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Elencare le container images installate in un cluster di Kubernetes
Disabilitare automaticamente un workflow di GitHub (parte 2)
Determinare lo stato di un pod in Kubernetes
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Creare form tipizzati con Angular
Creare gruppi di client per Event Grid MQTT
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework