界面截图
DEMO网址
http://120.27.39.174/acx-chat/
html代码
<!DOCTYPE html>
<html>
<head>
<title>Acxiom DataGuru Robot</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Acxiom DataGuru Robot">
<link rel="stylesheet" href="static/lib/weui.min.css">
<link rel="stylesheet" href="static/css/jquery-weui.css">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body ontouchstart>
<div class="weui_tab">
<div class="weui_navbar">
<div class="navbar_left"></div>
<div class="navbar_center">Acxiom DataGuru Robot</div>
<div class="navbar_right"></div>
</div>
<div class="weui_tab_bd scroll_page">
<section class="aui-chat">
</section>
</div>
<div class="weui_tabbar aui-chat-tool">
<div class="eaitWrap">
<input class="editArea" contenteditable="true">
</div>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary sendBtn">send</a>
</div>
</div>
<script id="sendMsg" type="text/tpl">
<div class="aui-chat-item aui-chat-right">
<div class="aui-chat-media">
<img src="{{d.avatar}}">
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">{{d.userName}}</div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
{{# switch(d.msgType) { case 'text': }}
{{d.text}}
{{# break; case 'image': }}
<img src="{{d.image}}" alt="{{d.text}}">
{{# break; } }}
</div>
<div class="aui-chat-status">
<i class="aui-iconfont aui-icon-info aui-text-danger"></i>
</div>
</div>
</div>
</script>
<script id="recvMsg" type="text/tpl">
<div class="aui-chat-item aui-chat-left">
<div class="aui-chat-media">
<img src="{{d.avatar}}">
</div>
<div class="aui-chat-inner">
<div class="aui-chat-name">{{d.userName}}</div>
<div class="aui-chat-content">
<div class="aui-chat-arrow"></div>
{{# switch(d.msgType) { case 'text': }}
{{d.text}}
{{# break; case 'image': }}
<img src="{{d.image}}" alt="{{d.text}}">
{{# break;} }}
</div>
<div class="aui-chat-status aui-chat-status-refresh">
<i class="aui-iconfont aui-icon-correct aui-text-success"></i>
</div>
</div>
</div>
</script>
<script id="timeMsg" type="text/tpl">
<div class="aui-chat-header">{{ d.text }}</div>
</script>
<script src="static/lib/jquery-2.1.4.js"></script>
<script src="static/lib/fastclick.js"></script>
<script src="static/js/jquery-weui.js"></script>
<script src="static/js/swiper.js"></script>
<script src="static/lib/laytpl.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>
main.css代码
body, html {
height: 100%;
-webkit-tap-highlight-color: transparent;
font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体";
}
.weui_navbar+.weui_tab_bd {
padding: 50px 5px 60px 5px;
background-color: #f5f5f5;
}
.weui-photo-browser-modal {
z-index: 999;
}
.weui_navbar {
line-height: 2rem;
height: 2rem;
background-color: #6ABD78;
color: #fff;
}
.weui-photo-browser-modal .photo-container img {
margin: 0 auto;
}
.weui_tabbar:before {
border-top: 1px solid #ccc;
}
.navbar_left {
flex: 1;
}
.navbar_center {
flex: 3;
text-align: center;
}
.navbar_right {
flex: 1;
}
/*chat*/
.aui-chat {
width: 100%;
height: 100%;
}
.aui-chat .aui-chat-item {
position: relative;
width: 100%;
margin-bottom: 0.75rem;
overflow: hidden;
display: block;
}
.aui-chat .aui-chat-header {
width: 100%;
text-align: center;
margin-bottom: 0.75rem;
font-size: 0.6rem;
color: #757575;
}
.aui-chat .aui-chat-left {
float: left;
}
.aui-chat .aui-chat-right {
float: right;
}
.aui-chat .aui-chat-media {
display: inline-block;
max-width: 2rem;
}
.aui-chat .aui-chat-media img {
width: 100%;
border-radius: 50%;
}
.aui-chat .aui-chat-inner {
position: relative;
overflow: hidden;
display: inherit;
}
.aui-chat .aui-chat-arrow {
content: '';
position: absolute;
width: 0.6rem;
height: 0.6rem;
top: 0.2rem;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
background-color: transparent;
}
.aui-chat .aui-chat-left .aui-chat-arrow {
background-image: -webkit-linear-gradient(45deg, #CCE6DE, #CCE6DE 50%, transparent 50%);
background-image: linear-gradient(45deg, #CCE6DE, #CCE6DE 50%, transparent 50%);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: -0.25rem;
}
.aui-chat .aui-chat-right .aui-chat-arrow {
background-image: -webkit-linear-gradient(45deg, #ffffff, #ffffff 50%, transparent 50%);
background-image: linear-gradient(45deg, #ffffff, #ffffff 50%, transparent 50%);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
right: -0.25rem;
}
.aui-chat .aui-chat-content {
color: #212121;
font-size: 0.7rem;
border-radius: 0.2rem;
min-height: 1rem;
position: relative;
padding: 0.5rem;
max-width: 80%;
word-break: break-all;
word-wrap: break-word;
}
.aui-chat .aui-chat-content img {
max-width: 100%;
display: block;
}
.aui-chat .aui-chat-status {
position: relative;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
}
.aui-chat .aui-chat-name {
width: 100%;
position: relative;
font-size: 0.6rem;
color: #757575;
margin-bottom: 0.25rem;
}
.aui-chat .aui-chat-left .aui-chat-name {
left: 0.5rem;
}
.aui-chat .aui-chat-left .aui-chat-status {
left: 0.5rem;
float: left;
}
.aui-chat .aui-chat-left .aui-chat-media {
width: 2rem;
float: left;
}
.aui-chat .aui-chat-left .aui-chat-inner {
max-width: 70%;
}
.aui-chat .aui-chat-left .aui-chat-content {
background-color: #CCE6DE;
float: left;
left: 0.5rem;
}
.aui-chat .aui-chat-right .aui-chat-media {
width: 2rem;
float: right;
}
.aui-chat .aui-chat-right .aui-chat-inner {
float: right;
max-width: 70%;
}
.aui-chat .aui-chat-right .aui-chat-name {
float: right;
right: 0.5rem;
text-align: right;
}
.aui-chat .aui-chat-right .aui-chat-content {
background-color: #ffffff;
right: 0.5rem;
float: right;
}
.aui-chat .aui-chat-right .aui-chat-status {
float: right;
right: 0.5rem;
}
.aui-chat-tool {
min-height: 2rem;
}
.aui-chat-tool .eaitWrap {
position: absolute;
right: 4rem;
left: 0;
}
.aui-chat-tool .editArea {
line-height: 1.4rem;
height: 1.4rem;
margin: 0.25rem;
padding: 0 0.25rem;
overflow-y: auto;
overflow-x: hidden;
border: none;
width: 100%;
}
.aui-chat-tool .sendBtn {
line-height: 1.4rem;
height: 1.4rem;
margin: 0.25rem;
position: absolute;
right: 0px;
}
main.js代码
var robotName = 'DataGuru',
robotAvatar = 'robot.jpg',
userName = 'Andy Li',
userAvatar = 'andyli.png',
photoBrowser;
$(function() {
//FastClick
FastClick.attach(document.body);
//chat images click listener
$('.aui-chat').on('click', '.aui-chat-content img', function() {
var items = [],
item = {};
item.image = $(this).attr('src');
item.caption = $(this).attr('alt');
items.push(item);
showPic(items);
});
//send button click listener
$('.sendBtn').on('click', function() {
//send message
sendMsgExt(userAvatar, userName, 'text', $('.editArea').val());
//receive message
switch ($('.editArea').val()) {
case '1':
recvMsgExt(robotAvatar, robotName, 'text', 'What do you want to know about the segments?<br>[11] List all the category of your segments.');
break;
case '11':
recvMsgExt(robotAvatar, robotName, 'image', 'developing', 'developing.jpg');
break;
case '2':
recvMsgExt(robotAvatar, robotName, 'text', 'What the partner info do you want to know?<br>[21] List all the category of your segments.');
break;
case '21':
recvMsgExt(robotAvatar, robotName, 'image', 'developing', 'developing.jpg');
break;
default:
recvMsgExt(robotAvatar, robotName, 'text', 'Hello, I’m DataGuru. What I can help?<br>[1] Segment Consulting<br>[2] Partner Consulting<br>Reply the number of your question. Like “1”.');
}
//empty edit area
$('.editArea').val('');
});
//1 timestamp
timeMsg({
text: new Date().format('yyyy-MM-dd hh:mm:ss')
});
//2 welcome
recvMsgExt(robotAvatar, robotName, 'text', 'Hello, I’m DataGuru. What I can help?<br>[1] Segment Consulting<br>[2] Partner Consulting<br>Reply the number of your question. Like “1”.');
});
function showPic(items) {
photoBrowser = $.photoBrowser({
items: items
});
photoBrowser.open();
}
function sendMsg(data) {
laytpl($('#sendMsg').html()).render(data, function(html) {
$('.aui-chat').append(html);
scrollToMsg();
});
}
function sendMsgExt(_avatar, _userName, _msgType, _text, _image) {
var data = {
avatar: _avatar,
userName: _userName,
msgType: _msgType,
text: _text,
image: _image
};
sendMsg(data);
}
function recvMsg(data) {
laytpl($('#recvMsg').html()).render(data, function(html) {
$('.aui-chat').append(html);
scrollToMsg();
});
}
function recvMsgExt(_avatar, _userName, _msgType, _text, _image) {
var data = {
avatar: _avatar,
userName: _userName,
msgType: _msgType,
text: _text,
image: _image
};
setTimeout(function(){
recvMsg(data)
}, 800);
}
function timeMsg(data) {
laytpl($('#timeMsg').html()).render(data, function(html) {
$('.aui-chat').append(html);
scrollToMsg();
});
}
function scrollToMsg(speed) {
if (!speed) speed = 300;
$('.scroll_page').animate({
scrollTop: $('.scroll_page').scrollHeight()
}, speed);
}
Date.prototype.format = function(format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}
评论 (0)