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

HDR Fotografia: Regola le impostazioni in Photomatix Dettagli Enhancer - dummies

HDR Fotografia: Regola le impostazioni in Photomatix Dettagli Enhancer - dummies

Dettagli Enhancer in Photomatix Pro ti consente di toni mappa le tue immagini ad alta gamma dinamica (HDR). Come puoi vedere da questa figura, ci sono un certo numero di controlli. Per fortuna, sono ben organizzati in aree funzionali. Le tre finestre mobili mostrano le impostazioni, l'anteprima dell'immagine e l'istogramma. Forza: controlla la forza di potenziamento del contrasto, sia locale ...

HDR Fotografia - Miscela materiale da fonti alternative - manichini

HDR Fotografia - Miscela materiale da fonti alternative - manichini

Cerca le aree dove potresti aver bisogno per mescolare il materiale da fonti alternative. Ad esempio, se una parte del cielo è saltata fuori, potresti voler sostituire il cielo scoppiato con una versione che è stata mappata in modo diverso in modo che il cielo appaia meglio (ciò che spesso accade è il resto ...

HDR Fotografia: scegli un formato file - dummies

HDR Fotografia: scegli un formato file - dummies

Quando crei un'immagine ad alta gamma dinamica, spesso viene data la possibilità di salvarlo come file HDR per un uso successivo. Se lo si salva come file HDR dipende in parte dalle preferenze e in parte da ciò che si intende fare. Normalmente, salti a destra nella mappatura dei toni, salva il minimo finale ...

Scelta dell'editore

Farmaci Opzioni per gestire la rabbia - manichini

Farmaci Opzioni per gestire la rabbia - manichini

La maggior parte dei programmi di gestione della rabbia non affronta il problema dei farmaci. In parte, probabilmente perché i farmaci non sono in realtà un modo per gestire la tua rabbia. E gli studi sull'efficacia dei farmaci per la rabbia sono stati alquanto incoerenti. Tuttavia, dovresti sapere che i farmaci possono essere un'opzione per alcune persone, specialmente quando altri disturbi emotivi, come ...

Gestione di amici e parenti con intelligenza emotiva - manichini

Gestione di amici e parenti con intelligenza emotiva - manichini

Ecco alcuni modi in cui si praticano tecniche di intelligenza emotiva con amici intimi e i parenti possono aiutarti a disinnescare situazioni difficili ea mantenere relazioni equilibrate e soddisfacenti con i tuoi cari. A partire dal finale le persone a volte interrompono completamente i contatti con parenti e amici e potresti trovarti in una situazione in cui ...

Mini questionario motivazionale - manichini

Mini questionario motivazionale - manichini

Dai un'occhiata al seguente elenco di compiti e decidi se vuoi ottenerne uno. Seleziona le attività che pensi di voler intraprendere: Acquistare una nuova casa Decorare la tua casa Sviluppare uno stile di vita più salutare Ottenere un nuovo lavoro Ottenere una promozione di lavoro Passare gli esami Lavorare per un ...

Scelta dell'editore

Come identificare i trigger di rabbia - dummies

Come identificare i trigger di rabbia - dummies

Conoscere i trigger di rabbia - gli eventi e le situazioni che ti fanno impazzire - è importante perché risponderai in modo più efficace alla tua rabbia quando ti sentirai preparato. Anticipare la possibilità di rabbia aumenta la capacità di esprimerlo in modo più costruttivo. Ecco alcuni trigger di rabbia comuni. Molte persone si sentono ...

Come misurare il tuo stress - manichini

Come misurare il tuo stress - manichini

Riconoscere i sintomi dello stress e quanto spesso si verificano può aiutarti ad affrontare lo stress. Utilizza le due settimane precedenti come periodo di tempo e registra l'occorrenza dei seguenti segni e sintomi fisici ed emotivi di stress. Dopo aver identificato i sintomi dello stress e quanto spesso si verificano, utilizzare la scala di valutazione dello stress per trovare il ...

Come calmare la mente - dummies

Come calmare la mente - dummies

Trovare modi per ridurre i livelli di stress aumenterà la tua felicità. A volte distrarti non è abbastanza per calmare la tua mente. A volte avete bisogno di misure più forti per eliminare, o almeno rallentare, quelle preoccupazioni e preoccupazioni indesiderate e che producono stress. Forse hai una preoccupazione inquietante che ti intrude continuamente nel tuo pensiero e ti impedisce di goderti ...