Yahoo! User Interface Blog (YUIBlog)

Nella Galleria 3 YUI: comportamenti di gruppo checkbox

Le caselle di controllo e pulsanti di opzione sono ben noti modelli per la scelta di un piccolo gruppo di elementi. Il primo consente di scegliere qualsiasi sottoinsieme di elementi (anche nessuno), mentre il secondo richiede esattamente una selezione.

Ma che cosa se avete bisogno di un comportamento diverso? Il modulo di Checkbox Gruppi nella Galleria YUI 3 implementa tre casi più comuni e una fondazione per la costruzione di altri. Il modulo si basa su caselle di controllo, perché, per impostazione predefinita, non applicare alcuna restrizione, il che li rende una base ideale su cui costruire.

Il primo comportamento fornito dal modulo è Y.AtLeastOneCheckboxGroup . Ciò impone che almeno un oggetto deve essere selezionato. Più di una selezione è consentito, ma deselezionare tutte le voci è impedito. Questo implementato utilizzando la "goccia di mercurio" algoritmo discusso in Tog on Interface : Ogni volta che si tenta di deselezionare l'ultimo elemento, la selezione scivola fuori da sotto il cursore. Puoi giocare con lui qui .

Il secondo esempio ( Y.AtMostOneCheckboxGroup ) consente alcuna selezione, ma più di una selezione non è permesso. Si noti che non è possibile utilizzare i pulsanti di opzione per questo, perché allora non è possibile deselezionare la voce corrente. Ciò è illustrato nel secondo esempio a questa pagina .

L'ultimo esempio ( Y.SelectAllCheckboxGroup ) implementa un "seleziona tutto" comportamento utilizzando una casella di controllo extra. Selezionando la voce "Seleziona tutto" checkbox seleziona tutte le altre voci. Deselezionandola deseleziona tutti gli altri elementi. Selezionando o deselezionando qualsiasi elemento aggiorna lo stato della "Seleziona tutto" checkbox. Si può provare giocando con il terzo esempio a questa pagina .

I possiblities sono infinite. È possibile costruire il proprio comportamento personalizzato rapidamente estendendo la classe di base utilizzata da tutti gli esempi di cui sopra: Y.CheckboxGroup . Questo si prende cura di tutte le pratiche burocratiche, in modo tutto quello che dovete fare è implementare enforceConstraints() . La funzione viene richiamata con l'elenco delle caselle di controllo gestiti e l'indice della casella di controllo che è stato appena cambiato. È quindi possibile controllare e aggiornare lo stato di tutte le caselle di controllo per far valere i vostri vincoli personalizzati.

In molti casi, tutto ciò che serve sono le stesse caselle di controllo, ad esempio, Y.AtLeastOneCheckboxGroup e Y.AtMostOneCheckboxGroup . Per questo, il costruttore può essere pass-through, in quanto la classe base Y.CheckboxGroup gestirà la lista per te. Se avete bisogno di ulteriori controlli, ad esempio, Y.SelectAllCheckboxGroup , il costruttore dovrebbe richiedere i riferimenti a questi controlli, e sarà necessario memorizzare in modo da poter accedere al loro stato all'interno enforceConstraints() .

Per utilizzare il modulo Checkbox Gruppi, includere il seguente script nella pagina:

 <Tipo di script = "text / javascript"

I comportamenti di cui sono installa e dimentica:

 YUI (). Uso ('gallery-checkboxgroups', function (Y)
 {
	 / / Attribuisce comportamento per tutte le caselle con la classe CSS "my-at-almeno-un-opzione-gruppo"
	 nuova Y.AtLeastOneCheckboxGroup ('my-at-almeno-un-casella-gruppo.');

	 / / Attribuisce comportamento per tutte le caselle con la classe CSS "my-at-più-uno-casella-gruppo"
	 nuova Y.AtMostOneCheckboxGroup ('my-at-più-uno-casella-gruppo.');

	 / / Attribuisce comportamento per tutte le caselle con la classe CSS "my-select-all-casella-gruppo",
	 / / Controllata dal checkbox con id "my-select-all-casella di controllo"
	 nuova Y.SelectAllCheckboxGroup ('# my-select-all-casella di controllo', 'my-select-all-casella-gruppo.');
 });

Una nota finale: Idealmente, caselle di controllo con un comportamento personalizzato deve essere uno stile differente, per cui l'utente ha qualche indicazione che essi non sono solo semplici caselle di controllo. Per esempio, suggerisce di utilizzare Tog diamanti per Y.AtLeastOneCheckboxGroup . In pratica, tuttavia, è necessario anche garantire che la gente possa capire che i controlli devono essere utilizzati per la selezione delle voci. Quindi, essere intelligente, semplicemente non troppo intelligente!

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!