//想做个对话框所以有了下面的代码，仅供参考，可能还有不完善的地方，大家
//自己改改吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aichart</title>
<script type="text/javascript" src="/mblog/assets/js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="/mblog/assets/tl/tl.js"></script>-->
<style type="text/css">
.dialog{
width: 600px;
height: 250px;
position:fixed;
right:0;
top:10%
}
.dialog .dialog-right{
width:150px;
height: 250px;
border: 2px solid #C6DAF5;
z-index:999;
position: fixed;
right: 0;
}
.dialog .dialog-left{
width:430px;
height: 250px;
position: fixed;
border: 2px solid #C6DAF5;
z-index:998;
float: right;
}
.dialog .dialog-right .right-title{
width:100%;
height: 10%;
font-size:12pt;
font-weight:bold;
text-align: center;
border: 2px solid #C6DAF5;
background-color: #C6DAF5;
}
.dialog .dialog-right .right-pic{
width:100%;
height: 90%;
background:url(assets/images/ai/timg.png) center;
}
.dialog-left .chart-area{
width: 440px;
height: 250px;
border: #dbdada solid 1px;
-ms-box-shadow: 0 0 5px 0 #dbdada;
-moz-box-shadow: 0 0 5px 0 #dbdada;
-webkit-box-shadow: 0 0 5px 0 #dbdada;
-o-box-shadow: 0 0 5px 0 #dbdada;
box-shadow: 0 0 5px 0 #dbdada;
background: #fff;
overflow: hidden;
position: relative;
z-index:998;
}
.dialog-left .chart-area .roll{
width: 2px;
height: 200px;
position: absolute;
right: 12px;
top: 20px;
background: #ededed;
z-index: 5;
display: none;
}
.chart-area .roll span {
width: 6px;
height: 26px;
background: #ededed;
position: absolute;
left: -2px;
top: 0px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.displayArea {
margin-top: 3px;
width: 430px;
height: 200px;
overflow-y: scroll;
border-bottom: #f0f0f0 solid 1px;
position: relative;
overflow:auto;
}
.rotWord {
width:100%;
height:42px;
margin-bottom: 8px;
}
.rotWord span {
background: url(assets/images/ai/timg.png) no-repeat;
height: 40px;
width: 40px;
background-position: 0 -666px;
float: left;
margin-left: 5px;
}
.rotWord p {
word-break: break-all;
top: 4px;
float: left;
margin-left: 14px;
color: #333;
font-size: 14px;
padding: 2px 15px;
line-height: 18px;
background: #f1f1f1;
-ms-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
position: relative;
max-width: 220px;
}
.mWord {
width:100%;
height:42px;
margin-bottom: 8px;
}
.mWord span {
background: url(assets/images/ai/timg.png) no-repeat;
height: 40px;
width: 40px;
background-position: 0 -626px;
float: right;
margin-right: 5px;
}
.mWord p {
word-break: break-all;
top: 2px;
float: right;
margin-right: 14px;
color: #fff;
font-size: 14px;
padding: 2px 15px;
line-height: 18px;
background: #19b955;
-ms-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
position: relative;
max-width: 210px;
}
.writeArea {
height: 30px;
margin-top: 10px;
}
.writeArea input {
width: 330px;
height: 25px;
line-height: 25px;
float: left;
margin-left: 12px;
border: #d0cfcf solid 1px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
text-indent: 14px;
-ms-box-shadow: 1px 1px 2px 0 #d0cfcf;
-moz-box-shadow: 1px 1px 2px 0 #d0cfcf;
-webkit-box-shadow: 1px 1px 2px 0 #d0cfcf;
-o-box-shadow: 1px 1px 2px 0 #d0cfcf;
box-shadow: 1px 1px 2px 0 #d0cfcf;
font-size: 14px;
}
.writeArea span {
cursor: pointer;
float: left;
margin-left: 12px;
color: #fff;
font-size: 14px;
width: 40px;
height: 25px;
text-align: center;
line-height: 25px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background: #00a3f0;
}
</style>
</head>
<body style="height:1500px">
<div id="ai_chart_dialog" class="dialog">
<div class="dialog-right">
<div class="right-title">小智</div>
<div class="right-pic"></div>
</div>
<div class="dialog-left">
<div class="chart-area">
<div class="roll" style="display: none;"><span class="point" style="top: 0px;"></span></div>
<div class="displayArea" >
<div class="diswap">
<div class="rotWord"> <span></span> <p id="member">小智在此<i></i></p></div>
<div class="mWord"><span></span><p>1<i></i></p></div>
</div>
</div>
<div class="writeArea">
<input type="text" maxlength="200" placeholder="聊点什么吧">
<span >发 送</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tuling_button = $('#ai_chart_dialog .dialog-left .writeArea span');//document.getElementById("tuling_button");
function talk(){
//获取输入值
var input = $('#ai_chart_dialog .dialog-left .writeArea input');//document.getElementById("tuling_input");
var val = input.val();
var tuling_dialog = $('#ai_chart_dialog .dialog-left .displayArea .diswap');//document.getElementById("tuling_dialog");
//添加自己的问题
tuling_dialog.append("<div class='mWord'><span></span><p>"+val+"问题<i></i></p></div>");
//TODO
//添加机器人回话
tuling_dialog.append("<div class='rotWord' ><span></span><p>"+val+"回答<i></i></p></div>");
//滚动条自动到底
$('#ai_chart_dialog .dialog-left .displayArea').scrollTop($('#ai_chart_dialog .dialog-left .displayArea')[0].scrollHeight);// = $('#ai_chart_dialog .dialog-left .displayArea').height();
//清空输入值
input.val("");
}
//绑定回车输入
$('#ai_chart_dialog .dialog-left .writeArea input').bind('keyup', function(event) {
if (event.keyCode == "13") {
//回车执行查询
talk();
}
});
//绑定点击发送时间
$('#ai_chart_dialog .dialog-left .writeArea span').click(function(){
talk();
});
$(function(){
$('#ai_chart_dialog .dialog-left').css('right','-300px');
var expanded = true;
$('#ai_chart_dialog .dialog-right').click(function(){
if(expanded){
$('#ai_chart_dialog .dialog-left').animate({right:'150px'},100);
}else{
$('#ai_chart_dialog .dialog-left').animate({right:'-300px'},100);
}
expanded = !expanded;
});
});
</script>
</body>
</html>乐享：知识积累，快乐无限。
