求助！以下代码如何与chatbox组合在一起？

weichao · 发表于：2015-07-25 22:54:08

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
      /*会话消息容器*/
      #messageList { padding: 15px 0; overflow: hidden;}
      /*接收消息类，左侧*/
      .receiver{ clear:both;}
      .receiver .receiver-avatar{float: left;}
      .receiver .receiver-avatar img { width: 50px; height: 50px;}
      .receiver .receiver-cont{background-color: #faff72; float: left;margin: 0 20px 10px 15px; padding: 10px; border-radius:7px; max-width: 60%; position: relative;}
      .receiver .status { width: 30px; height: 30px; position: absolute; right: -35px; top: 3px;}
      /*发送消息类，右侧*/
      .sender{clear:both;}
      .sender .status { width: 30px; height: 30px; position: absolute; left: -35px; top: 3px; font-size: 18px; font-weight: 700; color: #990000;}
      .sender .status img { width: 30px; height: 30px;}
      .sender .sender-avatar{float: right;}
      .sender .sender-avatar img { width: 50px; height: 50px;}
      .sender .sender-cont{float:right; background-color: #15b5e9; margin: 0 10px 10px 20px; padding: 10px; border-radius:7px; color: #ffffff; max-width: 60%; position: relative;}
      .left_triangle{ height:0px; width:0px; border-width:8px; border-style:solid; border-color:transparent #faff72 transparent transparent; position: absolute; left:-16px; top:6px; }
      .right_triangle{ height:0px; width:0px; border-width:8px; border-style:solid; border-color:transparent transparent transparent #15b5e9; position: absolute; right:-16px; top:6px;}
</style>
</head>
<body>
<div id="messageList">
<div class="sender">
         <div class="sender-avatar">
                  <img src="picture1.jpg">
         </div>
         <div class="sender-cont">
                  <div class="right_triangle"></div>
                  <span>发送内容</span>
                  <div class="status"></div>
         </div>

</div>
<div class="receiver">

         <div class="receiver-avatar">
                  <img src="picture2.jpg">
         </div>
         <div class="receiver-cont">
                  <div class="left_triangle"></div>
                  <span>发送内容</span>
         </div>
</div>
</div>
</body>
</html>
以上代码效果如下：
请问第三方模块chatbox如何使用啊？没有头绪呢？

流浪男

已UIChatBox为例子吧：

var obj = api.require('UIChatBox');
obj.open({
placeholder: '',
maxRows: 4,
emotionPath: '表情文件路径',
styles: {
      inputBar: {
         borderColor: '#d9d9d9',
         bgColor: '#f2f2f2'
      },
      inputBox: {
         borderColor: '#B3B3B3',
         bgColor: '#FFFFFF'
      },
      emotionBtn: {
         normalImg: 'widget://image/chatBox/face1.png'
      },
      keyboardBtn: {
         normalImg: 'widget://image/chatBox/key1.png'
      }
}
},function(ret,err){
if(ret.eventType=='send'){
      //点击发送后的处理
      var html = '';
      html += '<div class="sender">';
         html += '<div class="sender-avatar"><img src="picture1.jpg"></div>';
         html += '<div class="sender-cont">';
            html += '<div class="right_triangle"></div>';
            html += '<span>'+ret.msg+'</span>';
         html += '</div>';
      html += '</div>';
      $api.append($api.byId('messageList'),html);

}
});

weichao

上面代码效果图

weichao

流浪男发表于 2015-7-25 23:07
已UIChatBox为例子吧：

谢谢啦大神

我研究研究，其实我上面的代码也是偷得您的

weichao

本帖最后由 weichao 于 2015-7-26 14:01 编辑

流浪男发表于 2015-7-25 23:07
已UIChatBox为例子吧：

var obj = api.require('UIChatBox'); 为什么总是提示这句有错误呢？
并且我已经将第三方的UIchatbox添加到feature中了啊？

搞定了，原来是忘了初始化了

xpjc

weichao 发表于 2015-7-26 13:05
var obj = api.require('UIChatBox'); 为什么总是提示这句有错误呢？
并且我已经将第三方的UIchatbox添加 ...

xiaoniqiu2015

值得学习

求助！以下代码如何与chatbox组合在一起？ [复制链接]

浏览过的版块