In diesem kleinen Tutorial zeige ich euch, wie ihr einen simplen Fadeout Effekt mit jQuery erzeugen könnt und diesen für Nachrichten Boxen in Css nutzt.
Zuerst erstellen wir eine blanke, neue .html Datei (kein bestimmter Name).
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> ... </head>
<body> ... </body>
</html>
Nun binden wir die aktuelle Version von jQuery in den <head> HIER </head> Tag ein.
Ich nutze den schnellen und unkomplizierten Weg und binde jQuery via Google ein.
Das HTML-Dokument sollte jetzt so aussehen:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
</head>
<body> ... </body>
</html>
Jetzt wollen wir anfangen unsere Css Datei zu schreiben, die unseren Boxen ein wunderbar einfaches Aussehen verleihen wird.
Dies wird unsere Css-Datei.
Wir nennen sie stil.css und speichern sie im Ordner Css.
Code:
p.notice {
position:relative;
display:block;
background: #fffcd3 url(../Icons/icon_notice.gif) no-repeat 10px 11px;
border: 1px solid #c2beb1;
padding:10px 10px 10px 40px;
color: #74655f;
font-size: 13px;
}
p.success {
position:relative;
display:block;
background: #e5f993 url(../Icons/icon_success.gif) no-repeat 10px 11px;
border: 1px solid #9bac55;
padding:10px 10px 10px 40px;
color: #688006;
font-size: 13px;
}
p.info {
position:relative;
display:block;
background: #d4ebfa url(../Icons/icon_info.gif) no-repeat 10px 11px;
border: 1px solid #90b1c7;
padding:10px 10px 10px 40px;
color: #4b6bab;
font-size: 13px;
}
p.error {
position:relative;
display:block;
background: #f6b9b9 url(../Icons/icon_error.gif) no-repeat 10px 11px;
border: 1px solid #e18484;
padding:10px 10px 10px 40px;
color: #c32727;
font-size: 13px;
}
p.error span, p.info span, p.notice span, p.success span {
position: absolute;
right:7px;
top:7px;
font-weight:bold;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
display:block;
padding:5px;
cursor:pointer;
}
Diese Css-Datei binden wir dann in den <head></head> Tag des HTML-Dokuments ein.
Code:
<head><link href="Css/stil.css" rel="stylesheet" type="text/css" media="all" />
</head>
Um unsere Boxen danach auch richtig anzeigen zu lassen, reichen folgende Codes in unserem HTML-Dokument.
Code:
<p class="notice">Notiz oder fehlerhafte Nachricht<span>X</span></p>
<p class="success">Erfolgreiche Nachricht<span>X</span></p>
<p class="info">Informative Nachricht<span>X</span></p>
<p class="error">Kritische Nachricht<span>X</span></p>
Dieser Code muss im <body> </body> Tag des HTML-Dokument eingefügt werden. Das HTML-Dokument sieht jetzt so aus:
Code:
<!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">
<head>
<link href="Css/stil.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
</head>
<body>
<p class="notice">Notiz oder fehlerhafte Nachricht<span>X</span></p>
<p class="success">Erfolgreiche Nachricht<span>X</span></p>
<p class="info">Informative Nachricht<span>X</span></p>
<p class="error">Kritische Nachricht<span>X</span></p>
</body>
</html>
Nun werden uns die Boxen angezeigt, aber ein Klick auf das X lässt diese nicht verschwinden. Was nun ?
Ganz einfach: Uns fehlt diese Funktion. Diese ist im Download enthalten ;)
Das fertige HTML-Dokument sieht dann so aus, nachdem wir auch die Javascript Datei eingebunden haben:
Code:
<!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">
<head>
<link href="Css/stil.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Js/effekte.js" type="text/javascript"></script>
</head>
<body>
<p class="notice">Notiz oder fehlerhafte Nachricht<span>X</span></p>
<p class="success">Erfolgreiche Nachricht<span>X</span></p>
<p class="info">Informative Nachricht<span>X</span></p>
<p class="error">Kritische Nachricht<span>X</span></p>
</body>
</html>
Die Grafiken findet ihr im herunterladbaren Archiv.
Viel Spaß mit diesen Boxen.
Fragen bitte hier im Thema und nicht via Private Nachricht.
Download.
Der Eintrag wurde am 04.01.11 07:57 Uhr von goeran geändert.
Facebook
Twitter
Registrieren
Login
Offtopic
Forum
Mitglieder
Newsletter
Fotos
Geburtstage
