Passwort vergessen?

Benutzername vergessen?

Alles rund um IT, Web und Entwicklung.
Von Nutzern für Nutzer.

Interaktive Buttons mit jQuery



In diesem Artikel wird beschrieben, wie man mit Hilfe von jQuery Buttons erstellt, welche beim Klicken bzw. Hovern Ihren Inhalt ändern. Der Button kann also als universeller und interaktiver Schalter verwendet werden.





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

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit
DataCloud

Hinterlasse einen Kommentar

Ich habe die Datenschutzerklärung zur Kenntnis genommen und stimme einer elektronischen Speicherung und Verarbeitung meiner eingegebenen Daten zur Beantwortung der Anfrage zu.