|
|
Trascina livello
L'azione Trascina livello permette ai visitatori di trascinare un livello e può essere quindi usata per creare puzzle, dispositivi di scorrimento e altri elementi mobili nell'interfaccia.
È possibile specificare la direzione in cui il visitatore può trascinare il livello (in orizzontale, in verticale o in qualunque direzione), la destinazione di rilascio, la distanza minima in pixel per cui il livello viene calamitato alla destinazione, l'azione che deve essere eseguita quando il livello raggiunge la destinazione e altre opzioni ancora.
Poiché il livello può essere trascinato solo dopo che è stata richiamata l'azione Trascina livello, accertarsi che l'evento che attiva l'azione si verifichi prima del momento in cui il visitatore cerca di trascinare il livello. È opportuno applicare l'azione Trascina livello all'oggetto body (con l'evento onLoad), ma è possibile applicarla anche ad un collegamento che occupa l'intero livello (ad esempio, un collegamento attorno ad un'immagine) usando l'evento onMouseOver.
Per usare l'azione Trascina livello:
| 1 |
Scegliere Inserisci > Livello o cliccare sul pulsante Livello del pannello Oggetti e tracciare un livello nella vista Struttura della finestra del documento. |
| 2 |
Selezionare il tag body facendo clic su <body> nel selettore di tag situato nella parte inferiore della finestra del documento. |
| 3 |
Aprire il pannello Comportamenti. |
| 4 |
Fare clic sul pulsante più (+) e scegliere Trascina livello dal menu a comparsa Azioni. |
|
Se l'opzione Trascina livello non è disponibile, probabilmente è stato selezionato un livello. Poiché i livelli non accettano gli eventi in entrambi i browser 4.0, è necessario scegliere un oggetto differente, ad esempio il tag body o un collegamento (tag a), o impostare il browser di destinazione su IE 4.0 nel menu a comparsa Mostra eventi per. |
| 5 |
Selezionare il livello che si vuole trascinare dal menu a comparsa Livello. |
| 6 |
Selezionare Con limitazioni o Senza limitazioni dal menu a comparsa Spostamento. |
|
L'opzione Senza limitazioni è indicata per i puzzle e gli altri giochi che usano il trascinamento della selezione. Per i dispositivi di scorrimento e gli oggetti mobili come cassettiere, tende e veneziane, scegliere lo spostamento con limitazioni. |
| 7 |
Se si seleziona l'opzione Con limitazioni, inserire un valore in pixel nei campi Sopra, Sotto, Sinistra e Destra. |
|
Questi valori si riferiscono alla posizione iniziale del livello. Per limitare lo spostamento ad un'area rettangolare, inserire un valore positivo in tutti i campi. Per consentire solo uno spostamento verticale, inserire un valore positivo nei campi Sopra e Sotto e il valore 0 nei campi Sinistra e Destra. Per consentire solo uno spostamento orizzontale, inserire un valore positivo nei campi Sinistra e Destra e il valore 0 nei campi Sopra e Sotto. |
| 8 |
Specificare i valori in pixel della destinazione di rilascio nei campi Sinistra e Sopra. |
|
La destinazione di rilascio è il punto in cui si vuole che il visitatore trascini il livello. Il livello raggiunge la destinazione di rilascio quando la sua coordinata sinistra e la sua coordinata superiore corrispondono ai valori inseriti nei campi Sinistra e Sopra. Questi valori si riferiscono all'angolo superiore sinistro della finestra del browser. Per impostare in modo automatico questi campi sulla posizione corrente del livello, cliccare su Ottieni posizione corrente. |
| 9 |
Inserire un valore in pixel nel campo Calamita se entro per specificare la distanza a cui il livello deve essere calamitato alla destinazione di rilascio. |
|
I valori più elevati facilitano l'individuazione della destinazione di rilascio da parte del visitatore. |
| 10 |
Per gli oggetti semplici è sufficiente impostare queste opzioni. Se si vuole definire la maniglia di trascinamento del livello, seguire lo spostamento del livello durante il trascinamento e attivare un'azione al momento del rilascio, cliccare sulla scheda Avanzato. |
| 11 |
Per specificare che il visitatore deve cliccare su un'area specifica del livello per poterlo trascinare, scegliere Area dentro il livello dal menu a comparsa Maniglia di trascinamento e specificare le coordinate sinistra e superiore e l'altezza e la larghezza della maniglia di trascinamento. |
|
Questa opzione è utile quando l'immagine presente nel livello contiene un elemento normalmente associato al trascinamento, come una barra del titolo o una maniglia. Per fare in modo che il visitatore possa cliccare in un punto qualunque del livello per trascinarlo, lasciare vuota questa opzione. |
| 12 |
Se si vuole, scegliere una delle successivi opzioni per Durante il trascinamento: |
 |
Selezionare Porta il livello in primo piano se si vuole visualizzare il livello sopra tutti gli altri oggetti durante il trascinamento. Se si seleziona questa opzione, specificare se il livello deve rimanere in primo piano o tornare alla posizione originale dopo il trascinamento. |
|
Inserire un codice JavaScript o il nome di una funzione (ad esempio, monitorLayer()) nel campo Chiama JavaScript per eseguire ripetutamente il codice o la funzione durante il trascinamento del livello. Ad esempio, è possibile creare una funzione che controlli le coordinate del livello e visualizzi suggerimenti come "ci sei quasi" o "sei ancora lontano dalla destinazione di rilascio" in un campo di testo. Vedere Informazioni sui livelli trascinabili. |
| 13 |
Inserire un codice JavaScript o il nome di una funzione (ad esempio evaluateLayerPos()) nel secondo campo Chiama JavaScript per eseguire il codice o la funzione quando il livello viene rilasciato. Per fare in modo che l'esecuzione venga avviata solo se il livello ha raggiunto la destinazione di rilascio, scegliere l'opzione Solo se calamitato. |
| 14 |
Fare clic su OK. |
| 15 |
Verificare che l'evento default corrisponda a quello vuoleto. |
|
In caso contrario, scegliere un altro evento dal menu a comparsa. Se il menu non contiene gli eventi vuoleti, modificare il browser di destinazione nel menu a comparsa Mostra eventi per. Tenere presente che i browser 3.0 non supportano i livelli. |
 |
|
Nota: non è possibile applicare l'azione Trascina livello ad un oggetto a cui sono associati gli eventi onMouseDown e onClick.
Informazioni sui livelli trascinabili
Quando si applica l'azione Trascina livello ad un oggetto, Dreamweaver inserisce la funzione MM_dragLayer() nella sezione head del documento. Oltre a contrassegnare il livello come trascinabile, questa funzione definisce tre proprietà (MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED) che possono essere usate nelle funzioni JavaScript personalizzate per determinare la posizione orizzontale relativa e la posizione verticale relativa del livello e per stabilire se il livello ha raggiunto la destinazione di rilascio.
Nota: le informazioni fornite di seguito sono indirizzate esclusivamente ai programmatori JavaScript esperti.
Ad esempio, la funzione riportata di seguito visualizza il valore della proprietà MM_UPDOWN (la posizione verticale corrente del livello) in un campo di modulo chiamato curPosField. I campi di modulo sono utili per la visualizzazione delle informazioni aggiornate di continuo perché sono dinamici, ovvero è possibile modificarne il contenuto al termine del caricamento della pagina sia in Mozilla Firefox che in Microsoft Internet Explorer.
function getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Invece di visualizzare il valore di MM_UPDOWN o MM_LEFTRIGHT in un campo di modulo, è possibile creare una funzione che visualizzi un messaggio variabile a seconda della distanza dall'area di rilascio o richiamare un'altra funzione che mostri o nasconda un determinato livello a seconda del valore. Le possibilità di utilizzo dei valori di MM_UPDOWN e MM_LEFTRIGHT dipendono solo dall'immaginazione e dalla conoscenza di JavaScript.
La lettura della proprietà MM_SNAPPED è utile soprattutto quando sulla pagina sono presenti più livelli e il visitatore può passare alla pagina o all'attività successiva solo quando tutti i livelli hanno raggiunto la propria destinazione. Ad esempio, è possibile creare una funzione che conti il numero di livelli in cui la proprietà MM_SNAPPED è associata al valore true e richiamare questa funzione ogni volta che si rilascia un livello. Quando il conteggio raggiunge il numero vuoleto, è possibile inviare il visitatore alla pagina successiva o visualizzare un messaggio di congratulazioni.
Se l'azione Trascina livello è stata applicata ai collegamenti di più livelli usando l'evento onMouseOver, è necessario apportare una piccola modifica alla funzione MM_dragLayer() per impedire che la proprietà MM_SNAPPED di un livello calamitato venga reimpostata su false quando si passa il cursore su questo livello. Questa situazione può verificarsi, ad esempio, se l'azione Trascina livello è stata usata per creare un puzzle. Infatti, in questo caso è molto probabile che il visitatore passi sopra i pezzi calamitati mentre posiziona i pezzi mancanti. La funzione MM_dragLayer() non impedisce questo comportamento perché in alcuni casi può rivelarsi utile, ad esempio se si vogliono impostare più destinazioni di rilascio per lo stesso livello.
Per impedire la reimpostazione dei livelli calamitati:
| 1 |
Creare una copia di backup del documento prima di apportare modifiche al codice. L'operazione di copiatura può essere eseguita nella finestra Sito di Dreamweaver o in Scelta risorse/Esplora risorse (Windows) o nel Finder (Macintosh). |
| 2 |
Scegliere Modifica > Trova. |
| 3 |
Selezionare Origine HTML dal menu a comparsa Cerca. |
| 4 |
Digitare (!curDrag) nel campo di testo adiacente. |
| 5 |
Fare clic su Successivo. |
|
Se viene visualizzata una richiesta di conferma per continuare la ricerca dall'inizio del documento, cliccare su Sì. Dreamweaver troverà la seguente istruzione: |
|
if (!curDrag) return false; |
| 6 |
Chiudere la finestra di dialogo Cerca e modificare l'istruzione nel seguente modo nella vista Codice della finestra del documento o nella finestra di ispezione Codice: |
|
if (!curDrag || curDrag.MM_SNAPPED != null) return false; |
|
Le due barrette verticali (||) significano "o" e curDrag è una variabile che rappresenta il livello che viene contrassegnato come trascinabile. Il significato di questa istruzione è il seguente: "se curDrag non è un oggetto o ha già un valore MM_SNAPPED, non eseguire il resto della funzione". |
|
|
|
