Guida utente Annulla

Usare effetti jQuery in Dreamweaver

 

 

Progettate siti web accattivanti utilizzando effetti jQuery interessanti. L'integrazione di Dreamweaver con jQuery consente di includere effetti come cursori senza dover scrivere alcun codice.

Aggiungere effetti jQuery

  1. Nella vista Progettazione o Codice del documento di Dreamweaver, selezionate l'elemento a cui volete applicare un effetto jQuery.

  2. Selezionate Finestre > Comportamenti per aprire il pannello Comportamenti.

  3. Fate clic sull'icona Più, poi su Effetti, quindi fate clic sull'effetto richiesto.

    Aggiunta di effetti jQuery
    Aggiunta di effetti jQuery

    Viene visualizzato il pannello di personalizzazione con le impostazioni disponibili per l'effetto selezionato.

  4. Specificate le impostazioni richieste, ad esempio l'elemento di destinazione al quale applicare l'effetto e la durata dell'effetto.

    L'elemento di destinazione può essere lo stesso elementi che avete selezionato inizialmente oppure un elemento diverso della pagina. Ad esempio, se volete consentire agli utenti di fare clic sull'elemento A per nascondere o visualizzare l'elemento B, l'elementi di destinazione è B.

  5. Per aggiungere più effetti jQuery, ripetete i passaggi precedenti.

    Quando scegliete più effetti, Dreamweaver li applica nell'ordine in cui sono visualizzati nel pannello Comportamenti. Per modificare l'ordine degli effetti, usate i tasti freccia presenti nella parte superiore del pannello.

Dreamweaver inserisce automaticamente il codice necessario nel documento. Ad esempio, se avete selezionato l'effetto Dissolvenza, viene inserito il codice seguente:

  • I riferimenti ai file esterni per i file dipendenti necessari per il funzionamento degli effetti jQuery:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
  • Il codice seguente viene applicato all'elemento nel tag body:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
  • Viene aggiunto un tag script con il codice seguente:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Effetti jQuery basati su eventi

Quando applicate un effetto jQuery, questo viene assegnato all'evento onClick per impostazione predefinita. Potete modificare l'evento di attivazione dell'effetto nel pannello Comportamenti.

  1. Selezionate l'elemento di pagina richiesto.

  2. Nel pannello Finestre > Comportamenti, fate clic sull' icona Mostra eventi impostati.

  3. Fate clic sulla riga corrispondente all'effetto attualmente applicato. Notate come la prima colonna diventa un elenco a discesa con un elenco di eventi da cui potete scegliere.

  4. Selezionate l'evento richiesto.

Rimuovere effetti jQuery

  1. Selezionate l'elemento di pagina richiesto.

    Il pannello Comportamenti elenca tutti gli effetti attualmente applicati all'elemento di pagina selezionato.

  2. Fate clic sull'effetto che desiderate eliminare, quindi fate clic sull'icona Elimina.

Ottieni supporto in modo più facile e veloce

Nuovo utente?