调整IM Demo样式
This commit is contained in:
parent
52cfb14dae
commit
897e648b98
@ -10,7 +10,7 @@
|
|||||||
.websocket-container {width: 295px;}
|
.websocket-container {width: 295px;}
|
||||||
.websocket-history-box {height: 400px; border: 1px solid silver; overflow: auto;}
|
.websocket-history-box {height: 400px; border: 1px solid silver; overflow: auto;}
|
||||||
.websocket-box {padding: 5px 0; text-align: right;}
|
.websocket-box {padding: 5px 0; text-align: right;}
|
||||||
.message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;}
|
.message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;word-wrap: break-word; word-break: normal;}
|
||||||
.receive-msg-box {}
|
.receive-msg-box {}
|
||||||
.receive-msg {background-color: #04b304; color: #FFFFFF;}
|
.receive-msg {background-color: #04b304; color: #FFFFFF;}
|
||||||
.send-msg-box {text-align: right;}
|
.send-msg-box {text-align: right;}
|
||||||
@ -104,6 +104,7 @@
|
|||||||
} else if(data.type === 101) {
|
} else if(data.type === 101) {
|
||||||
var body = data.body;
|
var body = data.body;
|
||||||
$('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>');
|
$('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>');
|
||||||
|
autoScrollBottom();
|
||||||
} else if(data.type === 1100) {
|
} else if(data.type === 1100) {
|
||||||
var body = JSON.parse(data.body);
|
var body = JSON.parse(data.body);
|
||||||
$('#'+ data.id).before('<span class="send-status" title="'+ body.msg +'">!</span> ')
|
$('#'+ data.id).before('<span class="send-status" title="'+ body.msg +'">!</span> ')
|
||||||
@ -161,7 +162,7 @@
|
|||||||
websocket.send(JSON.stringify(sendBody));
|
websocket.send(JSON.stringify(sendBody));
|
||||||
$('#websocketHistoryBox').append('<div class="send-msg-box"><div id="'+ sendId +'" class="message send-msg">'+ $('#message').val() +'</div></div>');
|
$('#websocketHistoryBox').append('<div class="send-msg-box"><div id="'+ sendId +'" class="message send-msg">'+ $('#message').val() +'</div></div>');
|
||||||
$('#message').val('');
|
$('#message').val('');
|
||||||
|
autoScrollBottom();
|
||||||
//
|
//
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -174,6 +175,10 @@
|
|||||||
$('#sendBox').hide();
|
$('#sendBox').hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function autoScrollBottom() {
|
||||||
|
var websocketHistoryBox = document.getElementById('websocketHistoryBox');
|
||||||
|
websocketHistoryBox.scrollTop = websocketHistoryBox.scrollHeight;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
Loading…
Reference in New Issue
Block a user