Tutorial zum Erstellen eines Kommentarfelds mit Emoticons mithilfe von HTML und CSS

HTML-Kommentarfeld mit Emoticons. Die Emoticons werden über JSON-Daten geladen und Sie können die Emoticons nach Ihren Wünschen ändern. Der Code dieses Kommentarfelds besteht aus HTML, CSS und JQ. Abbildung 1 zeigt den Originalzustand, Abbildung 2 die Liste der Emoticons, die erscheint, wenn Sie auf ein Emoticon klicken. Sie können nach Belieben ein oder mehrere Emoticons auswählen. Werfen wir einen Blick auf den Implementierungscode.

Abbildung 1

Abbildung 2

Implementierungscode:

HTML Quelltext:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< div Klasse = "Haupt" >
< div Klasse = "Eingabefeld" >
< Textbereich Klasse = "Eingabetext" > </ Textbereich >
< div Klasse = "faceDiv" > </div>
< div Klasse = "Input_Foot" > < Klasse = "imgBtn" href = "javascript:void(0);" > </ a > < a Klasse = " postBtn " > OK </a> </div>
</div>
</div>

CSS3-Code:

CSS- CodeInhalt in die Zwischenablage kopieren

.Eingabefeld {
Breite : 495px ;
Höhe : 160px ;
Rand : 1px solide #ccc ;
Übergang: Rand linear 0,2 s, Kastenschatten linear 0,5 s;
-moz-transition: Rand linear 0,2 s, -moz-box-shadow linear 0,5 s;
-webkit-transition: Rahmen linear 0,2 s, -webkit-box-shadow linear 0,5 s;
-moz- Rand -Radius: 5px ;
-webkit- Rahmen -Radius: 5px ;
Rahmen - Radius: 5px ;
Hintergrundfarbe : #fff ;
Überlauf : versteckt ;
Position : absolut ;
-moz-box-shadow: 0 0 5px #ccc ;
-webkit-box-shadow: 0 0 5px #ccc ;
Kastenschatten: 0 0 5px #ccc ;
}
.Input_Box>Textbereich {
Breite : 485px ;
Höhe : 111px ;
Polsterung : 5px ;
Umriss : keiner ;
Rand : 0px solide #fff ;
Größenänderung: keine ;
Schriftart : 13px "Microsoft YaHei" , Arial , Helvetica , serifenlos ;
-moz- Rand -Radius: 5px ;
-webkit- Rahmen -Radius: 5px ;
Rahmen - Radius: 5px ;
}
.Eingabe_Fuß {
Breite : 100 %;
Höhe : 35px ;
Rahmen oben : 1px solide #ccc ;
Hintergrundfarbe : #fff ;
-moz- Rahmen -Radius: 0 0 5px 5px ;
-webkit- Rahmen -Radius: 0 0 5px 5px ;
Rahmen - Radius: 0 0 5px 5px ;
Position : absolut ;
}
.imgBtn {
Schwimmer : links ;
Rand oben : 8px ;
Rand links : 10px ;
Hintergrundbild : URL (imgs.png);
Hintergrundwiederholung : keine Wiederholung ;
Hintergrundposition : 0 – 13px ;
Höhe : 18px ;
Breite : 20px ;
Cursor : Zeiger
}
.imgBtn:aktiv {
Rand oben : 9px ;
}
.imgBtn:hover {
Hintergrundposition : 0 – 31px
}
.postBtn {
float : rechts rechts ;
Schriftart : 13px "Microsoft YaHei" , Arial , Helvetica , serifenlos ;
Farbe : #808080 ;
Polsterung : 9px 20px 7px 20px ;
Rahmen links : 1px solide #ccc ;
Cursor : Zeiger ;
-moz- Rand -Radius: 0 0 5px 0;
-webkit- Rand -Radius: 0 0 5px 0;
Rahmen - Radius: 0 0 5px 0;
}
.postBtn:hover {
Farbe : #333 ;
Hintergrundfarbe : #efefef ;
}
.postBtn:aktiv {
Polsterung : 10px 20px 6px 20px ;
}
.faceDiv {
Breite : 500px ;
Höhe : 120px ;
Rahmen oben : 1px solide #ccc ;
Position : absolut ;
Hintergrundfarbe : #fff ;
-moz- Rahmen -Radius: 5px 5px 0 0;
-webkit- Rahmen -Radius: 5px 5px 0 0;
Rahmen - Radius: 5px 5px 0 0;
}
.faceDiv>img {
Rand : 1px solide #ccc ;
Schwimmer : links ;
Rand links : - 1px ;
Rand oben : – 1px ;
Position : relativ ;
Breite : 24px ;
Höhe : 24px ;
Polsterung : 3px 3px 3px 3px ;
Cursor : Zeiger ;
}
.faceDiv>img:hover {
Hintergrundfarbe : #efefef ;
}
.faceDiv>img:aktiv {
Polsterung : 4px 3px 2px 3px ;
}

Javascript-Code:

JavaScript CodeInhalt in die Zwischenablage kopieren

var ImgIputHandler = {
Gesichtspfad:[
{Gesichtsname: "Smile" , Gesichtspfad: "0_Smile.gif" },
{faceName: "Gesichtsname" , facePath: "1_Gesichtsname.gif" },
{Gesichtsname: "Farbe" , Gesichtspfad: "2_color.gif" },
{faceName: "Gesichtsname" , facePath: "3_Gesichtsname.gif" },
{Gesichtsname: "Deyi" , Gesichtspfad: "4_Deyi.gif" },
{Gesichtsname: "Tränen" , Gesichtspfad: "5_Tränen.gif" },
{faceName: "schüchtern" , facePath: "6_schüchtern.gif" },
{faceName: "Halt die Klappe" , facePath: "7_Halt die Klappe.gif" },
{Gesichtsname: "Großer Schrei" , Gesichtspfad: "9_Großer Schrei.gif" },
{Gesichtsname: "ungeschickt" , Gesichtspfad: "10_ungeschickt.gif" },
{Gesichtsname: "Wütend" , Gesichtspfad: "11_Wütend.gif" },
{Gesichtsname: "ungezogen" , Gesichtspfad: "12_ungezogen.gif" },
{faceName: "Gesichtsname" , facePath: "13_Gesichtsname.gif" },
{faceName: "Überrascht" , facePath: "14_Überrascht.gif" },
{Gesichtsname: "traurig" , Gesichtspfad: "15_traurig.gif" },
{Gesichtsname: "Cool" , Gesichtspfad: "16_Cool.gif" },
{faceName: "kalter Schweiß" , facePath: "17_kalter Schweiß.gif" },
{Gesichtsname: "Verrückt" , Gesichtspfad: "18_Verrückt.gif" },
{faceName: "Gesicht" ,facePath: "19_Gesicht.gif" },
{faceName: "Gesichtsname" , facePath: "20_Gesichtsname.gif" },
{Gesichtsname: "süß" , Gesichtspfad: "21_cute.gif" },
{faceName: "weiße Augen" , facePath: "22_weiße Augen.gif" },
{Gesichtsname: "Arrogant" , Gesichtspfad: "23_Arrogant.gif" },
{Gesichtsname: "Hungrig" , Gesichtspfad: "24_Hungry.gif" },
{faceName: "Gesicht" ,facePath: "25_Gesicht.gif" },
{Gesichtsname: "horror" , Gesichtspfad: "26_horror.gif" },
{faceName: "Schwitzen" , facePath: "27_Schwitzen.gif" },
{faceName: "Gesichtsname" , facePath: "28_Gesichtsname.gif" },
{faceName: "29_29_gif" ,facePath: "29_29_gif.gif" },
{faceName: "Kampf" , facePath: "30_Kampf.gif" },
{faceName: "Schwören" , facePath: "31_Swear.gif" },
{faceName: "Zweifel" , facePath: "32_Zweifel.gif" },
{faceName: "33" ,facePath: "33_33.gif" },
{Gesichtsname: "Gesicht" , Gesichtspfad: "34_Gesicht.gif" },
{Gesichtsname: "Folter" , Gesichtspfad: "35_Folter.gif" },
{faceName: "Gesicht" ,facePath: "36_Gesicht.gif" },
{Gesichtsname: "Schädel" , Gesichtspfad: "37_Schädel.gif" },
{Gesichtsname: "Klopfen" , Gesichtspfad: "38_knock.gif" },
{faceName: "Auf Wiedersehen" , facePath: "39_Auf Wiedersehen.gif" },
{faceName: "Schweiß abwischen" , facePath: "40_Schweiß abwischen.gif" },
{faceName: "Nasebohren" ,facePath: "41_Nasebohren.gif" },
{Gesichtsname: "Applaus" , Gesichtspfad: "42_Applaus.gif" },
{faceName: "43_Gesichtsbehandlung" , facePath: "43_Gesichtsbehandlung.gif" },
{faceName: "schlechtes Lächeln" , facePath: "44_schlechtes Lächeln.gif" },
{faceName: "45_45_45_gif" ,facePath: "45_45_gif.gif" },
{faceName: "46_Gesichtsbehandlung" ,facePath: "46_Gesichtsbehandlung.gif" },
{Gesichtsname: "gähnen" , Gesichtspfad: "47_gähnen.gif" },
{Gesichtsname: "verachten" , Gesichtspfad: "48_verachten.gif" },
{Gesichtsname: "Beschwerde" , Gesichtspfad: "49_Beschwerde.gif" },
{faceName: "Ich bin den Tränen nahe" , facePath: "50_Ich bin den Tränen nahe.gif" },
{Gesichtsname: "Insidious" , Gesichtspfad: "51_Insidious.gif" },
{Gesichtsname: "52" , Gesichtspfad: "52_52.gif" },
{faceName: "53" , facePath: "53_53.gif" },
{faceName: "Arm" , facePath: "54_Arm.gif" },
{faceName: "55" ,facePath: "55_55.gif" },
{faceName: "Wassermelone" , facePath: "56_Watermelon.gif" },
{faceName: "beer" ,facePath: "57_beer.gif" },
{Gesichtsname: "Basketball" , Gesichtspfad: "58_Basketball.gif" },
{Gesichtsname: "Ping Pong" , Gesichtspfad: "59_Ping Pong.gif" },
{Gesichtsname: "Hug" , Gesichtspfad: "78_Hug.gif" },
{Gesichtsname: "Handschlag" , Gesichtspfad: "81_Handschlag.gif" },
{faceName: "lächele stolz" , facePath: "lächele stolz.gif" },
{faceName: "Musik hören" , facePath: "Musik hören.gif" }
]
,
Init: Funktion (){
var istShowImg = false ;
$( ".Eingabetext" ).focusout( Funktion (){
$( diese ).parent().css( "Rahmenfarbe" , "#cccccc" );
$( diese ).parent().css( "box-shadow" , "keine" );
$( diese ).parent().css( "-moz-box-shadow" , "keine" );
$( diese ).parent().css( "-webkit-box-shadow" , "keine" );
});
$( ".Eingabetext" ).Fokus( Funktion (){
$( diese ).parent().css( "Rahmenfarbe" , "rgba(19,105,172,.75)" );
$( diese ).parent().css( "box-shadow" , "0 0 3px rgba(19,105,192,.5)" );
$( diese ).parent().css( "-moz-box-shadow" , "0 0 3px rgba(241,39,232,.5)" );
$( diese ).parent().css( "-webkit-box-shadow" , "0 0 3px rgba(19,105,252,3)" );
});
$( ".imgBtn" ).klick( Funktion (){
wenn (isShowImg == false ) {
istShowImg = true ;
$( diese ).parent().prev().animate({marginTop: "-125px" },300);
wenn ($( ".faceDiv" ).children().length==0){
für ( var i=0;i<ImgIputHandler.facePath.length;i){
$( ".faceDiv" ).append( "<img title=\"" ImgIputHandler.facePath[i].faceName "\" src=\"face/" ImgIputHandler.facePath[i].facePath "\" />" );
}
$( ".faceDiv>img" ).klick( Funktion (){
istShowImg = falsch ;
$( diese ).parent().animate({marginTop: "0px" },300);
ImgIputHandler.insertAtCursor($( ".Input_text" )[0], "[" $( this ).attr( "title" ) "]" );
});
}
} anders {
istShowImg = falsch ;
$( diese ).parent().prev().animate({marginTop: "0px" },300);
}
});
$( ".postBtn" ).klick( Funktion (){
Alarm($( ".Input_text" ).val());
});
},
insertAtCursor: Funktion (meinFeld, meinWert) {
wenn (Dokument.Auswahl) {
meinFeld.focus();
sel = Dokument.Auswahl.Bereich erstellen();
sel.text = meinWert;
sel.select();
} anders wenn (meinFeld.selectionStart || meinFeld.selectionStart == "0" ) {
var startPos = meinFeld.selectionStart;
var endPos = meinField.selectionEnd;
var restoreTop = meinField.scrollTop;
meinFeld.value = meinFeld.value.substring(0, startPos) meinWert meinFeld.value.substring(endPos, meinFeld.value.length);
wenn (restoreTop > 0) {
meinField.scrollTop = wiederherstellenTop;
}
meinFeld.focus();
meinFeld.selectionStart = startPos meinWert.length;
meinFeld.selectionEnd = startPos meinWert.length;
} anders {
meinFeld.wert = meinWert;
meinFeld.focus();
}
}
}