Ultimele subiecte
» [All Version] Social Link/IconsScris de Jean01Crv 13/10/2014, 12:52 pm
» (pHpBB3) Legenda : Sistem Nou
Scris de Jean01Crv 13/10/2014, 12:49 pm
» Imagine la Statistici & Cine este Conectat ? [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:44 pm
» Statistici - Sistem Nou [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:20 pm
» [Prezentare]Chozen
Scris de valyd1971 16/5/2014, 12:54 am
Vizitator
Cine este conectat?
În total sunt 2 utilizatori conectați: 0 Înregistrați, 0 Invizibil și 2 Vizitatori :: 1 Motor de căutareNici unul
Recordul de utilizatori conectați a fost de 105, 21/9/2024, 9:49 am
CSS css3/jquery notification boxes Tutorial
Pagina 1 din 1
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
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
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.
Oricum, să ne întoarcem la caseta de notificare nostru.
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!
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>
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;
}
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>
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!
Site Admin- Client
Subiecte similare
» Create a Ribbon DropDown Menu with CSS3 and jQuery
» tutorial Bare verticala foarte eleganta jQuery
» How to Create Social Media Icons with CSS3
» » Flipping Content Tabs Using jQuery
» Cum propuneti un tutorial
» tutorial Bare verticala foarte eleganta jQuery
» How to Create Social Media Icons with CSS3
» » Flipping Content Tabs Using jQuery
» Cum propuneti un tutorial
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum