Casa Social media Come creare pannelli pieghevoli con jQuery in Dreamweaver - dummies

Come creare pannelli pieghevoli con jQuery in Dreamweaver - dummies

Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2025

Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2025
Anonim

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:

  1. Posizionare il cursore su una pagina in cui si desidera visualizzare i pannelli di fisarmonica.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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ù.

  7. 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).

  8. 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).

  9. 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.

  10. 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.

  11. 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.

Come creare pannelli pieghevoli con jQuery in Dreamweaver - dummies

Scelta dell'editore

Vantaggi di base della rete - manichini

Vantaggi di base della rete - manichini

Se la verità viene detta, le reti di computer sono un problema da impostare. Perché i vantaggi di avere una rete rendono la pena di crearne uno utile. Non è necessario essere un dottorato di ricerca per comprendere i vantaggi del networking. Le reti riguardano esclusivamente la condivisione. Nello specifico, le reti riguardano la condivisione di tre elementi: informazioni, risorse, ...

Biometria L'accettazione, la privacy e la legge - manichini

Biometria L'accettazione, la privacy e la legge - manichini

La tecnologia biometrica non è affatto universalmente accettata da tutti gli utenti. Ci sono una serie di considerazioni sociali e legali che danno ad ogni organizzazione una pausa prima di fare il salto a capofitto nell'implementazione di un sistema biometrico. Le persone sono più a loro agio con i sistemi di raccolta biometrici che sono i meno intrusivi. Scanner per retina e nasi elettronici sono ...

Biometria Nozioni di base - manichini

Biometria Nozioni di base - manichini

La biometria non è roba da fantascienza. Puoi trovare una dozzina di modi più o meno efficaci per utilizzare la biometria per identificare qualcuno, ognuno dei quali si divide in due classi: la biometria fisiologica misura una parte specifica della struttura o della forma di una porzione del corpo di un soggetto. La biometria comportamentale è più interessata a come ...

Scelta dell'editore

Come creare un nuovo dizionario personalizzato in Excel 2007 - dummies

Come creare un nuovo dizionario personalizzato in Excel 2007 - dummies

In Excel 2007, è possibile creare dizionari personalizzati da utilizzare quando si esegue il controllo ortografico dei fogli di lavoro. Utilizzare il pulsante Aggiungi al dizionario nella finestra di dialogo Controllo ortografico per aggiungere parole sconosciute a un dizionario personalizzato. Per impostazione predefinita, Excel aggiunge queste parole a un file dizionario personalizzato denominato CUSTOM. DIC, ma è possibile creare una nuova personalizzazione ...

Come creare un componente aggiuntivo da un file di cartella di lavoro Excel Excel normale in VBA - modi di dire

Come creare un componente aggiuntivo da un file di cartella di lavoro Excel Excel normale in VBA - modi di dire

Sebbene sia possibile convertire qualsiasi cartella di lavoro di Excel in un componente aggiuntivo, non tutte le cartelle di lavoro traggono vantaggio da questa conversione. Una cartella di lavoro senza macro rende un componente aggiuntivo inutile. In effetti, gli unici tipi di cartelle di lavoro che traggono vantaggio dall'essere convertiti in un componente aggiuntivo sono quelli con macro. Ad esempio, una cartella di lavoro costituita da macro generiche (Sub ...

Come creare una nuova cartella di lavoro in Excel 2010 - dummy

Come creare una nuova cartella di lavoro in Excel 2010 - dummy

Se si lavora in Microsoft Excel 2010 e vuoi iniziare a lavorare in un nuovo file di cartella di lavoro di Excel, puoi facilmente creare una nuova cartella di lavoro. Per fare ciò, puoi usare un comando nella scheda File o una scorciatoia da tastiera. Fare clic sulla scheda File. Excel visualizza la visualizzazione Backstage, in cui è possibile accedere ai comandi relativi ai file. ...

Scelta dell'editore

Usa lo strumento Gomma in Adobe Illustrator CS5 - manichini

Usa lo strumento Gomma in Adobe Illustrator CS5 - manichini

Adobe Illustrator Creative Suite 5 (Adobe CS5) Illustrator è utilizzato per rimuovere rapidamente aree di grafica con la stessa facilità con cui si cancellano i pixel in Photoshop, accarezzando con il mouse su qualsiasi forma o gruppo di forme. Facendo doppio clic sullo strumento Gomma, è possibile definire il diametro, l'angolo e la rotondità della gomma. Se stai usando un ...

Trasforma gli strumenti in Adobe Illustrator CS5 - dummies

Trasforma gli strumenti in Adobe Illustrator CS5 - dummies

I più popolari strumenti di trasformazione in Adobe Creative Suite 5 (Adobe CS5) Illustrator - Rifletti, scala, inclina, rimodella e Trasformazione libera: sono facili da usare e modificano rapidamente la tua illustrazione. Lo strumento Rifletti Niente è simmetrico, giusto? Forse no, ma gli oggetti non creati simmetricamente in Illustrator possono sembrare off-kilter. Utilizzando lo strumento Rifletti, si ...

Quando utilizzare Adobe CS5 Illustrator - dummies

Quando utilizzare Adobe CS5 Illustrator - dummies

Utilizzando Adobe Creative Suite 5 (Adobe CS5) Illustrator anziché Photoshop , ottieni diversi benefici. Potresti aver sentito che Illustrator è migliore per la grafica vettoriale, ma perché e che altro porta? Illustrator può salvare ed esportare immagini nella maggior parte dei formati di file. Scegliendo di salvare o esportare, è possibile creare un ...