it-swarm-eu.dev

Esempi / best practice per i menu a discesa con caselle di controllo

Sto cercando siti Web con buoni esempi di un menu a discesa con caselle di controllo. So che il menu delle etichette di Gmail è uno, ma mi piacerebbe vederne altri. Anche le migliori pratiche generali sono benvenute.

C'è un buon modo per mostrare i valori selezionati all'esterno? MAIUSC viene mai utilizzato per la selezione continua all'interno del menu a discesa? Esistono altri modi per fornire una selezione continua?

Il menu a discesa di Gmail ha una caratteristica curiosa: quando fai clic sulla casella stessa, viene selezionato e il menu rimane aperto, in modo da consentire la selezione di valori aggiuntivi. Ma quando fai clic sull'etichetta e non sulla casella stessa, la casella viene selezionata e il menu si chiude. Lo trovo per lo più confuso. Pro e contro? Perché non lasciarlo sempre aperto e comprimerlo in caso di perdita di messa a fuoco e facendo clic sul menu a discesa stesso?

MODIFICA riformulerò la domanda. L'unico buon esempio di un menu a discesa con caselle che mi viene in mente è il menu delle etichette di Gmail. Conosci altri che ti piacciono (nelle app web?)

8

Ecco un esempio su un sito web dal vivo: http://www.omegawatches.com/watchfinder (ad es. Menu a discesa "caratteristiche")

Non sono sicuro di come funzioni, purtroppo non potremmo mai provarlo.

13
Phil

Questa è diventata una richiesta comune in molte applicazioni web. Per specificare più valori da un elenco predefinito. A mio avviso, il menu a discesa multi-selezione non è la soluzione migliore. Sebbene sia compatto, non rappresenta visivamente i valori selezionati.

A mio avviso, la barra di ricerca dei documenti di Google offre una soluzione molto accurata. Tuttavia, ammetto che è destinato a utenti piuttosto avanzati.

Ecco un esempio con "seleziona tutto" e "deseleziona tutto".

enter image description here

2
Denzo

Anni fa abbiamo realizzato vacanceselect.nl , un sito Web olandese dedicato ai viaggi in auto.

Nel widget di ricerca grande immediatamente visibile al caricamento della pagina, fai clic su "bestemming en accomodatie", che aprirà un pannello di accordeon contenente più caselle di controllo. Funzionano in modo simile alla casella di controllo multi-dropdown proposta, nel senso che sono inizialmente nascosti fino a quando non sono resi visibili dall'interazione dell'utente e possono essere controllati e disattivati ​​a piacimento. Una caratteristica importante dell'intero widget di ricerca è che il numero di risultati si aggiorna dinamicamente mentre si fa clic sul widget (non è stato divertente costruirlo come se fosse inventarlo).

Il feedback immediato su questa cosa è importante. Senza di essa dovresti continuare ad andare avanti e indietro, aprendo e chiudendo il pannello per accendere e spegnere le cose. Invece, è possibile aprire ciascun pannello, modificare di conseguenza fino a quando il numero di risultati sembra quello desiderato, quindi andare avanti. Abbiamo sentito dal cliente che gli utenti del sito sono molto contenti di come funziona e la conversione è ottima (non abbiamo mai avuto la possibilità di fare studi da soli).

Spero che aiuti!

1
Rahul

StackOverflow ha un post con due collegamenti ad esempi: https://stackoverflow.com/questions/4918995/combobox-with-checklist-c

Personalmente penso che non siano fantastici per l'uso. Un buon caso d'uso per caselle multi-selezione o combinate con elenchi sembrerebbe essere un enorme filtro per negozi di e-commerce, ma ebay e Amazon non sembrano usare alcun metodo simile.

Se devi assolutamente averne uno, che ne dici di rappresentarlo in un modo diverso come questo: http://odyniec.net/projects/selectlist/examples.html

Per un esempio estremo - fai clic sui tag - http://www.codeproject.com/info/search.aspx

Anche se questo è chiaramente il caso di uno sviluppatore senza un designer, il concetto consente il filtraggio di massa molto rapidamente.

1
Chris Kluis

Uso il seguente controllo in un rapporto sulle prestazioni dell'email. Esiste uno strumento di filtro per le persone, ma ciò consente all'utente di tagliare l'elenco delle e-mail incluse nel rapporto. L'albero corrisponde al loro albero in un'altra sezione dell'app, dove creano e-mail.

Non è la fine di tutti, ma gli utenti lo trovano abbastanza ovvio nell'uso.

Checkbox Tree in Menu

1
Glen Lipka

Non ho esempi a cui collegarti, ma l'implementazione predefinita HTML è che un semplice clic deseleziona tutto tranne per l'elemento su cui hai appena fatto clic, un CTRL + Clic seleziona (o deseleziona) un elemento senza de -seleziona gli elementi precedentemente scelti e MAIUSC + clic viene utilizzato per scegliere un intervallo, selezionando tutto dall'elemento selezionato più vicino all'elemento su cui hai appena fatto clic. Tutto ciò per dire sì, MAIUSC + clic e CTRL + clic vengono talvolta utilizzati in implementazioni a selezione multipla.

1
ThatSteveGuy

Un componente pronto per jQuery che ho usato è Elenco di controllo a discesa .

In pratica trasforma un normale elemento <select> in una casella a discesa con caselle di controllo o pulsanti di opzione. Il componente ha opzioni di configurazione versatili per creare vari comportamenti, quindi è possibile scegliere se chiudere dopo ogni selezione, come visualizzare le selezioni, utilizzare i turni, ecc.

Il progetto ha anche na pagina dimostrativa dal vivo dove puoi provare alcune impostazioni di esempio.

0
Jawa

Forse interessante

controlla la mia risposta (in fondo) del link. Può forse guidarti in qualche progetto di controllo personalizzato.

0
Henrik Ekblom

In generale, non è davvero una buona idea fare un menu a discesa multi-selezione. La selezione multipla è piuttosto confusa per gli utenti così com'è e l'aggiunta della confusione aggiunta di avere la funzione in un menu a discesa può solo peggiorare le cose.

0
Charles Boyung