Användarhandbok Avbryt

Använd jQuery-effekter i Dreamweaver

 

 

Designa intressanta webbplatser med hjälp av jQuery-effekter. Med Dreamweavers integration med jQuery kan du använda effekter som reglage utan att behöva skriva någon kod.

Lägga till jQuery-effekter

  1. Välj det element du vill använda en jQuery-effekt på i design- eller kodvyn i ditt Dreamweaver-dokument.

  2. Välj Fönster > Beteenden. Beteenden-panelen öppnas.

  3. Klicka på plusikonen (+), klicka på Effekter och klicka sedan på önskad effekt.

    Lägga till jQuery-effekter
    Lägga till jQuery-effekter

    Anpassningspanelen med inställningarna för den valda effekten visas.

  4. Gör dina inställningar, till exempel vilket målelement effekten ska användas på och effektens varaktighet.

    Målelementet kan vara det element du valde i början eller ett annat element på sidan. Om du till exempel vill att användarna ska klicka på element A för att dölja eller visa ett element B är målelementet element B.

  5. Om du vill lägga till flera jQuery-effekter upprepar du stegen ovan.

    När du väljer flera effekter använder Dreamweaver effekterna i den ordning de visas i på Beteende-panelen. Om du vill ändra effekternas inbördes ordning använder du piltangenterna högst upp på panelen.

Dreamweaver infogar automatiskt relevant kod i ditt dokument. Om du till exempel har valt effekten Tona infogas följande kod:

  • Externa filreferenser för de beroende filerna som krävs för att jQuery-effekterna ska fungera:
<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>
  • Följande kod används på elementet i body-taggen:
<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>
  • En Script-tagg läggs till tillsammans med följande kod:
<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>

Händelsebaserade jQuery-effekter

När du använder en jQuery-effekt tilldelas den som standard till onClick-händelsen. Du kan ändra den utlösande händelsen för effekten via Beteenden-panelen.

  1. Välj önskat sidelement.

  2. I Fönster > Beteenden-panelen klickar du på ikonen Visa uppsatta händelser.

  3. Klicka på raden som motsvarar effekten som används för närvarande. Observera att den första kolumnen omvandlas till en listruta med en lista över händelser som du kan välja från.

  4. Klicka på önskad händelse.

Ta bort jQuery-effekter

  1. Välj önskat sidelement.

    I Beteenden-panelen visas en lista med alla effekter som för närvarande används på det valda sidelementet.

  2. Klicka på effekten du vill ta bort och klicka sedan på ikonen Ta bort.

Få hjälp snabbare och enklare

Ny användare?