html5仿QQ聊天界面

dhso
2016/11/10 17:01
统计中

界面截图

QQ聊天界面

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;
}

本文为 dhso 原创

发布在 http://blog.minws.com/html5fang-qqliao-tian-jie-mian/

如有转载,请标明来源!

作者信息
姓名:dhso
热评文章
最新评论
文章概览