Tutoriel sur la création d'une zone de commentaire avec des émoticônes en utilisant la production de pages HTML et CSS_HTML/Xhtml_Web

Zone de commentaire HTML avec émoticônes. Les émoticônes sont chargées via les données Json et vous pouvez modifier les émoticônes selon vos propres préférences. Le code de cette zone de commentaire est du code HTML, CSS et JQ. La figure 1 montre l'état d'origine et la figure 2 montre la liste des expressions qui apparaît lorsque vous cliquez sur l'expression. Vous pouvez en sélectionner une ou plusieurs à volonté. Jetons un coup d'œil au code implémenté.

Photo 1

Photo 2

Code implémenté :

　code html :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div classe="Principal" > 
2.  <div class="Input_Box" > 
3.  <textarea class="Input_text" >textarea> 
4.  <div classe="faceDiv" > div> 
5.  <div class="Input_Foot" > <une classe="imgBtn" href="javascript:void(0);"> ;a><a classe="postBtn">OKa > div>
 
6. div> 
 
7. div> 

　

code css3 :

Code CSS

Copier le contenu dans le presse-papiers

1. .Input_Box {     
2.     largeur : 495px ;     
3.     hauteur : 160px ;     
4.     bordure : 1px solide #ccc;     
5.     transition : bordure linéaire .2s, box-shadow linéaire .5s ;     
6.     -moz-transition : frontière linéaire .2s, -moz-box-shadow linéaire .5s ;     
7.     -webkit-transition : frontière linéaire .2s, -webkit-box-shadow linéaire .5s ;     
8.     -moz-bordure-rayon : 5px;     
9.     -webkit-bordure-rayon : 5px ;     
10.     bordure-rayon : 5px ;     
11.     couleur de fond : #fff ;     
12.     débordement : caché ;     
13.     position : absolue ;     
14.     -moz-box-shadow : 0 0 5px #ccc;     
15.     -webkit-box-shadow : 0 0 5px #ccc;     
16.     box-shadow : 0 0 5px #ccc;     
17. }     
18. .Input_Box>textarea {     
19.     largeur : 485px ;     
20.     hauteur : 111px ;     
21.     rembourrage : 5px ;     
22.     contour : aucun ;     
23.     bordure : 0px solide #fff;     
24.     redimensionner : aucun ;     
25.     police : 13px "微软雅黑" , Arial, Helvetica, sans-serif;     
26.     -moz-bordure-rayon : 5px;     
27.     -webkit-bordure-rayon : 5px ;     
28.     bordure-rayon : 5px ;     
29. }     
30. .Input_Foot {     
31.     largeur : 100 % ;     
32.     hauteur : 35px ;     
33.     bordure-haut : 1px solide #ccc;     
34.     couleur de fond : #fff ;     
35.     -moz-bordure-radius : 0 0 5px 5px ;     
36.     -webkit-bordure-radius : 0 0 5px 5px ;     
37.     bordure-rayon : 0 0 5px 5px ;     
38.     position : absolue ;     
39. }     
40. .imgBtn {     
41.     flotteur : gauche ;     
42.     marge supérieure : 8px ;     
43.     marge gauche : 10px ;     
44.     image d'arrière-plan : url(imgs.png);     
45.     répétition d'arrière-plan : pas de répétition ;     
46.     position d'arrière-plan : 0 -13px ;     
47.     hauteur : 18px ;     
48.     largeur : 20px ;     
49.     curseur : pointeur     
50. }     
51. .imgBtn:active {     
52.     marge supérieure : 9px ;     
53. }     
54. .imgBtn:hover {     
55.     position d'arrière-plan : 0 -31px     
56. }     
57. .postBtn {     
58.     flotteur : droitedroite ;     
59.     police : 13px "微软雅黑" , Arial, Helvetica, sans-serif;     
60.     couleur : #808080 ;     
61.     rembourrage : 9px 20px 7px 20px;     
62.     bordure-gauche : 1px solide #ccc;     
63.     curseur : pointeur ;     
64.     -moz-bordure-radius : 0 0 5px 0 ;     
65.     -webkit-bordure-radius : 0 0 5px 0 ;     
66.     bordure-rayon : 0 0 5px 0 ;     
67. }     
68. .postBtn:hover {     
69.     couleur : #333 ;     
70.     couleur de fond : #efefef;     
71. }     
72. .postBtn:active {     
73.     rembourrage : 10px 20px 6px 20px;     
74. }     
75. .faceDiv {     
76.     largeur : 500px ;     
77.     hauteur : 120px ;     
78.     bordure-haut : 1px solide #ccc;     
79.     position : absolue ;     
80.     couleur de fond : #fff ;     
81.     -moz-bordure-radius : 5px 5px 0 0 ;     
82.     -webkit-bordure-rayon : 5px 5px 0 0 ;     
83.     bordure-rayon : 5px 5px 0 0 ;     
84. }     
85. .faceDiv>img {     
86.     bordure : 1px solide #ccc;     
87.     flotteur : gauche ;     
88.     marge gauche : -1px ;     
89.     marge supérieure : -1px ;     
90.     position : relative ;     
91.     largeur : 24px ;     
92.     hauteur : 24px ;     
93.     rembourrage : 3px 3px 3px 3px;     
94.     curseur : pointeur ;     
95. }     
96. .faceDiv>img:hover { 
97.  couleur de fond : #efefef; 
98. } 
99. .faceDiv>img:active { 
100. rembourrage : 4px 3px 2px 3px;
} 

　

Code Javascript :

Code JavaScript

Copier le contenu dans le presse-papiers

1. var ImgIputHandler={ 
2. facePath :[
3. {faceName:"smile",facePath:"0_smile.gif"}, 
4. {FACENAME : "🎜> , Facepath : " 1_ 撇 撇 .gif " > {faceName:
"色"
5. ,facePath:"2_色.gif"},  {FACENAME : "Duke"
6. , Facepath : "3_ Duke .gif" }, {faceName:"Deyi"
7. ,facePath:"4_Deyi.gif"},  {FACENAME : "Larmes"
, FacePath :
8. "5_ 泪 泪 .gif" }, {faceName:"timide"
,facePath:
9. "6_shy.gif"},  {faceName:"Tais-toi"
, facePath:
10. "7_Shut up.gif"}, {faceName:"pleurer"
, facePath:
11. "9_crying.gif"}, {faceName:"Gênant"
,facePath:
12. "10_awkward.gif"},  {faceName:"en colère"
,facePath:
13. "11_angry.gif"},  {FACENAME : "Vilain" , FacePath :
14. "12_ 皮 .gif" }, {faceName:"Barteeth",facePath:
15. "13_Bargain.gif"}, {faceName:"surprise",facePath:
16. "14_surprise.gif"},  {faceName:"triste",facePath:
17. "15_sad.gif"},  {faceName:"Cool",facePath:
18. "16_cool.gif"},  {faceName:"Sueur froide",facePath:
19. "17_Sueur froide.gif"}, > {faceName:"Crazy",facePath:
"18_Crazy.gif"
20. }, 
21. {faceName:"vomit",facePath:"19_vomit.gif"}, 
22. {FACENAME : "Souriant" , FacePath : "20_linking .gif" },
23. {faceName:"mignon",facePath:"21_cute.gif"}, 
24. {faceName:"Yeux blancs",facePath:"22_Yeux blancs.gif"}, 
25. {faceName:"arrogance",facePath:"23_arrogance.gif"}, 
26. {faceName:"faim",facePath:"24_hunger.gif"}, 
27. {faceName:"trapped",facePath:"25_trapped.gif"}, 
28. {faceName:"Horreur",facePath:"26_Horror.gif"}, 
29. {faceName:"sueur", facePath:"27_sweat.gif"},
{FACENAME :
30. "憨" , facepath : "28_ 憨 笑 .gif" },
{faceName:
31. "GI",facePath:"29_GI.gif"}, 
{faceName:
32. "struggle",facePath:"30_struggle.gif"}, 
{faceName:
33. "cuss",facePath:"31_curse.gif"}, 
{faceName:
34. "question",facePath:"32_question.gif"}, 
{faceName:
35. "Sh",facePath:"33_boo.gif"}, 
{faceName:
36. "halo",facePath:"34_halo.gif"}, 
{faceName:
37. "torture",facePath:"35_torture.gif"},  {FACENAME :
38. "décliner" , FacePath : "36_ 衰 .gif" }, {faceName :
39. "Squelette",facePath :"37_skeleton.gif"}, 
40. {FACENAME : "Appuyez" , Facepath : "38_ hit .gif" },
41. {faceName:"Au revoir",facePath:"39_Goodbye.gif"}, 
42. {faceName:"wipe sweat", facePath:"40_wipe sweat.gif"},
43.                                             {faceName:
44. "se curer le nez", facePath:"41_se curer le nez.gif"}, {faceName:
45. "Applaudissements",facePath:"42_Applause.gif"},  {faceName:
46. "Je suis tellement gêné", facePath:"43_Je suis gêné.gif" },  {faceName:
47. "mauvais sourire", facePath:"44_bad smile.gif"}, {faceName:
48. "Zuo Hengheng", facePath:"45_left Hengheng.gif" },                                                                                                             { faceName :
49. "Right Heng Heng", facePath :"46_Right Heng Heng.gif" }, {faceName:
50. "Bâillement",facePath:"47_yawn.gif"},  {faceName:
51. "Mépris",facePath:"48_Contempt.gif"},  {faceName:
52. "Deuil",facePath:"49_Grief.gif"},  {faceName:
53. "Je suis sur le point de pleurer", facePath:"50_Je suis sur le point de pleurer.gif" },  {faceName:
54. "insidious",facePath:"51_insidious.gif"},  {faceName:
55. "Kiss", facePath:"52_Kiss.gif"}, {FACENAME :
"Peur"
56. , Facepath : "53_ <.gif> }, {faceName:
"Pauvre"
57. ,facePath:"54_Poor.gif"},  {faceName:
"Chop Knife"
58. ,facePath:"55_Chop Knife.gif"},  {faceName:
"Pastèque"
59. ,facePath:"56_watermelon.gif"}, 
60. {faceName:"Bière",facePath:"57_beer.gif"}, 
61. {faceName:"Basketball",facePath:"58_basketball.gif"}, 
62. {faceName:"pingpong",facePath:"59_pingpong.gif"}, 
63. {faceName:"Câlin",facePath:"78_hug.gif"}, 
64. {faceName:"Handshake",facePath:"81_Handshake.gif"}, 
65. {faceName:"sourire suffisant", facePath:"sourire suffisant.gif"},
66. {faceName:"Écouter de la musique",facePath:"Écouter de la musique.gif"} 
67. ]
68. , ,
69. Init :fonction(){
70.  var isShowImg=false; 
71. $(".Input_text").focusout(fonction(){
72. $(this).parent().css("border-color", "#cccccc");
$(
73. this).parent().css("box-shadow", "aucun"); 
$(
74. this).parent().css("-moz-box-shadow", "aucun"); $(
ce
75. ).parent().css("-webkit-box-shadow", "aucun"); });     
76.         $().Input_text").focus(fonction(){     
77.         $(this).parent().css("border-color",  "rgba(19,105,172,.75)");     
78.         $(this).parent().css("box-shadow",  "0 0 3px rgba(19,105,192,.5)");     
79.         $(this).parent().css("-moz-box-shadow", "0 0 3px rgba(241,39,232,.5)");     
80.         $(this).parent().css("-webkit-box-shadow", "0 0 3px rgba(19,105,252,3)");     
81.         });     
82.         $(".imgBtn").cliquez(fonction(){     
83.             if(isShowImg==false){     
84.                 isShowImg=true;     
85.                 $(this).parent().prev().animate({marginTop:"-125px"},300);     
86.                 if($(".faceDiv").children().length==0){
87.                     pour(var i=0;i
88.                         $(".faceDiv").append(" ImgIputHandler. facePath[i].faceName "" src="face/" ImgIputHandler.facePath[i].facePath "" />");     
89.                     }     
90.                     $(".faceDiv>img").click(fonction(){     
91.                               
92.                         isShowImg=false;     
93.                         $(this).parent().animate({marginTop:"0px"},300 );     
94.                         ImgIputHandler.insertAtCursor($(".Input_text")[0],"[" $( ce).attr("titre") "]");     
95.                     } );     
96.                 }     
97.             }autre{     
98.                 isShowImg=false;     
99.                 $(this).parent().prev().animate({marginTop:"0px"},300 );     
100.             }     
101.         });     
102.         $().postBtn").click(fonction(){     
103.             alerte($().Input_text").val());     
104.         });     
105.     },     
106.     insertAtCursor :fonction(myField, myValue) {     
107.     si (document.selection) {     
108.         myField.focus();     
109.         sel = document.selection.createRange();     
110.         sel.text = myValue ;     
111.         sel.select();     
112.     } else if (myField.selectionStart || myField.selectionStart == "0") {     
113.         var startPos = myField.selectionStart;     
114.         var endPos = myField.selectionEnd;     
115.         var restoreTop = myField.scrollTop;     
116.         myField.value = myField.value.substring(0, startPos)   myValue   myField.value.substring(endPos, myField.value.length);     
117.         if (restoreTop > 0) {     
118.             myField.scrollTop = restoreTop ;     
119.         }     
120.         myField.focus();     
121.         myField.selectionStart = startPos   myValue.length;     
122.         myField.selectionEnd = startPos   myValue.length;     
123.     } autre {     
124.         myField.value  = myValue ;     
125.         myField.focus();     
126.     }     
127. }     
128. }