CSS css3/jquery notification boxes Tutorial

Ieri, am fost a face ceva pentru un client. A fost nevoie de două cutii de notificare, de acceptare şi respingere.

Aşa că m-am gandit de ce nu au un profesionist tutorial notificare cutii cu voi!

iniţială de planificare

Primul şi cel mai important lucru pe care aveţi nevoie pentru a face o cutie de notificare atractive sunt culorile şi imaginile utilizate.

În termeni de bază,

Galben-verde = Succes

Lumina roşie = Eroare

Pale galben = Alarma

Blue Sky = Alte informaţii

Step 1 : HTML

Lets start by placing simple HTML content to our webpage

Cod:

</pre>
<div class="green">Success!
 Lorem ipsum dolor sit amet, consectetur.
<div class="cross">x</div>
</div>
<pre>

Aceasta este structura de bază a unei casete de notificare, fără CSS sau javasript.
Aici, am folosit verde de clasă, pentru a seta fundal de notificare de tip verzui.
O altă clasă, cruce, este, de asemenea, folosit aici. Acesta este destinat pentru închiderea o cutie de notificare (se va discuta despre acest lucru atunci când vine secţiune jQuery)
Step 2 : CSS

Cod:

span{
color:#444;
margin-right:10px;
}
 
.green{
background:#e8f1c4 url(images/success.png) no-repeat left;
background:url(images/success.png) no-repeat left, -moz-linear-gradient(top, #eff7dc 5%, #e4efb6 6%, #e8f1c4 21%, #eaf7ca 50%, #e8f1c4 93%, #d6e0b8 100%); /* FF3.6+ */
background:url(images/success.png) no-repeat left, -webkit-gradient(linear, left top, left bottom, color-stop(5%,#eff7dc), color-stop(6%,#e4efb6), color-stop(21%,#e8f1c4), color-stop(50%,#eaf7ca), color-stop(93%,#e8f1c4), color-stop(100%,#d6e0b8)); /* Chrome,Safari4+ */
background:url(images/success.png) no-repeat left, -webkit-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Chrome10+,Safari5.1+ */
background:url(images/success.png) no-repeat left, -o-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Opera11.10+ */
background:url(images/success.png) no-repeat left, -ms-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff7dc', endColorstr='#d6e0b8',GradientType=0 ); /* IE6-9 */
background:url(images/success.png) no-repeat left, linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* W3C */
border:1px solid #cad883;
padding:10px 0px 10px 30px;
margin:10px 0;
color:#4e871c;
font-weight:700;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
width:400px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
 
.cross{
float:right;
margin:5px 5px 0 0;
font-size:12px;
line-height:10px;
font-variant:small-caps;
font-weight:bolder;
cursor:pointer;
 
}
 
.cross:hover{
color:#000;
}

Aceasta este coloana vertebrală a cutii de notificare noastre, CSS3 este destul de puternic pentru a oferi pante, marginile curbate de frontieră, umbre. Acestea sunt ingredientele principale ale orice cutie de bomboane-ochi de preaviz!

Permite înţelege codul,
Vom începe prin a verde clasa. Am inclus CSS3 pantă, împreună cu o imagine de fundal. În acest fel am redus utilizarea inutilă a tag-uri suplimentare img sau div.

Un alt lucru important de observat este că, am folosit mai multe pante, în loc de un simplu două culori se estompeze. Acest lucru poate fi uşor de înţeles în codul de mai sus.

Ok, deci ne-am aranjat în container pentru notificare, dar trebuie să dăm, de asemenea, un buton pentru a închide! În caz contrar, se va arata foarte prost de a avea un succes şi o notificare de eroare pentru un acelaşi obiect.

Pentru aceasta am folosit un buton "X" (ASCII 088), pentru opţiunea de aproape.

Puteţi închide caseta de notificare în mod automat sau u poate cere utilizatorului să-l închidă. Eu fac din urmă.

Am folosit clasa de cruce pentru a stiliza "X".

Up-pana acum am facut o cutie de notificare statică.
Pasul 3: jQuery

Aşa cum sa menţionat mai devreme, noi folosim doar javascript pentru a ascunde casetele de notificare. Acest efect poate fi, de asemenea, face cu ajutorul CSS3 tranziţii.

În primul rând trebuie să includă jQuery să vă fişier.

Cod:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Este foarte important să se specifice acest cod, în altă parte funcţiile noastre jQuery nu va funcţiona. Am menţionat acest lucru, deoarece special incepatorii ca mine de multe ori au tendinţa de a uita aceste linii şi după ore de headbanging cu JS mea funcţiona aflu această eroare urâtă şi umilitoare!

Oricum, să ne întoarcem la caseta de notificare nostru.

Cod:

$(document).ready(function(){
    $(".cross").click(function(){
    $(this).parent("div").fadeOut('slow');
    })
});

O funcţie simplă, în cazul în care atunci când faceţi clic pe cruce caseta de notificare se închide.

Acesta este modul în care funcţionează.
Atunci când un utilizator face clic pe "cruce". De clasă, de control se mută la funcţia de interior.
Eu am folosit "această" funcţie, astfel încât să putem închide numai diviziunea mamă (care este "verde" în acest caz).

Pasul 4: Însumaţi
În mod similar, putem face toate casetele de notificare pentru alte culori, alte!