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 Pannelli a schede

Un widget Pannelli a schede è un insieme di pannelli in grado di memorizzare il contenuto in uno spazio limitato. I visitatori del sito possono nascondere o visualizzare il contenuto dei pannelli a schede facendo clic sulla scheda del pannello cui desiderano accedere. I pannelli del widget si aprono a seconda della scheda su cui il visitatore fa clic. Nel widget Pannelli a schede può essere aperto un solo pannello alla volta. L'esempio che segue mostra un widget Pannelli a schede con il terzo pannello aperto:

Widget Pannelli a schede
Widget Pannelli a schede

A. Scheda B. Contenuto C. widget Pannelli a schede D. Pannello a schede 

Il codice HTML per il widget Pannelli a schede comprende un tag div esterno contenente tutti i pannelli, un elenco delle schede, un tag div destinato a contenere i pannelli di contenuto e un div per ciascun pannello di contenuto. Il codice HTML del widget Pannelli a schede include anche i tag script nella sezione head del documento e dopo i tag HTML del widget stesso.

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

Inserire e modificare il widget Pannelli a schede

Inserire il widget Pannelli a schede

  1. Selezionate Inserisci > Spry > Pannelli a schede Spry.

Nota:

per inserire un widget Pannelli a schede, potete anche utilizzare la categoria Spry nel pannello Inserisci.

Aggiungere un pannello a un widget Pannelli a schede

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

Eliminare un pannello da un widget Pannelli a schede

  1. Selezionate un widget Pannelli a schede 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 che desiderate aprire nella vista Progettazione, quindi fate clic sull'icona dell'occhio che appare a destra della scheda.

    • Selezionate un widget Pannelli a schede nella finestra del documento, quindi 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 Pannelli a schede nella finestra del documento.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il nome del pannello che desiderate spostare.
  3. Fate clic sulle frecce verso l'alto o verso il basso per spostare il pannello come desiderato.

Impostare il pannello aperto predefinito

Potete impostare il pannello del widget Pannelli a schede aperto per impostazione predefinita quando la pagina viene aperta in un browser.

  1. Selezionate un widget Pannelli a schede nella finestra del documento.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il pannello da aprire per impostazione predefinita dal menu a comparsa Pannello predefinito.

Personalizzare il widget Pannelli a schede

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

Per una rapida panoramica sulla modifica dei colori nel widget Pannello a schede, 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_sprytabbedpanels_custom_it.

Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryTabbedPanels.css. Quando create un widget Pannelli a schede Spry, Dreamweaver salva il file SpryTabbedPanels.css nella cartella SpryAssets del sito. Questo file contiene anche utili commenti relativi ai vari stili che possono essere applicati ai widget.

Nota:

Nonostante sia possibile modificare facilmente le regole del widget Pannelli a schede direttamente nel file CSS associato, per modificare il CSS del widget potete anche utilizzare il pannello Stili CSS. 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 Pannelli a schede

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

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

    Testo da modificare

    Regola CSS pertinente

    Esempio di proprietà e valori da aggiungere

    Testo nell'intero widget

    .Pannelli a schede

    font: Arial; font-size:medium;

    Testo nelle sole schede del pannello

    .TabbedPanelsTabGroup o .TabbedPanelsTab

    font: Arial; font-size:medium;

    Testo nei soli pannelli di contenuto

    .TabbedPanelsContentGroup o .TabbedPanelsContent

    font: Arial; font-size:medium;

Modificare i colori di sfondo del widget Pannelli a schede

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

    Colore da modificare

    Regola CSS pertinente

    Esempio di proprietà e valori da aggiungere o modificare

    Colore di sfondo delle schede del pannello

    .TabbedPanelsTabGroup o .TabbedPanelsTab

    background-color: #DDD; (valore predefinito)

    Colore di sfondo dei pannelli di contenuto

    .Tabbed PanelsContentGroup o .TabbedPanelsContent

    background-color: #EEE; (valore predefinito)

    Colore di sfondo della scheda selezionata

    .TabbedPanelsTabSelected

    background-color: #EEE; (valore predefinito)

    Colore di sfondo delle schede del pannello quando il cursore del mouse si trova su di esse

    .TabbedPanelsTabHover

    background-color: #CCC; (valore predefinito)

Limitare la larghezza dei pannelli a schede

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

  1. Localizzate la regola CSS .TabbedPanels aprendo il file SpryTabbedPanels.css. Questa regola definisce le proprietà dell'elemento contenitore principale del widget Pannelli a schede.

    Nota:

    La regola può essere individuata anche selezionando il widget Pannelli a schede 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