JQuery einbinden
Zunächst benötigen Sie die jQuery Library. Anschließend wird diese in Ihre Webseite eingebunden:
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
Button
Jetzt wird die Grundfunktion des Buttons implementiert.
<script type="text/javascript"> $(document).ready(function(){ $('#button').click(function(){ if ($(this).text()=="aktivieren") { $(this).text("deaktivieren"); // Weitere Befehle, wenn Button aktiv } else { $(this).text("aktivieren"); // Weitere Befehle, wenn Button inaktiv } }); }); </script>
Der aktuelle Zustand des Buttons wird damit durch dessen Inhalt bestimmt. Ist der Inhalt des Buttons "aktivieren", so ist die vom Button ausgelöste Funktion deaktiviert. Daraus folgt auch, dass die Funktion aktiviert ist, wenn der Button auf deaktivieren steht.
Natürlich fehlt jetzt noch der HTML Teil des ganzen. Idealerweise bindet man den JavaScript Teil im <head> Bereich ein.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE"> <head> <title>Interaktive Buttons mit jQuery</title> </head> <body> <div id="button">aktivieren</div> </body> </html>
Natürlich kann man zusätzlich beim Hovern die Farbe des Buttons ändern.
<script type="text/javascript"> $(document).ready(function(){ $('#button').click(function(){ if ($(this).text()=="aktivieren") { $(this).text("deaktivieren"); // Weitere Befehle, wenn Button aktiv } else { $(this).text("aktivieren"); // Weitere Befehle, wenn Button inaktiv } }); $('#button').hover(function(){ // Maus auf Button -> Farbe ändern $(this).css('background-color', '#ff0000'); }, function(){ // Maus nicht mehr auf Button -> Farbe zurücksetzen $(this).css('background-color', '#454545'); }); }); </script>
Fazit
Dank jQuery ist es sehr einfach, verschiedene Elemente zu manipulieren. Dabei ist kein allzu großes JavaScript Vorwissen erforderlich.
Quellen: JQuery Logo
Ähnliche Artikel
Suchen
Hinterlasse einen Kommentar