Facebook Style Emotions Jquery Plugin
SO MANY REQUEST I HAVE GOT REGARDING EMOTIONS FOR THERE SITE AS FACEBOOK SITE HAVE, SO HERE I HAVE GAVE JQUERY PLUGIN FOR YOUR SITE.....
I HOPE YOU WILL ENJOY IT....
Download Script 
Live DemoDeveloper
The Basic Setup
Include the jQuery and emotions plugin libraries into your document using script tag.
<script src="js/jquery.js"></script>
<script src="js/jquery.emotions.js"> </script>
<script src="js/jquery.emotions.js"> </script>
These are the text codes for emotions names references.
| Name | Icon | Code | Name | Icon | Code |
|---|---|---|---|---|---|
| Angel |  | o:) | Colonthree |  | :3 |
| Confused |  | o.O | Cry |  | :'( |
| Devil |  | 3:) | Frown |  | :( |
| Gasp |  | :O | Glasses |  | 8) |
| Grin |  | :D | Grumpy |  | >:( |
| Heart |  | <3 | Kiki |  | ^_^ |
| Kiss |  | :* | PacMan |  | :v |
| Smile |  | :) | Squint |  | -_- |
| Sun Glasses |  | 8| | Toungue |  | :p |
| Unsure |  | :/ | Upset |  | >:O |
| Wink |  | ;) |
Calling Plugin
$(document).ready(function()
{
$(“selector”).emotions();
});
{
$(“selector”).emotions();
});
Plugin Code
This code helps to replace text code to emotion icons using array mapping.
$.fn.emotions.defaults = {
a : "emotions-fb/", // Emotions folder
b : newArray("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
};
a : "emotions-fb/", // Emotions folder
b : newArray("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
};
Example Usage
Included jQuery plugin in head tag and ajax code included in this jquery function $("#showText").emotions()- showText is the ID name of div tag. Emotions plugin helps to converts <3to emotion icon.
<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(function()
{
$("#showText").emotions();
});
</script>
</head>
<body>
<div id='showText'>
I Love You <3
</div>
</body>
</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(function()
{
$("#showText").emotions();
});
</script>
</head>
<body>
<div id='showText'>
I Love You <3
</div>
</body>
</html>
Plugin Variable Info
// Notes
// a - icon folder
// b - emotions name array
// c - image format
// a - icon folder
// b - emotions name array
// c - image format
No comments:
Post a Comment