Forum / Tutorials / [CSS] Erweiterte Nachrichten Boxen Beitrag schreiben
Goeran_E
Administrator
- 06.06.10 21:09 Uhr
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. Wir schreiben sie also !

Code:
$(function(){
$("p.notice span").click(function() { // Immer wenn das X auf einer der Boxen geklickt wird, passiert folgendes
$('p.notice').slideUp('slow'); // Den ganzen Paragraph ausblenden
$('p.notice span').hide('fast'); // Und das X verstecken
});
$("p.info span").click(function() {
$('p.info').slideUp('slow');
$('p.info span').hide('fast');
});
$("p.success span").click(function() {
$('p.success').slideUp('slow');
$('p.success span').hide('fast');
});
$("p.error span").click(function() {
$('p.error').slideUp('slow');
$('p.error span').hide('fast');
});
});



Wir speichern diese Javascript Datei mit dem Namen effekte.js in einem Ordner namens Js.

Diese Javascript Funktion rüstet den <p></p> und <span></span> Tag mit einer Funktion aus. Diese lässt mit einem Klick auf ein X das in einem <span></span> Tag steht, also <span>X</span>, die Box(en) verschwiden. Simple as hell !

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 06.06.10 22:10 Uhr von Goeran_E geändert.

No one cares about God. They all just wanna roll with his kid Jesus.
Patrick_W
Administrator
- 06.06.10 22:54 Uhr
Toller Beitrag.
Goeran_E
Administrator
- 07.06.10 01:29 Uhr
Vielen dank !

Lasst es mich wissen, wenn ihr sie benutzt

No one cares about God. They all just wanna roll with his kid Jesus.
derblubber
Neuling
- 07.06.10 23:32 Uhr
Joa die dinger sind der hammer
Wollte nur sagen das ich sie benutze!

Aloa
Goeran_E
Administrator
- 08.06.10 17:30 Uhr
Vielen dank. Wenn du mir auch sagen könntest wo ? Sonst kann ich es ja schlecht sehen

No one cares about God. They all just wanna roll with his kid Jesus.
mafiamix
Ehrenmitglied
- 09.06.10 19:44 Uhr
Ich würde mich auf keine Seite verlassen - auch wenn es Google ist. Außer es ist sowieso für keine professionelle Seite.
Goeran_E
Administrator
- 09.06.10 21:24 Uhr
Wie ist das gemeint ? Ich verstehe deine Aussage bezüglich des Beitrags nicht.

Was meinst du damit, das man sich auf keine Seiten "verlassen" kann ?

No one cares about God. They all just wanna roll with his kid Jesus.
iSn0w
Ehrenmitglied
- 09.06.10 22:27 Uhr
Er meint damit das du jQuery aus Google's API ladest

Zitat von Abraham Lincoln:
„ Man hilft den Menschen nicht, wenn man für sie tut, was sie selbst tun können. “
— Abraham Lincoln
Goeran_E
Administrator
- 10.06.10 21:40 Uhr
Viele erfahrene Benutzer benutzen diese Methode.Alle Scripte benötigen weniger Bandbreite. Das heist: Weniger Ladezeit des Benutzers, da "alle" Scripte in Googles Cache fliesen.

Und keine Angst: Seit der Eröffnung der API wurde noch kein Virus von Google via Javascript auf irgendwas übertragen

No one cares about God. They all just wanna roll with his kid Jesus.
mafiamix
Ehrenmitglied
- 12.06.10 17:13 Uhr
Zitat von Goeran_E:
Viele erfahrene Benutzer benutzen diese Methode.Alle Scripte benötigen weniger Bandbreite. Das heist: Weniger Ladezeit des Benutzers, da "alle" Scripte in Googles Cache fliesen.

Und keine Angst: Seit der Eröffnung der API wurde noch kein Virus von Google via Javascript auf irgendwas übertragen


Genau das meine ich, dass das JS bei Google liegt. Und ich hab auch nie behauptet, dass ich Angst vor einem Virus o. Ä. hätte (eine .exe-Datei lässt sich mittels JS sowieso nicht ausführen und Exploits in JS gibts momentan nicht), aber hast du schon mal eine professionelle und große Seite gesehen, wie z. B. Spiegel online o. Ä., die ein Script einer anderen Seite eingebunden haben?
Mit Sicherheit nicht und ich bin der Meinung, dass sowas auch einen eher schlechten Eindruck von wegen Inkompetenz macht, da dies wohl wiederspiegelt, dass man wahrscheinlich selbst nicht in der Lage wäre, so etwas selbst zu schreiben. Deshalb lasse ich sowas lieber und verzichte dafür auf ein paar gute Effekte, schreib dafür aber meine eigenen JS-Dateien.

12 Beiträge | Seite 1 von 2 | 1 2 Beitrag schreiben
©2010 Itschi.Net