Shulou(Shulou.com)06/03 Report--

This article will explain in detail how the QQ expression plug-in based on jQuery is like, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

When we chat on QQ or post comments or Weibo, we will have a function that allows us to add emoticons. When we click on the emoji button, a series of small emoji pictures will pop up and rich expressive content can be published by selecting an emoji picture.

HTML

Firstly, the jQuery library file and the QQ expression plug-in jquery.qqFace.js file are introduced into the head of the html page.

Then add the following html code to body:

Expression

There is an input box on the page to enter the content to be published, and an emoji button. Click this button to call the emoji picture, and then you can click the "submit" button to publish the emoji content.

CSS

When we use CSS to beautify the page, the key is the mouse up and down effect of the emoji button image span.emotion, and the emoji displayed after calling the emoji plug-in. QqFace panel effect, please see the code:

.comment {width:680px; margin:20px auto; position:relative} .comment h4 {height:28px; line-height:28px} .com _ form {width:100%; position:relative} .input {width:99%; height:60px; border:1px solid # ccc} .com _ form p {height:28px; line-height:28px; position:relative} span.emotion {width:42px; height:20px; background:url (icon.gif) no-repeat 2px 2px; padding-left:20px Cursor:pointer} span.emotion:hover {background-position:2px-28px} .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;} # show {width:680px; margin:20px auto}

We also styled the submit button in domo with CSS3. The code is not explained in this article, but you can download the code to learn about it.

JQuery

When we click on the smiley face at the bottom of the input box on the page, it triggers the call to the qqface emoji plugin, which is done in a few lines.

$(function () {$('.emotion') .qqFace ({assign:'saytext', / / assign to the input box the path where the path:'face/'// emoticons are stored);.})

When an emoji is selected, a code such as [em_5] is inserted into the input box to represent the inserted emoji. In practice, the emoji code should be inserted into the data table along with other contents after clicking the submit button. When the page is displayed, we should replace the emoji code with a real picture to display on the page. The following code is that after inserting the emoji image, click the submit button, and use the javascript custom function to replace and display the emoji code:

(function () {... $(".sub _ btn") .click (function () {var str = $("# saytext"). Val (); $("# show") .html (replace_em (str));}); function replace_em (str) {str = str.replace (/ / gMagna'>;'); str = str.replace (/ ngamma ggamma transfixion'); str = str.replace (/ [em_ ([0-9] *)] / gjue')

'); return str;}

If you want to regularly replace emoticons with PHP code, you can use the following function:

Function ubbReplace ($str) {$str = str_replace (">",';', $str); $str = str_replace ("n",'>; br/ >;', $str); $str = preg_replace ("[em_ ([0-9] *)]]", "> img src=" face/$1.gif "/ >", $str); return $str;}

On the jQuery-based QQ expression plug-in is how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.