Utilizza questo argomento per capire come applicare i comportamenti JavaScript integrati in Adobe Dreamweaver.
Utilizzare i comportamenti incorporati
I comportamenti inclusi con Dreamweaver sono stati scritti per funzionare nei browser moderni.In quelli più vecchi, potrebbero non funzionare (senza conseguenze).
Le azioni di Dreamweaver sono state progettate con attenzione per funzionare nel maggior numero possibile di browser.Se rimuovi manualmente il codice da un'azione di Dreamweaver o lo sostituisci con il tuo codice, potresti perdere la compatibilità cross-browser.
Sebbene le azioni di Dreamweaver siano state scritte per massimizzare la compatibilità cross-browser, alcuni browser non supportano affatto JavaScript e molte persone che navigano nel web mantengono JavaScript disattivato nei loro browser.Per ottenere risultati multipiattaforma ottimali, fornisci interfacce alternative racchiuse in tag <noscript> in modo che le persone senza JavaScript possano utilizzare il tuo sede.
Applicare il comportamento Chiama JavaScript
Il comportamento Call JavaScript esegue una funzione personalizzata o una riga di codice JavaScript quando si verifica un evento.(Puoi scrivere lo script da solo oppure utilizzare il codice fornito da varie librerie JavaScript disponibili gratuitamente sul web.)
Ad esempio, per creare un pulsante Indietro, potete digitare if (history.length > 0){history.back()}. Se hai incapsulato il codice in una funzione, digita solo il nome della funzione (ad esempio, hGoBack()).
Applicare il comportamento Cambia proprietà
Utilizza il comportamento Cambia proprietà per modificare il Valore di una delle proprietà di un oggetto (ad esempio, il colore di sfondo di un div o l'azione di un modulo).
Utilizza questo comportamento solo se hai molta familiarità con HTML e JavaScript.
Applicare il comportamento Controlla plugin
Utilizza il comportamento Controlla plug-in per inviare i visitatori a pagine diverse a seconda che abbiano installato il plug‑in specificato. Ad esempio, potresti volere che i visitatori vadano a una pagina se hanno Shockwave e a un'altra pagina se non ce l'hanno.
Non puoi rilevare plug‑in specifici in Internet Explorer utilizzando JavaScript. Tuttavia, selezionare Flash o Director aggiungerà il codice VBScript appropriato alla tua pagina per rilevare quei plug‑in in Internet Explorer su Windows. Il controllo dei plugin non è possibile in Internet Explorer su Mac OS.
Devi utilizzare il nome esatto del plug-in come specificato in grassetto nella pagina About Plug-ins di Netscape Navigator. (In Windows, seleziona il comando Aiuto > Informazioni sui plug-in di Navigator; su Mac OS, seleziona Informazioni sui plug-in dal menu Apple.)
Se specifichi un URL remoto, devi includere il prefisso http:// nell'indirizzo.Se lasci il campo vuoto, i visitatori rimarranno sulla stessa pagina.
Questa opzione si applica solo a Internet Explorer; Netscape Navigator può sempre rilevare i plug-in.
Applicare il comportamento Trascina elemento PA
Il comportamento Drag AP Element consente al visitatore di trascinare un elemento posizionato assolutamente (AP). Usa questo comportamento per creare puzzle, controlli del cursore e altri elementi dell'interfaccia mobili.
Puoi specificare in quale direzione il visitatore può trascinare l'elemento AP (orizzontalmente, verticalmente o in qualsiasi direzione), un obiettivo verso cui il visitatore dovrebbe trascinare l'elemento AP, se agganciare l'elemento AP all'obiettivo se l'elemento AP si trova entro un certo numero di pixel dall'obiettivo, cosa fare quando l'elemento AP raggiunge l'obiettivo e altro ancora.
Poiché il comportamento Drag AP Element deve essere chiamato prima che il visitatore possa trascinare l'elemento AP, collega Drag AP Element all'oggetto body (con l'evento onLoad).
Se Drag AP Element non è disponibile, probabilmente hai un elemento AP selezionato.
Il movimento non vincolato è appropriato per puzzle e altri giochi di trascinamento. Per controlli cursore e scenari mobili come cassetti di file, tende e mini-persiane, seleziona movimento vincolato.
I valori sono relativi alla posizione iniziale dell'elemento AP. Per vincolare il movimento all'interno di un'area rettangolare, inserisci valori positivi in tutte e quattro le caselle.Per consentire solo il movimento verticale, inserisci valori positivi per Su e Giù e 0 per Sinistra e Destra. Per consentire solo il movimento orizzontale, inserisci valori positivi per Sinistra e Destra e 0 per Su e Giù.
La destinazione di rilascio è il punto in cui desideri che il visitatore trascini l'elemento AP. Un elemento AP viene considerato come se avesse raggiunto la destinazione di rilascio quando le sue coordinate sinistra e superiore corrispondono ai valori inseriti nelle caselle Sinistra e Sopra. I valori sono relativi all'angolo superiore sinistro della finestra del browser.Fai clic su Ottieni posizione corrente per compilare automaticamente le caselle di testo con la posizione corrente dell'elemento AP.
Valori più grandi rendono più facile per il visitatore trovare la destinazione di rilascio.
Questa opzione è utile quando l'immagine all'interno dell'elemento AP contiene un elemento che suggerisce il trascinamento, come una barra del titolo o la maniglia di un cassetto. Non impostare questa opzione se desideri che il visitatore possa fare clic ovunque nell'elemento AP per trascinarlo.
Seleziona Porta elemento in primo piano se l'elemento AP deve spostarsi in primo piano nell'ordine di sovrapposizione mentre viene trascinato. Se selezioni questa opzione, usa il menu a comparsa per selezionare se lasciare l'elemento AP in primo piano o ripristinarlo alla sua posizione originale nell'ordine di sovrapposizione.
Inserisci codice JavaScript o un nome di funzione (ad esempio, monitorAPelement()) nella casella Chiama JavaScript per eseguire ripetutamente il codice o la funzione mentre l'elemento AP viene trascinato. Ad esempio, potresti scrivere una funzione che monitora le coordinate dell'elemento AP e visualizza suggerimenti come «ti stai avvicinando» o «non sei nemmeno vicino alla destinazione di rilascio» in una casella di testo.
Raccogliere informazioni sugli elementi PA trascinabili
Quando alleghi il comportamento Trascina elemento AP a un oggetto, Dreamweaver inserisce la funzione MM_dragLayer() nella sezione head del documento. (La funzione mantiene la vecchia convenzione di denominazione per gli elementi AP [ovvero, "Layer"] in modo che i livelli creati nelle versioni precedenti di Dreamweaver rimangano modificabili.) Oltre a registrare l'elemento AP come trascinabile, questa funzione definisce tre proprietà per ogni elemento AP trascinabile—MM_LEFTRIGHT, MM_UPDOWN, e MM_SNAPPED—che puoi usare nelle tue funzioni JavaScript per determinare la posizione orizzontale relativa dell'elemento AP, la posizione verticale relativa dell'elemento AP e se l' elemento AP ha raggiunto la destinazione di rilascio.
Le informazioni fornite qui sono destinate esclusivamente ai programmatori JavaScript esperti.
Ad esempio, la seguente funzione visualizza il valore della proprietà MM_UPDOWN (la posizione verticale corrente dell'elemento AP) in un campo modulo chiamato curPosField. (I campi modulo sono utili per visualizzare informazioni aggiornate continuamente perché sono dinamici, ovvero è possibile cambiarne i contenuti dopo che la pagina ha terminato il caricamento.)
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Invece di visualizzare i valori di MM_UPDOWN o MM_LEFTRIGHT in un campo modulo, potresti utilizzare tali valori in diversi altri modi.Ad esempio, puoi scrivere una funzione che visualizza un messaggio nel campo del form a seconda di quanto il valore è vicino alla zona di rilascio, oppure puoi richiamare un'altra funzione per mostrare o nascondere un elemento AP a seconda del valore.
È particolarmente utile leggere la proprietà MM_SNAPPED quando sono presenti diversi elementi AP sulla pagina, che devono raggiungere tutti i loro obiettivi prima che il visitatore possa avanzare alla pagina o attività successiva. Ad esempio, è possibile scrivere una funzione per contare quanti elementi AP hanno un valore MM_SNAPPED di vero e richiamarla ogni volta che viene rilasciato un elemento AP. Quando il conteggio snap raggiunge il numero desiderato, puoi inviare il visitatore alla pagina successiva o visualizzare un messaggio di congratulazioni.
Applicare il comportamento Vai a URL
Il comportamento Vai a URL apre una nuova pagina nella finestra corrente o nel frame specificato.Questo comportamento è utile per cambiare i contenuti di due o più fotogrammi con un clic.
L'elenco Apri in elenca automaticamente i nomi di tutti i fotogrammi nel set di fotogrammi corrente oltre alla finestra principale. Se non ci sono fotogrammi, la finestra principale è l'unica opzione.
Questo comportamento potrebbe produrre risultati imprevisti se un fotogramma è denominato top, blank, self o parent. I browser a volte scambiano questi nomi per nomi di destinazione riservati.
Applicare il comportamento Menu di collegamento
Quando crei un menu di collegamento utilizzando Inserisci > Modulo > Menu di collegamento, Dreamweaver crea un oggetto menu e vi collega il comportamento Menu di collegamento (o Vai al menu di collegamento). Di solito non è necessario collegare il comportamento Menu di collegamento a un oggetto manualmente.
Puoi modificare un menu di salto esistente in uno di due modi:
Puoi modificare e riorganizzare le voci di menu, cambiare i file verso cui saltare e cambiare la finestra in cui tali file si aprono, facendo doppio clic su un comportamento Menu di salto esistente nel pannello Comportamenti.
È possibile modificare le voci nel menu proprio come si modificherebbero le voci in qualsiasi menu, selezionando il menu e utilizzando il pulsante Valori elenco nella finestra di ispezione Proprietà.
Applicare il comportamento Vai a menu di collegamento
Il comportamento Vai del menu di selezione è strettamente associato al comportamento Menu di selezione; Vai del menu di selezione consente di associare un pulsante Vai a un menu di selezione. (Prima di utilizzare questo comportamento, deve già esistere un menu di selezione nel documento.) Facendo clic sul pulsante Vai si apre il collegamento selezionato nel menu di selezione. Un menu di selezione normalmente non richiede un pulsante Vai; selezionare un elemento da un menu di selezione generalmente causa il caricamento di un URL senza bisogno di ulteriori azioni da parte dell'utente. Ma se il visitatore seleziona lo stesso elemento già scelto nel menu di selezione, il salto non si verifica. In generale, questo non importa, ma se il menu di selezione appare in un fotogramma, e gli elementi del menu di selezione collegano a pagine in altri fotogrammi, un pulsante Vai è spesso utile, per consentire ai visitatori di riselezionare un elemento già selezionato nel menu di selezione.
Quando utilizzi un pulsante Vai con un menu di selezione, il pulsante Vai diventa l'unico meccanismo che "porta" l'utente all'URL associato alla selezione nel menu. Selezionare un elemento del menu nel menu di selezione non reindirizza più l'utente automaticamente a un'altra pagina o fotogramma.
Applicare il comportamento Apri finestra browser
Utilizza il comportamento Apri finestra del browser per aprire una pagina in una nuova finestra.Puoi specificare le proprietà della nuova finestra, incluse le sue dimensioni, attributi (se è ridimensionabile, ha una barra dei menu e così via) e nome. Ad esempio, puoi utilizzare questo comportamento per aprire un'immagine più grande in una finestra separata quando il visitatore fa clic su una miniatura dell'immagine; con questo comportamento, puoi rendere la nuova finestra della dimensione esatta dell'immagine.
Se non specifichi attributi per la finestra, si apre alla dimensione e con gli attributi della finestra da cui è stata aperta. Specificare qualsiasi attributo per la finestra automaticamente disattiva tutti gli altri attributi che non sono esplicitamente attivati. Ad esempio, se non imposti attributi per la finestra, potrebbe aprirsi a 1024 x 768 pixel e avere una barra di navigazione (che mostra i pulsanti Indietro, Avanti, Home e Ricarica), barra degli indirizzi (che mostra l'URL), barra di stato (che mostra messaggi di stato, in basso) e barra dei menu (che mostra File, Modifica, Visualizza e altri menu).Se esplicitamente imposti la larghezza a 640 e l'altezza a 480 e non imposti altri attributi, la finestra si apre a 640 x 480 px, senza barre degli strumenti.
Applicare il comportamento Messaggio popup
Il comportamento Messaggio popup visualizza un avviso JavaScript con il messaggio che specifichi. Poiché gli avvisi JavaScript hanno solo un pulsante (OK), utilizza questo comportamento per fornire informazioni all'utente piuttosto che per presentare una scelta.
Puoi incorporare qualsiasi chiamata di funzione JavaScript valida, proprietà, variabile globale o altra espressione nel testo. Per incorporare un'espressione JavaScript, posizionala tra parentesi graffe ({}). Per visualizzare una parentesi graffa, falla precedere da una barra rovesciata (\{).
Esempio:
L'URL di questa pagina è {window.location} e oggi è {new Date()}.
Il browser controlla l'aspetto dell'avviso. Se vuoi un maggiore controllo sull'aspetto, considera l'uso del comportamento Apri finestra browser.
Applicare il comportamento Precarica immagini
Il comportamento Precarica immagini riduce i tempi di visualizzazione memorizzando in cache le immagini che non vengono mostrate quando la pagina si apre per la prima volta (ad esempio, le immagini che verranno scambiate con comportamenti o Script).
Il comportamento Scambia immagine precarica automaticamente tutte le immagini in primo piano quando selezioni l'opzione Precarica immagini nella finestra di dialogo Scambia immagine, quindi non devi aggiungere manualmente Precarica immagini quando usi Scambia immagine.
Applicare il comportamento Imposta testo del frame
Il comportamento Imposta testo del fotogramma ti consente di impostare dinamicamente il testo di un fotogramma, sostituendo il contenuto e la formattazione di un fotogramma con il contenuto che specifichi. Il contenuto può includere qualsiasi codice HTML valido. Utilizzate questo comportamento per visualizzare informazioni in modo dinamico.
Anche se il comportamento Imposta testo del fotogramma sostituisce la formattazione di un fotogramma, puoi selezionare Mantieni colore di sfondo per mantenere gli attributi del colore di sfondo e del testo della pagina.
Puoi incorporare qualsiasi chiamata di funzione JavaScript valida, proprietà, variabile globale o altra espressione nel testo. Per incorporare un'espressione JavaScript, posizionala tra parentesi graffe ({}). Per visualizzare una parentesi graffa, falla precedere da una barra rovesciata (\{).
Esempio:
L'URL di questa pagina è {window.location} e oggi è {new Date()}.
Applica il comportamento Imposta testo del contenitore
Il comportamento Imposta testo del contenitore sostituisce il contenuto e la formattazione di un contenitore esistente (ovvero qualsiasi elemento che può contenere testo o altri elementi) su una pagina con il contenuto specificato. Tale contenuto può essere costituito da qualunque codice di origine HTML valido.
Puoi incorporare qualsiasi chiamata di funzione JavaScript valida, proprietà, variabile globale o altra espressione nel testo. Per incorporare un'espressione JavaScript, inseriscila tra parentesi graffe ({}). Per visualizzare una parentesi graffa, falla precedere da una barra rovesciata (\{).
Esempio:
L'URL di questa pagina è {window.location} e oggi è {new Date()}.
Applicare il comportamento Imposta testo della barra di stato
Il comportamento Imposta testo della barra di stato mostra un messaggio nella barra di stato nell'angolo in basso a sinistra della finestra del browser. Ad esempio, puoi usare questo comportamento per descrivere la destinazione di un collegamento nella barra di stato anziché mostrare l'URL ad esso associato. I visitatori spesso ignorano o trascurano i messaggi nella barra di stato (e non tutti i browser forniscono supporto completo per impostare il testo della barra di stato); se il tuo messaggio è importante, considera di visualizzarlo come messaggio pop-up o come testo di un elemento AP.
Se usi il comportamento Imposta testo della barra di stato in Dreamweaver, non è garantito che il testo della barra di stato nel browser cambi perché alcuni browser richiedono regolazioni speciali quando si modifica il testo della barra di stato. Firefox, ad esempio, richiede di modificare un'opzione Avanzata che permette a JavaScript di cambiare il testo della barra di stato. Per ulteriori informazioni, consultate la documentazione del browser.
Puoi incorporare qualsiasi chiamata di funzione JavaScript valida, proprietà, variabile globale o altra espressione nel testo. Per incorporare un'espressione JavaScript, inseriscila tra parentesi graffe ({}). Per visualizzare una parentesi graffa, falla precedere da una barra rovesciata (\{).
Esempio:
L'URL di questa pagina è {window.location} e oggi è {new Date()}.
Inserite un messaggio breve. Il browser tronca il messaggio se non rientra nella barra di stato.
Applicare il comportamento Imposta testo del campo di testo
Il comportamento Imposta testo del campo di testo sostituisce il contenuto di un campo di testo di un modulo con il contenuto specificato.
Puoi incorporare qualsiasi chiamata di funzione JavaScript valida, proprietà, variabile globale o altra espressione nel testo. Per incorporare un'espressione JavaScript, inseriscila tra parentesi graffe ({}). Per visualizzare una parentesi graffa, fatela precedere da una barra rovesciata (\{).
Esempio:
L'URL di questa pagina è {window.location} e oggi è {new Date()}.
Creare un campo di testo con nome
Se Dreamweaver ti chiede di aggiungere un tag modulo, fai clic su Sì.
Applicare Imposta testo del campo di testo
Applicare il comportamento Mostra-nascondi elementi
Il comportamento Mostra-Nascondi elementi mostra, nasconde o ripristina la visibilità predefinita di uno o più elementi della pagina. Questo comportamento è utile per visualizzare informazioni mentre l'utente interagisce con la pagina.Ad esempio, mentre l'utente sposta il puntatore su un' immagine di una pianta, potresti mostrare un elemento della pagina con dettagli sulla stagione di crescita e l'area geografica della pianta, quanta luce solare necessita, quanto può crescere e così via. Il comportamento mostra o nasconde solo l'elemento pertinente: non rimuove effettivamente l'elemento dal flusso della pagina quando è nascosto.
Se Mostra-Nascondi elementi non è disponibile, probabilmente hai selezionato un elemento AP. Poiché gli elementi AP non accettano eventi in entrambi i browser 4.0, devi selezionare un oggetto diverso, come il tag <body> o un collegamento tag (<a>).
Questo comportamento è deprecato a partire da Dreamweaver CS5.
Applicare il comportamento Scambia immagine
Il comportamento Scambia immagine scambia un'immagine con un'altra modificando l'attributo src del tag <img>. Utilizza questo comportamento per creare rollover di pulsanti e altri effetti immagine (incluso lo scambio di più immagini contemporaneamente).L'inserimento di un'immagine di cumulabilità aggiunge automaticamente un comportamento Scambia immagine alla pagina.
Poiché solo l'attributo src è interessato da questo comportamento, dovresti scambiare con un'immagine che abbia le stesse dimensioni (altezza e larghezza) dell'originale. Altrimenti, l'immagine che scambi si riduce o si espande per adattarsi alle dimensioni dell'immagine originale.
Esiste anche un comportamento Ripristina scambio immagine, che ripristina l'ultimo set di immagini scambiate ai file di origine precedenti. Questo comportamento viene aggiunto automaticamente ogni volta che colleghi il comportamento Scambia immagine a un oggetto; se lasci l'opzione Ripristina selezionata durante il collegamento di Scambia immagine, non dovresti mai aver bisogno di selezionare manualmente il comportamento Ripristina scambio immagine.
Non è obbligatorio assegnare un nome alle immagini; vengono rinominate automaticamente quando colleghi il comportamento a un oggetto. Tuttavia, è più facile distinguere le immagini nella finestra di dialogo Scambia immagine se assegni un nome a tutte le immagini in anticipo.
Questo impedisce ritardi nel download quando le immagini devono essere visualizzate.
Applicare il comportamento Convalida modulo
Il comportamento Convalida modulo controlla il contenuto dei campi di testo specificati per assicurarsi che l'utente abbia inserito il tipo corretto di dati. Collega questo comportamento a singoli campi di testo con l'evento onBlur per convalidare i campi mentre l'utente compila il modulo, oppure collegalo al modulo con l'evento onSubmit per valutare diversi campi di testo contemporaneamente quando l'utente fa clic sul pulsante Invia. Collegare questo comportamento a un modulo impedisce l'invio di moduli con dati non validi.
Ripetete questo passaggio per inserire altri campi di testo.
Per convalidare i singoli campi mentre l'utente compila il modulo, seleziona un campo di testo e seleziona Finestra > Comportamenti.
Per convalidare più campi quando l'utente invia il modulo, fai clic sul tag <form> nel selettore di tag nell'angolo inferiore sinistro della finestra Documento e scegli Finestra > Comportamenti.
Se stai convalidando i singoli campi, seleziona lo stesso campo che hai selezionato nella finestra Documento dall' elenco Campi.
Se stai convalidando più campi, seleziona un campo di testo dall'elenco Campi.
Qualunque
Controlla che un campo obbligatorio contenga dati; i dati possono essere di qualsiasi tipo.
Indirizzo e-mail
Controlla che il campo contenga un simbolo @.
Numero
Controlla che il campo contenga solo caratteri numerici.
Numeri da
Controlla che il campo contenga un numero in un intervallo specifico.
Se stai convalidando più campi quando l'utente invia il modulo, l'evento onSubmit appare automaticamente nel menu Eventi.
Entrambi gli eventi attivano il comportamento Convalida modulo quando l'utente si allontana dal campo.La differenza è che onBlur si verifica indipendentemente dal fatto che l'utente abbia digitato nel campo o meno, e onChange si verifica solo se l'utente ha modificato i contenuti del campo. L'evento onBlur è preferibile se il campo è obbligatorio.
Altri contenuti simili
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.