Introducing a new jQuery emotions plugin, This helps you to convert text symbols to emotion images like how social chat editor works. This plugin developed by ArunKumar Sekar using javascript regular expression match rules. In first version we providing facebook emotion theme, next release we are going to include some more better emotion icons.
Download Script
Live Demo
Developer
These are the text codes for emotions names references.
Calling Plugin
Plugin Code
This code helps to replace text code to emotion icons using array mapping.
Plugin Variable Info
These are the text codes for emotions names references.
Calling Plugin
Plugin Code
This code helps to replace text code to emotion icons using array mapping.
Plugin Variable Info
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 <3 to 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 formatDeveloper
// a - icon folder
// b - emotions name array
// c - image formatDeveloper
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 <3 to 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