Recently, due to project requirements, you need to enter QQ expressions in the text box where you leave a message. This effect is already very common, next, I will share a QQ emoticons plug-in that I found on the Internet using jquery.
First, let's take a look at the QQ emoticons plug-in!
The following is the specific implementation code (only the code is pasted here, and the complete download package address is provided below ):
<Html xmlns =" http://www.phpernote.com/javascript-function/661.html "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> jQuery-based QQ emoticons plugin </title> <script type =" text/javascript "src =" http://www.phpernote.com/js/jquery.min.js "> </Script> <script type =" text/javascript "src =" jquery. qqFace. js "> </script> <script type =" text/javascript "> $ (function () {$ ('. emotion '). qqFace ({id: 'facebox', // IDassign: 'saytext' of the emoticons box, // assign the path to the control: 'face/'// path of the emoticons, note that if you modify this field, modify the regular expression matching field}); $ (". sub_btn "). click (function () {var str = $ ("# saytext "). val (); $ ("# show" cmd.html (replace_em (str);}); // view the result function replace_em (str) {str = str. replace (/\ </g, '& lt;'); str = str. replace (/\>/g, '& gt;'); str = str. replace (/\ n/g, '<br/>'); str = str. replace (/\ [em _ ([0-9] *) \]/g, ' '); return str ;}</script> <style type = "text/css"> body, html {text-align: center ;}# main {margin: 30px auto; width: 400px; text-align: left; }# show {width: margin PX; margin: 20px auto }. comment {width: margin PX; margin: 20px auto; position: relative }. comment h3 {height: 28px; line-height: 28px }. com_form {width: 100%; position: relative }. input {width: 100%; height: 60px; border: 1px solid # ccc }. sub_btn {float: right ;}. com_form p {height: 28px; line-height: 28px;}/* The above css code is modified according to the actual situation. The following css code must be retained */span. emotion {width: 60px; height: 20px; overflow: hidden; background: url(icon.gif) no-repeat 2px 2px; padding-left: 20px; cursor: pointer;} span. emotion: hover {background-position: 2px-28px;/* Note that hover is invalid in ie 6 browser */}. qqFace {margin-top: 4px; background: # fff; padding: 2px; border: 1px # dfe6f6 solid ;}. qqFace table td {padding: 0px ;}. qqFace table td img {cursor: pointer; border: 1px # fff solid ;}. qqFace table td img: hover {border: 1px # 0066cc solid ;} </style>
Download jquery QQ emoticons
Articles you may be interested in
- Jquery countdown effect plugin
- Php error_log () writes error messages to a file
- Add vcastr3 Video Player Plug-in to FCKeditor
- Lee dialog provides excellent pop-up layer effects based on jquery plug-ins.
- Summary of the string truncation function implemented by javascript (including introduction to the use of Js to intercept Chinese characters)
- Windows cannot start the hardware device because its configuration information (in the Registry) is incomplete or damaged. (Code 19) Solution
- DW CS5 jquery code prompt plug-in
- Add a music player plug-in to the FCKeditor