Forgot your password?

Forgot your username?

All about IT, Web and Development.
By users for users.

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

Leave a comment

I have read the privacy policy and agree to electronically store and process my input data to answer the request.