Jquery is similar to WeChat chat interface and jquery imitation Interface

Source: Internet
Author: User

Jquery imitation chat interface and jquery imitation Interface

First, let's take a look at our.

Some of the colors may be inappropriate, but most of the basic functions are implemented. You are talking to your deskmate. The message you send is on your left, and on the right of your device.

First, write down the overall framework and put two boxes in a large container, which are the interfaces on the left and right. Each box contains three parts: the header, content area, and bottom. You only need to write one side and paste and copy the other side.

First define a large

To hold the left and right boxes.

<Div id = "main"> // left-side chat interface <div id = "box"> <div id = "top"> <span> You </span> </div> <div id = "content"> <select multiple = "multiple" id = "leftcontent"> </select> </div> <div id = "bottom"> <input type = "text" class = "sendText" id = "leftText"/> <input type = "button" id = "leftdBtn" class = "sendBtn" value = "send"> </div> // chat interface on the right <div id = "box"> <div id = "top"> <span> deskmate </span> </div> <div id = "content"> <select multiple = "multiple" id = "rightcontent"> </select> </div> <div id = "bottom"> <input type = "text" class = "sendText" id = "rightText"/> <input type = "button" id = "rightBtn" class = "sendBtn" value = "send"> </div>

First, the code of the two boxes can be directly copied and pasted. Note the following differences:

<div id = "content">   <select multiple="multiple" id="rightcontent">   </select></div>

The IDs in the select statement are different. We generally use

Option1
Option2
Option3

In this way. The select label is used here when you are chatting with your deskmate, it has a scroll bar to slide up and down to see what you are talking about. Add some css styles Based on the above, so that the interface effect will come out.

The next step is to write jquery code. First of all, what do you say on your side appear on the right side of your device and on the left side of the device on your deskmate?

We first control the sending of messages on the left side of your interface. After writing the text, press the send button to make it appear on the right side of your interface, and also on the left side of your deskmate device.

Follow these steps:
1. Obtain the content in the text box you entered.
2. Generate an option tag.
2.1 The style of the generated tag is located and displayed on the right of your device.
2.2 Insert the content of the generated tag into the text box
3. Append the option label to your select.
4. Locate and display the option tag on the left side of your deskmate device.

5. Clear the content in the text box.

Function sendLeft () {// 1. Obtain the content in the text box you entered. Var text = $ ("# leftText"). val (); // 2. Generate a span tag. Var option = $ ("'<option> </option> '"); // 2.1 the style of the generated tag is located and displayed on the right of your device. Var len = text. length; option.css ("width", len * 15 + "px"); option.css ("marginLeft", 350-len * 15-60 + "px "); // 2.2 generate the content of the tag option.html (text); // 3. append the content to select. $ ("# Leftcontent "). append (option); // 4. the tag (right) var option1 =1 ("<option> </option>"); option1.addClass ("optionRight"); option1.css ("width ", len * 15 + "px"); option1.css ("marginLeft", 10 + "px"); option1.html (text); $ ("# rightcontent "). append (option1); // 5. clear the content of the text box $ ("# leftText "). val ("");}}

The display of the devices at your deskmate is similar to that on the left.
Just write it yourself.

After writing the message function sent on the left and right, the message cannot be sent at this time because the event binding is not yet performed. You can send messages in either of the following ways:
①. Send button
To send a button, bind an event to the button.

 $("#leftdBtn").bind("click", sendLeft); $("#rightBtn").bind("click", sendRight);

②. Press enter to send

$(document).keydown(function(event){   var txt1 = $("#leftText").val();   var txt2 = $("#rightText").val()    if(event.keyCode == 13){    if( txt1.trim() != ""){     sendLeft();    }    if(txt2.trim() != ""){     sendRight();    }   }  });

The complete source code is attached:

<! DOCTYPE html> 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.