Creating An Tweet Like Text Box with jQuery - Tweetbox
File Size: | 29.3 KB |
---|---|
Views Total: | 2123 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tweetbox is a jQuery plugin which converts an DIV container into a Tweet-like text box with support for character limit/counter, #Hashtag, @Mention and URL highlighting.
How to use it:
1. Add the jQuery library and other necessary resources at the bottom of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/rangy-core.js" type="text/javascript"></script> <script src="js/rangy-textrange.js" type="text/javascript"></script>
2. Add the jQuery tweetbox plugin after jQuery library.
<script src="js/jquery.tweetbox.js" type="text/javascript"></script>
3. Create an DIV element for the Tweet-like text box.
<div id="demo"> ... </div>
4. The sample CSS to customize the styles of the hash tags, mentions and URLs.
#demo { position: absolute; width: 80%; left: 10%; top: 50px; height: 300px; border: 1px solid black; background-color: white; font-size: 18px; padding: 1%; } .mention, .hashtag, .url { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 2px 4px; } .mention { color: #fff; background-color: #c0392b; } .hashtag { color: #fff; background-color: #34495e; padding: 5px; } .url { color: #fff; background-color: #2980b9; text-decoration: underline; } .tweet-box-editable:afterr { content:' #tweetrm'; color:rgba(0,0,0,.4); } div.tweet-box-bottom { background-color: #5facdd; } button.tweet-box-button { background-color: #81c0e9; border: 1px solid #3990cd; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: white; font-weight: bold; } div.tweet-box-info { font-size: 12px; color: rgba(255,255,255,.8); }
4. Initialize the plugin by calling the function on the DIV container.
<script type="text/javascript"> $(function(){ $('#demo').tweetbox(); }); </script>
5. Available options to customize the plugin.
<script type="text/javascript"> $(function(){ $('#demo').tweetbox({ cb:false, // callback function for submission css:{'font-size':'inherit'}, // CSS to apply to the editor default:false, // default content, good for replies postfix:' #tweetrm', // add content to an end of a tweet, reduces available characters limit:140, // change the twitter character limit (from 140) highlight:[ // regular expressions matching content and what span[class] they get {match:/\B@\w+/g,class:'mention'}, {match:/\B#\w+/g,class:'hashtag'}, {match:/(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi,class:'url'} ], action:'tweet', // specify if it is a tweet or retweet button:{ // hash for button text key being the action tweet:'Tweet', reply:'Tweet Reply' } }); }); </script>
This awesome jQuery plugin is developed by gdbate. For more Advanced Usages, please check the demo page or visit the official website.