Il plugin delle faccine di Facebook convertirà automaticamente i codici testuali nelle icone corrispondenti. Vediamo come utilizzarlo.
Installazione
Inserire la libreria jQuery e il plugin delle faccine tra i tag Head della tua pagina.
|
1 2 |
<script src="js/jquery.js"></script> <script src="js/jquery.emotions.js"> </script> |
Di seguito la leggenda delle faccine in stile facebook e le relative corrispondenze testuali.
| Nome | Icona | Codice | Nome | Icona | Codice |
|---|---|---|---|---|---|
| Angel |  |
o:) | Colonthree |  |
:3 |
| Confused |  |
o.O | Cry |  |
:'( |
| Devil |  |
3:) | Frown |  |
 |
| Gasp |  |
:O | Glasses |  |
8) |
| Grin |  |
 |
Grumpy |  |
>:( |
| Heart |  |
<3 | Kiki |  |
^_^ |
| Kiss |  |
:* | PacMan |  |
:v |
| Smile |  |
 |
Squint |  |
-_- |
| Sun Glasses |  |
8| | Toungue |  |
:p |
| Unsure |  |
:/ | Upset |  |
>:O |
| Wink |  |
 |
Richiamare il plugin
|
1 2 3 4 |
$(document).ready(<strong>function</strong>() { $("selector").emotions(); }); |
Il codice del plugin
|
1 2 3 4 5 6 |
$.fn.<strong>emotions</strong>.defaults = { a : "emotions-fb/", // Emotions folder b : new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"), // Emotions Type s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"), c : "gif" // Emotions Image format }; |
Esempio di utilizzo
Nel caso di questo esempio la conversione automatica dei codici testuali in icone avverrà all’interno del div con ID “showText”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.emotions.js"></script> <script type="text/javascript"> $(document).ready(<strong>function</strong>() { $("#showText")<strong>.emotions</strong>(); }); </script> </head> <body> <div id='showText'> I Love You <3 </div> </body> </html> |
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
