Classic QQ Emoticons plugin (Html+nodejs app)

As currently in contact with the chat room project, received a request to achieve a similar QQ expression. Found on the Internet a jquery classic emoticons plugin. Here is a description of the usage:

Html:

First in the HTML page of the head to introduce the jquery library file and QQ expression plugin jquery.qqFace.js file

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
   <script type="text/javascript" src="jquery.qqFace.js"></script>
then add the following HTML code to the body:

1  　　 <DivID= "Show"></Div> 2     <Divclass= "comment"> 3     <Divclass= "Com_form"> 4         <textareaclass= "Input"ID= "Saytext"name= "Saytext"></textarea> 5         <P><spanclass= "Emotion">Expression</span><inputtype= "button"class= "Sub_btn"value= "Submit"></P> 6     </Div> 7   </Div> 

Css:

We use CSS to beautify the page, the key is the expression button image span.emotion mouse slide and remove the effect, as well as the call expression plug-in, the display of the expression. Qqface panel effect, see the code:

1 . comment{width:680px; margin:20px auto; position:relative}2 . Comment h3{height:28px; line-height:28px}3 . com_form{width:100%; position:relative}4 . input{width:99%; height:60px; border:1px Solid #ccc}5 . Com_form p{height:28px; line-height:28px; position:relative}6 span.emotion{width:42px; height:20px; Background:url (icon.gif) no-repeat 2px 2px; 7 padding-left:20px; Cursor:pointer}8 span.emotion:hover{background-position:2px-28px}9 . Qqface{margin-top:4px;background: #fff;p adding:2px;border:1px #dfe6f6 solid;}Ten . qqface table td{padding:0px;} One . qqface table TD img{cursor:pointer;border:1px #fff solid;} A . qqface table TD img:hover{border:1px #0066cc solid;} -#show {width:680px; margin:20px auto}

Jquery:

When we click the smiley face below the page input box, trigger call Qqface expression Plugin, a few lines will be done.

123 45 path: ' face/'                 6  78          

When you select an emoticon, the input box will insert a section of code such as [Em_5], which represents the inserted emoticon image, which, in practice, should be inserted into the datasheet along with other content when the point submit button is applied. When the page is displayed, we should replace the expression code with a real picture displayed on the page. The following code, after inserting an emoticon, clicks the submit button and uses a JavaScript custom function to replace and display the emoticon code:

1 $ (function () {2     ... 3 $ (". Sub_btn"). Click (function () {4 var str = $ ("#saytext"). Val ();5 $ ("#show"). HTML (Replace_em (str));6     }); 7 }); 8 function Replace_em (str) {9str = str.replace (/\</g, ' <; '); Ten str = str.replace (/\>/g, ' >; ');  Onestr = str.replace (/\n/g, '<; BR/>; ');  Astr = str.replace (/\[em_ ([0-9]*) \]/g, '<imgsrc= "Face/$1.gif"Border= "0" />');  - return str; -}

The following focuses on the following applications in NODEJS+EXPRESS4:

The steps are as follows:

1: Add a span to quote emoticons

1         <Divclass= "Send-out">2             <spanclass= "Emotion"ID= "Emotion"><imgclass= "Head_picture"src= "/images/r-middle-pic07.png">Expression</span>3             <inputclass= "Send-text"ID= "Y_isend_input"type= "text"maxlength= "+"value="">4             <inputID= "Y_ISEND_BT"class= "Out_text"onclick= "Chat.submit ();"type= "button"value= "Send"/>5         </Div>

2: Join the header file and call jquery

1 <Scripttype= "Text/javascript"src= "/js/jquery.qqface.js"></Script>2 $ (function () {3 $ ('. Emotion '). Qqface ({4 assign: ' Y_isend_input ',//Assign value to input box5 Path : '/face/'//Face picture storage paths6            });7});

3: Replace the input [] expression with regular

w.chat={replace_em:function (str) {str = str.replace (/\</g, ' <; '); str = str.replace (/\>/g, ' >; '); str = str.replace (/\n/g, '<; BR/>; '); str = str.replace (/\[em_ ([0-9]*) \]/g, '<imgsrc= "/face/$1.gif"Border= "0" />');        return str;            },//Submit Chat message Content Submit:function () {var str = $ ("#Y_iSend_Input"). Val ();            $ ("#Y_iSend_Input"). Val (Chat.replace_em (str));  var message_text = d.getElementById ("Y_isend_input"). Value; }}

4: Display

Nodejs chat room, analysis.

< Span class= "Html__tag_end" > &NBSP;

Classic QQ Emoticons plugin (Html+nodejs app)