Come creare pannelli pieghevoli con jQuery in Dreamweaver - dummies

Il widget fisarmonica dell'interfaccia utente jQuery in Dreamweaver semplifica l'aggiunta di pannelli comprimibili che i visitatori del sito possono aprire e chiudere senza aggiornare la pagina Web. Questa funzione di jQuery consente di utilizzare meglio lo spazio di una pagina visualizzando più informazioni in meno spazio nella finestra del browser.

Puoi vedere come i pannelli pieghevoli della fisarmonica contengono il nome, la foto e le preferenze di habitat di ogni uccello canoro in questo sito web naturale. Il risultato è che puoi facilmente vedere i nomi di tutti gli uccelli su una pagina. Per visualizzare la descrizione di qualsiasi uccello, un utente deve solo fare clic sulla scheda nella parte superiore del pannello (dove appare il nome dell'uccello), e il pannello si apre immediatamente.

La foto e la descrizione per il beccogiallo sono aperte mentre le altre sulla pagina sono chiuse. La bellezza di jQuery è che la pagina non deve essere ricaricata per i pannelli da aprire o chiudere. Fare clic una volta su una scheda e un pannello si apre immediatamente. Fare clic su un'altra scheda e tale pannello si apre quando il pannello aperto in precedenza si chiude.

I pannelli pieghevoli possono essere utilizzati per visualizzare testo e immagini, nonché file multimediali come file audio, video e Flash.

Per visualizzare un pannello per fisarmonica (o molte altre funzioni avanzate in Dreamweaver) come apparirà in un browser Web, è necessario fare clic sul pulsante Vista dal vivo in alto a sinistra nell'area di lavoro di Dreamweaver.

Dopo aver creato una serie di pannelli per fisarmonica con il menu dell'interfaccia utente jQuery in Dreamweaver, è possibile modificare diverse impostazioni del pannello utilizzando la finestra di ispezione Proprietà, come mostrato nelle istruzioni che seguono.

Attenersi alla seguente procedura per creare un gruppo di pannelli di fisarmonica:

Posizionare il cursore su una pagina in cui si desidera visualizzare i pannelli di fisarmonica.
Scegli Inserisci → Interfaccia utente jQuery → Fisarmonica, oppure fai clic sulla voce Fisarmonica nel pannello Inserisci interfaccia utente jQuery.

Nella pagina viene visualizzato un gruppo di pannelli a fisarmonica pieghevole con jQuery UI.
Selezionare la parola Sezione nella parte superiore di ciascun pannello e sostituirla con il testo che si desidera visualizzare nell'area della scheda del pannello.

Per impostazione predefinita, il testo nell'area Tab è testo semplice, ma è possibile modificarlo modificando la regola CSS corrispondente o formattando il testo utilizzando i tag HTML, come i tag di intestazione.
Selezionare la parola Contenuto nell'area principale di ciascun pannello e immettere qualsiasi testo o immagine che si desidera visualizzare.

Puoi incollare il testo in un pannello proprio come incollerai il testo in qualsiasi altro punto della pagina. Allo stesso modo, si inseriscono le immagini nei pannelli proprio come in qualsiasi altro punto della pagina: posizionare il cursore sul pannello, selezionare Inserisci → Immagine → Immagine e selezionare il file GIF, JPEG o PNG che si desidera visualizzare.È inoltre possibile selezionare un file Photoshop se si desidera utilizzare Dreamweaver per ottimizzare le immagini.

Quando si incolla del testo in un pannello, scegliere Modifica → Incolla speciale per scegliere la quantità di formattazione da conservare nel testo incollato in Dreamweaver. Limitare la quantità di formattazione conservata può ridurre potenziali conflitti di stile.
Per modificare le impostazioni del pannello, fare clic sulla scheda blu JQuery Accordion nella parte superiore dei pannelli nell'area di disegno.

Quando si fa clic sulla scheda blu, le impostazioni del pannello vengono visualizzate nella finestra di ispezione Proprietà. (Fare clic correttamente sulla scheda blu può essere complicato, quindi assicurati di fare clic sull'area blu.) Fai clic su un qualsiasi altro punto della pagina e l'ispettore ritorna alle impostazioni predefinite.
Aggiungi o rimuovi pannelli usando il campo Panels nella finestra di ispezione Proprietà.

Per aggiungere un pannello, fare clic sul segno più (+) a destra del campo Panels. Per rimuovere un pannello da un set di fisarmoniche, selezionare prima il nome del pannello nell'elenco a discesa Pannelli nella finestra di ispezione Proprietà e quindi fare clic sul segno meno (@@ min).

È possibile aggiungere un altro pannello facendo nuovamente clic sul segno più.
Modifica la modalità di apertura dei pannelli utilizzando il menu a discesa Eventi.

Le impostazioni dell'evento controllano se i pannelli si aprono quando un utente fa clic su una scheda del pannello (Fare clic) o fa scorrere un cursore sulla scheda del pannello (Mouseover).
Imposta altre opzioni del pannello, come desiderato.

Le opzioni di fisarmonica nella finestra di ispezione Proprietà sono facoltative e includono la possibilità di disabilitare qualsiasi o tutti i pannelli (Disattiva) e di animare il modo in cui i pannelli si aprono e si chiudono (elenco a discesa Animate).
Scegli File → Salva per salvare la pagina; quando viene visualizzata la finestra di dialogo Copia file dipendenti, fare clic su OK per generare tutti i file correlati.

Affinché le funzioni di Spry funzionino, è necessario caricare questi file sul server Web quando si carica la pagina Web.
Per modificare l'aspetto del pannello, come la faccia del carattere o il colore del testo, modifica la regola CSS corrispondente.

Nota: Non è possibile modificare gli stili corrispondenti per un pannello per fisarmonica finché la pagina non è stata salvata e Dreamweaver ha generato i file CSS e JavaScript corrispondenti.
Per vedere come appariranno i pannelli in un browser web, fare clic sull'icona del globo nella parte superiore dell'area di lavoro e selezionare il browser che si desidera utilizzare per visualizzare l'anteprima della pagina.

Quando si utilizza il computer per visualizzare l'anteprima di una pagina che presenta una funzionalità interattiva che richiede JavaScript o un'altra programmazione, alcuni browser Web, incluso Internet Explorer, visualizzeranno un avviso che indica che è necessario consentire ai controlli ActiveX di visualizzare la pagina.

Questo è un avviso di sicurezza che appare solo quando la pagina viene aperta sullo stesso computer in cui la pagina viene salvata. Se pubblichi la pagina su un server web e la visualizzi su una connessione Internet, questo errore non verrà visualizzato per te o per i visitatori del tuo sito.