Benutzerhandbuch Abbrechen

jQuery-Effekte in Dreamweaver verwenden

Suchen

Zuletzt aktualisiert am 1. Mai 2021

Entwerfen Sie attraktive Websites unter Verwendung raffinierter jQuery-Effekte. Dank der Integration von jQuery in Dreamweaver können Sie Effekte wie Schieberegler verwenden, ohne Code schreiben zu müssen.

jQuery-Effekte hinzufügen

Wählen Sie in der Entwurfs- oder Codeansicht Ihres Dreamweaver-Dokuments das Element aus, auf das Sie einen jQuery Effekt anwenden wollen.
Wählen Sie „Fenster“ > „Verhalten“, um das Bedienfeld „Verhalten“ zu öffnen.
Klicken Sie auf das Pluszeichen, dann auf „Effekte“ und schließlich auf den erforderlichen Effekt.

Hinzufügen von jQuery-Effekten

Ein Bedienfeld mit spezifischen Einstellungen für den ausgewählten Effekt wird angezeigt.
Legen Sie die Einstellungen fest, etwa ein anderes Zielelement, auf das der Effekt angewendet werden soll, oder die Dauer des Effekts.

Als Zielelement kann das ursprünglich ausgewählte Element dienen oder auch ein anderes Element auf der Seite. Angenommen, Sie möchten erreichen, dass beim Klicken auf ein Element A ein Element B ein- oder ausgeblendet wird, dann ist B das Zielelement.
Um mehrere jQuery-Effekte hinzuzufügen, wiederholen Sie die obigen Schritte.

Wenn Sie mehrere Effekte auswählen, wendet Dreamweaver die Effekte in der Reihenfolge an, in der sie im Bedienfeld „Verhalten“ angezeigt werden. Um die Reihenfolge der Effekte zu ändern, verwenden Sie die Pfeiltasten oben im Bedienfeld.

Dreamweaver fügt automatisch den entsprechenden Code in das Dokument ein. Wenn Sie beispielsweise den Effekt „fade“ ausgewählt haben, wird der folgende Code eingefügt:

Verweise auf externe Dateien für abhängige Dateien, die für ein Funktionieren des jQuery-Effekts erforderlich sind:

<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>

Der folgende Code wird auf das Element im body-Tag angewendet:

<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>

Ein script-Tag wird zusammen mit dem folgenden Code eingefügt:

<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) { obj[method](effect, {}, speed); }</script>

Ereignisbasierte jQuery-Effekte

Wenn Sie einen jQuery Effekt anwenden, wird er standardmäßig dem Ereignis „onClick“ zugewiesen. Im Bedienfeld „Verhalten“ können Sie jedoch das auslösende Ereignis für einen Effekt ändern.

Wählen Sie das erforderliche Seitenelement aus.
Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Symbol „Festgelegte Ereignisse zeigen“.
Klicken Sie auf die Zeile, die dem aktuell angewendeten Effekt entspricht. Wenn Sie in die linke Spalte klicken, erscheint eine Dropdownliste mit den verfügbaren Ereignissen.
Klicken Sie gegebenenfalls auf den Pfeil für die Dropdownliste und dann auf das erforderliche Ereignis.

jQuery-Effekte entfernen

Wählen Sie das erforderliche Seitenelement aus.

Das Bedienfeld „Verhalten“ listet alle Effekte auf, die auf das ausgewählte Seitenelement angewendet wurden.
Klicken Sie den zu löschenden Effekt und dann auf das Symbol „Löschen“.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?