Nota:

I widget Spry sono stati sostituiti con i widget jQuery in Dreamweaver CC e versioni successive. Anche se è ancora possibile modificare i widget Spry esistenti in una pagina, non potete aggiungere nuovi widget Spry.

Informazioni sul widget Pannello a soffietto

Un widget Pannello a soffietto è un insieme di pannelli comprimibili in grado di memorizzare una grande quantità di contenuto in poco spazio. I visitatori del sito possono nascondere o visualizzare il contenuto del pannello a soffietto facendo clic sulla scheda del pannello. Le parti del pannello a soffietto si espandono o comprimono a seconda della scheda su cui il visitatore fa clic. In ogni pannello a soffietto può essere aperto solamente un pannello di contenuto alla volta. L'esempio che segue mostra un widget Pannello a soffietto con il primo pannello espanso:

Widget Pannello a soffietto
Widget Pannello a soffietto

A. Scheda Pannello a soffietto B. Contenuto Pannello a soffietto C. Pannello a soffietto (aperto) 

Il codice HTML predefinito per il widget Pannello a soffietto comprende un tag div esterno contenente tutti i pannelli, un tag div per ciascun pannello, e un div header e un div content nel tag di ciascun pannello. Ogni widget Pannello a soffietto può contenere un numero qualsiasi di singolo pannelli. Il codice HTML del widget Pannello a soffietto include anche i tag script nella sezione head del documento e dopo i tag HTML del pannello a soffietto.

Per una descrizione più dettagliata del funzionamento del widget Pannello a soffietto, compresa la spiegazione completa del codice relativo, vedete www.adobe.com/go/learn_dw_spryaccordion_it.

Per consultare un'esercitazione sulle operazioni con il widget Pannello a soffietto, visitate il sito all'indirizzo www.adobe.com/go/vid0167_it.

Inserire e modificare il widget Pannello a soffietto

Inserire il widget Pannello a soffietto

  1. Selezionate Inserisci > Spry > Pannello a soffietto.

Nota:

per inserire un widget Pannello a soffietto, potete anche utilizzare la categoria Spry del pannello Inserisci.

Aggiungere un pannello a un widget Pannello a soffietto

  1. Selezionate un widget Pannello a soffietto nella finestra del documento.
  2. Fate clic sul pulsante “più” (+) di Pannelli nella finestra di ispezione Proprietà (Finestra > Proprietà).
  3. (Opzionale) Modificate il nome del pannello selezionandone il testo nella vista Progettazione e cambiandolo come necessario.

Eliminare un pannello da un widget Pannello a soffietto

  1. Selezionate un widget Pannello a soffietto nella finestra del documento.
  2. Nel menu Pannelli della finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il nome del pannello da eliminare, quindi fate clic sul pulsante meno (-).

Aprire un pannello per la modifica

  1. Effettuate una delle operazioni seguenti:
    • Spostate il puntatore del mouse sopra la scheda del pannello da aprire nella vista Progettazione, quindi fate clic sull'icona dell'occhio che appare a destra della scheda.

    • Selezionate un widget Pannello a soffietto nella finestra del documento e fate clic sul nome del pannello da modificare nel menu Pannelli della finestra di ispezione Proprietà (Finestra > Proprietà).

Modificare l'ordine dei pannelli

  1. Selezionate un widget Pannello a soffietto nella finestra del documento.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il nome del pannello a soffietto da spostare.
  3. Fate clic sulle frecce verso l'alto o verso il basso per spostare il pannello come desiderato.

Personalizzare il widget Pannello a soffietto

Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche ai widget Pannello a soffietto, essa non supporta le attività relative agli stili personalizzati. Se necessario, potete cambiare le regole CSS del widget Pannello a soffietto e creare un pannello a soffietto con lo stile che preferite.

Per una rapida panoramica sulla modifica dei colori nel widget Pannello a soffietto, vedete la guida di David Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (Guida rapida alla personalizzazione di pannelli a schede, pannelli a soffietto e pannelli comprimibili Spry).

Per un elenco più dettagliato delle attività relative agli stili, vedete www.adobe.com/go/learn_dw_spryaccordion_custom_it.

Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryAccordion.css. Quando create un widget Pannello a soffietto Spry, Dreamweaver salva il file SpryAccordion.css nella cartella SpryAssets del sito. Questo file contiene anche informazioni di commento relative ai vari stili applicati al widget; pertanto può risultare utile consultare il file.

Nota:

Nonostante sia possibile modificare facilmente le regole del widget Pannello a soffietto direttamente nel file CSS, potete anche utilizzare il pannello Stili CSS per modificare il CSS del pannello a soffietto. Il pannello Stili CSS è utile per localizzare le classi CSS assegnate a parti differenti del widget, in particolar modo quando si utilizza la modalità Corrente del pannello.

Formattare il testo del widget Pannello a soffietto

Per definire lo stile del testo di un widget Pannello a soffietto, impostate le proprietà dell'intero contenitore del widget Pannello a soffietto, oppure le singole proprietà dei componenti del widget.

  1. Per modificare lo stile del testo di un widget Pannello a soffietto, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungete le proprietà e i valori dello stile di testo desiderato:

    Testo da modificare

    Regola CSS pertinente

    Esempio di proprietà e valori da aggiungere

    Testo nell'intero pannello a soffietto (inclusi schede e pannello contenuto)

    .Accordion o .AccordionPanel

    font: Arial; font-size:medium;

    Testo nelle sole schede del Pannello a soffietto

    .AccordionPanelTab

    font: Arial; font-size:medium;

    Testo nei soli pannelli del contenuto del Pannello a soffietto

    .AccordionPanelContent

    font: Arial; font-size:medium;

Modificare i colori di sfondo del widget Pannello a soffietto

  1. Per modificare i colori dello sfondo di parti differenti di un widget Pannello a soffietto, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi aggiungete o modificate proprietà e valori del colore dello sfondo:

    Parte del widget da modificare

    Regola CSS pertinente

    Esempio di proprietà e valori da aggiungere o modificare

    Colore di sfondo delle schede del pannello a soffietto

    .AccordionPanelTab

    background-color: #CCCCCC; (valore predefinito)

    Colore di sfondo dei pannelli del contenuto del Pannello a soffietto

    .AccordionPanelContent

    background-color: #CCCCCC;

    Colore di sfondo del Pannello a soffietto aperto

    .AccordionPanelOpen .AccordionPanelTab

    background-color: #EEEEEE; (valore predefinito)

    Colore di sfondo delle schede del pannello quando il cursore vi si trova sopra

    .AccordionPanelTab

    color: #555555; (valore predefinito)

    Colore di sfondo della scheda del pannello aperta quando il cursore vi si trova sopra

    .AccordionPanelOpen .AccordionPanelTab

    color: #555555; (valore predefinito)

Limitare la larghezza di un pannello a soffietto

Per impostazione predefinita, il widget Pannello a soffietto si espande fino a riempire lo spazio disponibile. Se necessario, potete limitare la larghezza di un widget Pannello a soffietto impostando la proprietà width per il contenitore del pannello a soffietto.

  1. Localizzate la regola CSS .Accordion aprendo il file SpryAccordion.css. Questa è la regola che definisce le proprietà dell'elemento contenitore principale del widget Pannello a soffietto.

    Nota:

    La regola può essere individuata anche selezionando il widget Pannello a soffietto e cercandola nel pannello Stili CSS (Finestra > Stili CSS). Assicuratevi che il pannello sia impostato in modalità Corrente.

  2. Aggiungete una proprietà e un valore width alla regola, ad esempio width: 300px;.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online