[ AjaxControlToolkit ] Navigazione in stile Outlook utilizzando ListView e Accordion

Implementare una barra di navigazione collassabile in stile Outlook è molto semplice se si seguono le chiare istruzioni di Matt Berserth, ecco la traduzione del suo tutorial:

Ho abbastanza familiarità con il AjaxControlToolkit,  per sapere che l’Accordion dovrebbe essere lo strumento più adatto per questo lavoro, ma non l’ho effettivamente utilizzato prima. Così ho fatto un po ‘di ricerca sull’ Accordion e ho creato una piccola pagina demo che abbiamo utilizzato per avere un’idea di come si comporta, e ciò che c’è fare.

Live Demo (IE6, IE7 and FF) | Download (.Net 3.5 and Toolkit Version 3.5.11119.0)

L’ Accordion non è l’unico controllo del toolkit che consente di fornire più riquadri di contenuto e di visualizzarne uno alla volta, anche il controllo Tab fa questo. Il trucco è decidere quale controllo soddisfa meglio le proprie esigenze. Per il mio scenario la scelta è stata semplice – il mio team di design di interfaccia utente aveva già preso questa decisione per me Tuttavia, se siete interessati alla lettura circa il trade-off tra la classe di accordion, tab e stili di presentazione, vi raccomando di leggere i seguenti articoli sui modelli di interfaccia utente.

• UI Patterns, Closable Panels
• UI Patterns, Card Stack
• Yahoo! Design Pattern Library, Module Tabs
• Yahoo! Design Pattern Library, Collapse Transition

Mentre ci sono alcune differenze visive tra i controlli Tab e Accordion, la marcatura per questi due controlli condividono una struttura simile. Esattamente come il controllo Tab, ci sono i modelli previsti per specificare la marcatura per l’intestazione e il contenuto di ciascuna delle AccordionPanes.
Qui di seguito vi sono 2 schermate di esempio di un semplice controllo Accordion che contiene 2 pannelli di contenuti: Mail e Note. Poco al di sotto di tali schermate vi è la marcatura che ho usato per creare queste schermate. Ho utilizzato regole di stile in linea per rendere più leggibili gli screenshoot degli AccordionPanes.

Costruire il contenuto dell’ AccordionPane con il ListView:

Dopo aver avuto la vaga idea di come volevo presentare la sotto-categorie, ho iniziato quindi a sostituire il pannello di contenuto con il nuovo controllo ListView. Per fare questo, ho cancellato la statica struttura UL / LI dal AccordionPane e l’ho sostituito con una lista (che ora è responsabile della produzione di questi contenuti). Effettuare la sostituzione mi permette di generare dinamicamente la struttura UL / LI non importa quante sottocategorie vi sono. Di seguito è riportato la nuova marcatura per il pannello Note.

Styling di Accordion

Ora ho la struttura di base che stavo cercando, ma lo stile esige un po’ di lavoro.

Styling the Pane’s Header

Per lo stile del pannello di intestazione, ho usato 2 immagini. Uno per lo sfondo e un altro per il mouseover.

Styling the Pane’s Content Background

Per lo stile dello sfondo ho utilizzato la seguente immagine.

Styling the Pane’s UL/LI

Applicare lo stile alla struttura UL / LI è stato un po ‘più difficile per la compatibilità cross-browser. Ho cominciato con la proprietà delle liste list-style-image, ma a causa delle differenze nei margini utilizzate dai vari browser, questo non ha mai reso come volevo in IE7. Così, invece ho seguito questa consulenza e utilizzato un background invece delle proprietà. Ciò ha reso molto meglio. Ecco alcune delle immagini che ho usato per il Mail sottocategorie:

Poiche queste immagini sono specifiche per ogni singola voce, ho generato una regola di stile in linea utilizzando un espressione di databind in questo modo:

A proposito, tutte le immagini di questo campione sono state prese da ComponentArt ricercando Outlook 2003 NavBar. Il download comprende sia PNG e GIF. Ho usato GIF perché volevo sostegno con IE6.

Importanti proprietà dell’ Accordion

Dopo aver ottenuto il rendering desiderato, ho iniziato a modificare il comportamento modificando le proprietà che il controllo espone. Qui ci sono alcune di quelle che ho trovato utili:

• FadeTransitions
  • Se si imposta questo a true, un’ animazione Fade verrà applicata tra le sezioni.
• RequireOpenPane
  • Quando questo è impostato a true, l’ Accordion avrà sempre un riquadro aperto. Se si imposta a false, l’utente può chiudere il riquadro attualmente aperto facendo clic sulla sua intestazione (lasciando tutti i riquadri chiusi).
• AutoSize
  • 
• SuppressHeaderPostbacks
  • Quando questo è impostato a true, l’ accordion automaticamente reprime qualsiasi postback originato da controlli contenuti nel AccordionPanes Header.
• Un paio di cose non mi hanno convinto
  • La creazione di una sprite per le immagini
  • Utilizzare JavaScript, invece di pseudo-classi hover per l’intestazione onhover
  • Alcune stranezze sul funzionamento quando AutoSize è impostata su Fill
• Sono in grado di riprodurre alcune di queste stranezze utilizzando l’ Accordion Demo e facendo i seguenti passi
  • Aprire http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Accordion/Accordion.aspx con IE7
  • Impostare a Fill il valore di discesa in Autosize
  • Fare clic sul pannello AutoSize. Avverto flickering durante le transizioni. Ciò non succede quando AutoSize è impostata su None

Questo è tutto. Buon divertimento!

Consulta l’ articolo originale