WeChat 채팅 인터페이스를 모방한 jquery의 예 공유
이 글은 WeChat 채팅 인터페이스를 모방한 jquery의 관련 코드를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
먼저 렌더링을 살펴보세요.
색상이 조금 부적절할 수 있지만 기본적인 기능은 대부분 구현되어 있습니다. 즉, 귀하는 직장 동료와 대화하고 있으며 귀하가 보내는 메시지는 귀하의 장치 왼쪽과 그의 장치 오른쪽에 있습니다.
먼저 전체 프레임워크를 작성하고 왼쪽과 오른쪽 인터페이스인 두 개의 상자를 큰 컨테이너에 넣습니다. 그런 다음 각 상자에는 헤더, 콘텐츠 영역 및 하단의 세 부분이 포함됩니다. 한 면에 쓰고 다른 면에는 붙여넣고 복사하면 됩니다.
먼저 왼쪽과 오른쪽 상자를 담을 큰
을 정의하세요.
<p id = "main"> //左侧聊天界面 <p id = "box"> <p id = "top"><span>你</span></p> <p id = "content"> <select multiple="multiple" id="leftcontent"> </select> </p> <p id = "bottom"> <input type = "text" class = "sendText" id = "leftText" /> <input type = "button" id = "leftdBtn" class="sendBtn" value = "发送"> </p> </p> //右侧聊天界面 <p id = "box"> <p id = "top"><span>同桌</span></p> <p id = "content"> <select multiple="multiple" id="rightcontent"> </select> </p> <p id = "bottom"> <input type = "text" class = "sendText" id = "rightText" /> <input type = "button" id = "rightBtn" class="sendBtn" value = "发送"> </p> </p> </p>
우선 이 두 상자의 코드는 직접 복사하여 붙여넣을 수 없습니다. 또한 다음 차이점에 주의해야 합니다.
<p id = "content"> <select multiple="multiple" id="rightcontent"> </select> </p>
select의 ID가 다릅니다. 우리는 보통
option1
option2
option3
을 이렇게 사용합니다. 여기에서 선택 태그는 귀하와 귀하의 동료가 전체 화면에서 채팅할 때 사용됩니다. 여기에는 귀하가 말한 내용을 보기 위해 위아래로 슬라이드할 수 있는 스크롤 막대가 있습니다. 그런 다음 위 내용을 바탕으로 몇 가지 CSS 스타일을 추가하면 인터페이스 효과가 나옵니다.
다음 단계는 jquery 코드를 작성하는 것입니다. 먼저 당신이 말하는 내용이 귀하의 기기 오른쪽과 동료의 기기 왼쪽에 표시되어야 하는지 생각해 보세요.
먼저 인터페이스 왼쪽에서 메시지 보내기를 제어합니다. 텍스트를 작성한 후 보내기 버튼을 누르면 메시지가 인터페이스 오른쪽과 데스크메이트 기기 왼쪽에 표시됩니다.
이를 달성하려면 다음 단계를 따라야 합니다.
1. 입력한 텍스트 상자의 내용을 가져옵니다.
2. 옵션 태그를 생성합니다.
2.1 생성된 태그의 스타일은 생성된 스팬 태그가 장치의 오른쪽에 배치되어 표시되는 것입니다.
2.2 생성된 태그에 콘텐츠를 삽입합니다. 즉, 텍스트 상자에 콘텐츠를 삽입합니다.
3. 선택 항목에 옵션 태그를 추가하세요.
4. 옵션 라벨을 데스크메이트의 장치 왼쪽에 배치합니다.
5. 텍스트 상자의 내용을 지웁니다.
function sendLeft(){
//1.获得你输入的文本框中的内容。
var text = $("#leftText").val();
//2。生成一个span标签。
var option = $("`<option></option>`");
// 2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并显示。
var len = text.length;
option.css("width", len * 15 + "px");
option.css("marginLeft", 350 - len * 15 - 60 + "px");
//2.2 生成标签的内容
option.html(text);
//3. 将内容追加到select中。
$("#leftcontent").append(option);
//4. 追加生成的标签(右侧)
var option1 = $("<option></option>");
option1.addClass("optionRight");
option1.css("width", len * 15 + "px");
option1.css("marginLeft", 10 +"px");
option1.html(text);
$("#rightcontent").append(option1);
//5. 清除文本框的内容
$("#leftText").val("");
}
}마찬가지로 책상에 기기를 전시해 놓으면 왼쪽과 비슷합니다.
그냥 직접 써보세요.
왼쪽과 오른쪽에 보내는 메시지 기능을 작성한 후, 아직 이벤트가 바인딩되지 않았기 때문에 지금은 메시지를 보낼 수 없습니다. 먼저 메시지를 보내는 방법에는 두 가지가 있습니다:
①. 버튼 보내기
버튼 보내기에는 버튼
$("#leftdBtn").bind("click", sendLeft);
$("#rightBtn").bind("click", sendRight);②에 이벤트를 바인딩해야 합니다.
$(document).keydown(function(event){
var txt1 = $("#leftText").val();
var txt2 = $("#rightText").val()
if(event.keyCode == 13){
if( txt1.trim() != ""){
sendLeft();
}
if(txt2.trim() != ""){
sendRight();
}
}
});를 보내려면 Enter를 누르세요. 마지막으로 전체 소스 코드를 첨부하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>模仿微信聊天</title>
<script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#main{
width: 90%;
margin: 10px auto;
}
#box{
float: left;
margin:20px 120px;
}
#top{
width: 310px;
padding: 10px 20px;
color: white;
background-color: lightgreen;
font-size: 18px;
font-family: "微软雅黑";
font-weight: bold;
}
#content{
background-color: white;
}
select{
width: 350px;
height: 470px;
background-color: white;
padding: 10px;
border:2px solid red;
}
#bottom{
width: 310px;
background-color: red;
padding: 10px 20px;
}
.sendText{
height: 25px;
width: 210px;
font-size: 16px;
}
.sendBtn{
width: 65px;
height: 30px;
float: right;
background-color: gold;
color: white;
text-align: center;
font-size: 18px;
}
span{
background-color: lightgreen;
color: #000;
padding: 10px 30px;
}
option{
padding: 5px 10px;
margin-top:10px;
border-radius:5px;
width: 10px;
min-height: 20px;
}
.optionRight{
background-color: lightgreen;
}
.optionLeft{
background-color: lightblue;
}
</style>
<script>
$(function(){
$("#leftdBtn").bind("click", sendLeft);
$("#rightBtn").bind("click", sendRight);
function sendLeft(){
//1. 获取输入框中的内容
var text = $("#leftText").val();
//2. 生成标签
var option = $("<option></option>");
option.addClass("optionLeft");
//2.1 生成标签的样式
var len = text.length;
//option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
option.css("width", len * 15 + "px");
option.css("marginLeft", 350 - len * 15 - 60 + "px");
//2.2 生成标签的内容
option.html(text);
//3. 将内容追加到select中。
$("#leftcontent").append(option);
//4. 追加生成的标签(右侧)
var option1 = $("<option></option>");
option1.addClass("optionRight");
option1.css("width", len * 15 + "px");
option1.css("marginLeft", 10 +"px");
option1.html(text);
$("#rightcontent").append(option1);
//5. 清除文本框的内容
$("#leftText").val("");
}
function sendRight(){
//1. 获取输入框中的内容
var text = $("#rightText").val();
//2. 生成标签
var option = $("<option></option>");
option.addClass("optionLeft");
//2.1 生成标签的样式
var len = text.length;
//option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
option.css("width", len * 15 + "px");
option.css("marginLeft", 350 - len * 15 - 60 + "px");
//2.2 生成标签的内容
option.html(text);
//3. 将内容追加到select中。
$("#rightcontent").append(option);
//4. 追加生成的标签(右侧)
var option1 = $("<option></option>");
option1.addClass("optionRight");
option1.css("width", len * 15 + "px");
option1.css("marginLeft", 10 +"px");
option1.html(text);
$("#leftcontent").append(option1);
$("#rightText").val("");
}
$(document).keydown(function(event){
var txt1 = $("#leftText").val();
var txt2 = $("#rightText").val()
if(event.keyCode == 13){
if( txt1.trim() != ""){
sendLeft();
}
if(txt2.trim() != ""){
sendRight();
}
}
});
})
</script>
</head>
<body>
<p id = "main">
<p id = "box">
<p id = "top"><span>你</span></p>
<p id = "content">
<select multiple="multiple" id="leftcontent">
</select>
</p>
<p id = "bottom">
<input type = "text" class = "sendText" id = "leftText" />
<input type = "button" id = "leftdBtn" class="sendBtn" value = "发送">
</p>
</p>
<p id = "box">
<p id = "top"><span>同桌</span></p>
<p id = "content">
<select multiple="multiple" id="rightcontent">
</select>
</p>
<p id = "bottom">
<input type = "text" class = "sendText" id = "rightText" />
<input type = "button" id = "rightBtn" class="sendBtn" value = "发送">
</p>
</p>
</p>
</body>
</html>관련 권장 사항:
js 원본 사운드를 사용하여 WeChat 채팅 말풍선을 모방하는 방법의 예 간단한 WeChat 채팅 기능 구현
위 내용은 WeChat 채팅 인터페이스를 모방한 jquery의 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7465
15
1376
52
77
11
45
19
18
19
Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk와 Baidu Netdisk는 매우 편리한 저장 도구입니다. 많은 사용자가 이 두 소프트웨어가 상호 운용 가능한지 묻고 있습니다. Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? 이 사이트에서는 Quark 네트워크 디스크 파일을 Baidu 네트워크 디스크에 저장하는 방법을 사용자에게 자세히 소개합니다. Quark Network Disk에서 Baidu Network Disk로 파일을 저장하는 방법 방법 1. Quark Network Disk에서 Baidu Network Disk로 파일을 전송하는 방법을 알고 싶다면 먼저 Quark Network Disk에 저장해야 하는 파일을 다운로드한 다음 엽니다. Baidu 네트워크 디스크 클라이언트에서 압축 파일을 저장할 폴더를 선택한 다음 두 번 클릭하여 폴더를 엽니다. 2. 폴더를 연 후 창 왼쪽 상단에 있는 "업로드"를 클릭하세요. 3. 컴퓨터에 업로드해야 하는 압축 파일을 찾아 클릭하여 선택합니다.
NetEase Cloud Music을 WeChat Moments에 공유하는 방법_NetEase Cloud Music을 WeChat Moments에 공유하는 방법에 대한 튜토리얼
Mar 25, 2024 am 11:41 AM
1. 먼저 NetEase Cloud Music에 들어간 다음 소프트웨어 홈페이지 인터페이스를 클릭하여 노래 재생 인터페이스로 들어갑니다. 2. 그런 다음 노래 재생 인터페이스에서 아래 그림의 빨간색 상자에 표시된 것처럼 오른쪽 상단에서 공유 기능 버튼을 찾아 공유 채널에서 공유 채널을 선택하고 다음 위치에서 "공유 대상" 옵션을 클릭합니다. 하단에서 첫 번째 "WeChat Moments"를 선택하면 WeChat Moments에 콘텐츠를 공유할 수 있습니다.
Baidu Netdisk에서 친구들과 파일을 공유하는 방법
Mar 25, 2024 pm 06:52 PM
최근 Baidu Netdisk Android 클라이언트는 새로운 버전 8.0.0을 선보였습니다. 이 버전은 많은 변화를 가져올 뿐만 아니라 많은 실용적인 기능도 추가했습니다. 그 중 가장 눈길을 끄는 것은 폴더 공유 기능 강화다. 이제 사용자는 쉽게 친구를 초대하여 업무와 생활에서 중요한 파일을 공유하고 더욱 편리하게 협업하고 공유할 수 있습니다. 그렇다면 친구들과 공유해야 하는 파일을 어떻게 공유합니까? 아래에서 이 사이트의 편집자가 자세한 소개를 해줄 것입니다. 1) Baidu Cloud 앱을 열고 먼저 홈페이지에서 관련 폴더를 클릭한 다음 인터페이스 오른쪽 상단에 있는 [...] 아이콘을 클릭합니다(아래 참조). 2) 그런 다음에서 [+]를 클릭합니다. "공유 멤버" 열 ]을 선택하고 마지막으로 모두 확인합니다.
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?
Feb 28, 2024 pm 03:12 PM
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
HP 프린터 드라이버의 두 가지 설치 방법 공유
Mar 13, 2024 pm 05:16 PM
HP 프린터는 많은 사무실에서 필수적인 인쇄 장비입니다. 컴퓨터에 프린터 드라이버를 설치하면 프린터가 연결되지 않는 등의 문제를 완벽하게 해결할 수 있습니다. 그렇다면 HP 프린터 드라이버를 설치하는 방법은 무엇입니까? 아래 편집기에서는 두 가지 HP 프린터 드라이버 설치 방법을 소개합니다. 첫 번째 방법: 공식 웹사이트에서 드라이버를 다운로드합니다. 1. 검색 엔진에서 HP China 공식 웹사이트를 검색하고 지원 열에서 [소프트웨어 및 드라이버]를 선택합니다. 2. [프린터] 카테고리를 선택하고 검색창에 프린터 모델을 입력한 후 [제출]을 클릭하여 프린터 드라이버를 찾으세요. 3. 컴퓨터 시스템에 따라 해당 프린터를 선택합니다. win10의 경우 win10 시스템용 드라이버를 선택합니다. 4. 다운로드가 성공적으로 완료되면 해당 폴더에서 찾아보세요.
jQuery를 사용하여 모든 태그의 텍스트 내용 수정
Feb 28, 2024 pm 05:42 PM
제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.
Discuz WeChat 공유가 표시되지 않는 문제 해결
Mar 09, 2024 pm 03:39 PM
제목: Discuz WeChat 공유가 표시되지 않는 문제를 해결하려면 구체적인 코드 예제가 필요합니다. 모바일 인터넷의 발전으로 WeChat은 사람들의 일상생활에 없어서는 안될 부분이 되었습니다. 웹사이트 개발 시 사용자 경험을 개선하고 웹사이트 노출을 확대하기 위해 많은 웹사이트에 WeChat 공유 기능이 통합되어 사용자가 웹사이트 콘텐츠를 Moments 또는 WeChat 그룹에 쉽게 공유할 수 있습니다. 그러나 때때로 Discuz와 같은 오픈 소스 포럼 시스템을 사용할 때 WeChat 공유를 표시할 수 없는 문제가 발생하여 사용자 경험에 특정 어려움을 초래할 수 있습니다.
