chat ui html,chat.html · zhousheep/webapp聊天app的前端还在开发中js - Gitee.com

最新推荐文章于 2023-07-30 13:31:51 发布

食草嘚Mingming

最新推荐文章于 2023-07-30 13:31:51 发布

阅读量225

点赞数

文章标签： chat ui html

html,

body {

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

-webkit-touch-callout: none;

-webkit-user-select: none;

}

footer {

position: fixed;

width: 100%;

height: 50px;

min-height: 50px;

border-top: solid 1px #bbb;

left: 0px;

bottom: 0px;

overflow: hidden;

padding: 0px 50px;

background-color: #fafafa;

}

.footer-left {

position: absolute;

width: 50px;

height: 50px;

left: 0px;

bottom: 0px;

text-align: center;

vertical-align: middle;

line-height: 100%;

padding: 12px 4px;

}

.footer-right {

position: absolute;

width: 50px;

height: 50px;

right: 0px;

bottom: 0px;

text-align: center;

vertical-align: middle;

line-height: 100%;

padding: 12px 5px;

display: inline-block;

}

.footer-center {

height: 100%;

padding: 5px 0px;

}

.footer-center [class*=input] {

width: 100%;

height: 100%;

border-radius: 5px;

}

.footer-center .input-text {

background: #fff;

border: solid 1px #ddd;

padding: 10px !important;

font-size: 16px !important;

line-height: 18px !important;

font-family: verdana !important;

overflow: hidden;

}

.footer-center .input-sound {

background-color: #eee;

}

.mui-content {

height: 100%;

padding: 44px 0px 50px 0px;

overflow: auto;

background-color: #eaeaea;

}

#msg-list {

height: 100%;

overflow: auto;

-webkit-overflow-scrolling: touch;

}

.msg-item {

padding: 8px;

clear: both;

}

.msg-item .mui-item-clear {

clear: both;

}

.msg-item .msg-user {

width: 38px;

height: 38px;

border: solid 1px #d3d3d3;

display: inline-block;

background: #fff;

border-radius: 3px;

vertical-align: top;

text-align: center;

float: left;

padding: 3px;

color: #ddd;

}

.msg-item .msg-user-img{

width: 38px;

height: 38px;

display: inline-block;

border-radius: 3px;

vertical-align: top;

text-align: center;

float: left;

color: #ddd;

}

.msg-item .msg-content {

display: inline-block;

border-radius: 5px;

border: solid 1px #d3d3d3;

background-color: #FFFFFF;

color: #333;

padding: 8px;

vertical-align: top;

font-size: 15px;

position: relative;

margin: 0px 8px;

max-width: 75%;

min-width: 35px;

float: left;

}

.msg-item .msg-content .msg-content-inner {

overflow-x: hidden;

}

.msg-item .msg-content .msg-content-arrow {

position: absolute;

border: solid 1px #d3d3d3;

border-right: none;

border-top: none;

background-color: #FFFFFF;

width: 10px;

height: 10px;

left: -5px;

top: 12px;

-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.msg-item-self .msg-user,

.msg-item-self .msg-content {

float: right;

}

.msg-item-self .msg-content .msg-content-arrow {

left: auto;

right: -5px;

-webkit-transform: rotateZ(225deg);

transform: rotateZ(225deg);

}

.msg-item-self .msg-content,

.msg-item-self .msg-content .msg-content-arrow {

background-color: #4CD964;

color: #fff;

border-color: #2AC845;

}

footer .mui-icon {

color: #000;

}

footer .mui-icon:active {

color: #007AFF !important;

}

footer .mui-icon-paperplane:before {

content: "发送";

}

footer .mui-icon-paperplane {

/*-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);*/

font-size: 16px;

word-break: keep-all;

line-height: 100%;

padding-top: 6px;

color: rgba(0, 135, 250, 1);

}

#msg-sound {

-webkit-user-select: none !important;

user-select: none !important;

}

.rprogress {

position: absolute;

left: 50%;

top: 50%;

width: 140px;

height: 140px;

margin-left: -70px;

margin-top: -70px;

background-repeat: no-repeat;

background-position: center center;

background-size: 30px 30px;

background-color: rgba(0, 0, 0, 0.7);

border-radius: 5px;

display: none;

-webkit-transition: .15s;

}

.rschedule {

background-color: rgba(0, 0, 0, 0);

border: 5px solid rgba(0, 183, 229, 0.9);

opacity: .9;

border-left: 5px solid rgba(0, 0, 0, 0);

border-right: 5px solid rgba(0, 0, 0, 0);

border-radius: 50px;

box-shadow: 0 0 15px #2187e7;

width: 46px;

height: 46px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -23px;

margin-top: -23px;

-webkit-animation: spin 1s infinite linear;

animation: spin 1s infinite linear;

}

.r-sigh{

display: none;

border-radius: 50px;

box-shadow: 0 0 15px #2187e7;

width: 46px;

height: 46px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -23px;

margin-top: -23px;

text-align: center;

line-height: 46px;

font-size: 40px;

font-weight: bold;

color: #2187e7;

}

.rprogress-sigh{

}

.rprogress-sigh .rschedule{

display: none !important;

}

.rprogress-sigh .r-sigh{

display: block !important;

}

.rsalert {

font-size: 12px;

color: #bbb;

text-align: center;

position: absolute;

border-radius: 5px;

width: 130px;

margin: 5px 5px;

padding: 5px;

left: 0px;

bottom: 0px;

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

}

@keyframes spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

#h {

background: #fff;

border: solid 1px #ddd;

padding: 10px !important;

font-size: 16px !important;

font-family: verdana !important;

line-height: 18px !important;

overflow: visible;

position: absolute;

left: -1000px;

right: 0px;

word-break: break-all;

word-wrap: break-word;

}

.cancel {

background-color: darkred;

}

chat (聊天窗口)

<%=(item.content)%>

点击播放

手指上滑，取消发送

(function($, doc) {

var MIN_SOUND_TIME = 800;

$.init({

gestureConfig: {

tap: true, //默认为true

doubletap: true, //默认为false

longtap: true, //默认为false

swipe: true, //默认为true

drag: true, //默认为true

hold: true, //默认为false，不监听

release: true //默认为false，不监听

}

});

template.config('escape', false);

//$.plusReady=function(fn){fn();};

$.plusReady(function() {

plus.webview.currentWebview().setStyle({

softinputMode: "adjustResize"

});

var showKeyboard = function() {

if ($.os.ios) {

var webView = plus.webview.currentWebview().nativeInstanceObject();

webView.plusCallMethod({

"setKeyboardDisplayRequiresUserAction": false

});

} else {

var Context = plus.android.importClass("android.content.Context");

var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");

var main = plus.android.runtimeMainActivity();

var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);

imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);

//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);

imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);

//alert("ll");

}

};

var record = [{

sender: 'zs',

type: 'text',

content: 'Hi，我是 MF 专属大白！'

}];

var ui = {

body: doc.querySelector('body'),

footer: doc.querySelector('footer'),

footerRight: doc.querySelector('.footer-right'),

footerLeft: doc.querySelector('.footer-left'),

btnMsgType: doc.querySelector('#msg-type'),

boxMsgText: doc.querySelector('#msg-text'),

boxMsgSound: doc.querySelector('#msg-sound'),

btnMsgImage: doc.querySelector('#msg-image'),

areaMsgList: doc.querySelector('#msg-list'),

boxSoundAlert: doc.querySelector('#sound-alert'),

h: doc.querySelector('#h'),

content: doc.querySelector('.mui-content')

};

ui.h.style.width = ui.boxMsgText.offsetWidth + 'px';

//alert(ui.boxMsgText.offsetWidth );

var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;

var msgItemTap = function(msgItem, event) {

var msgType = msgItem.getAttribute('msg-type');

var msgContent = msgItem.getAttribute('msg-content')

if (msgType == 'sound') {

player = plus.audio.createPlayer(msgContent);

var playState = msgItem.querySelector('.play-state');

playState.innerText = '正在播放...';

player.play(function() {

playState.innerText = '点击播放';

}, function(e) {

playState.innerText = '点击播放';

});

}

};

var imageViewer = new $.ImageViewer('.msg-content-image', {

dbl: false

});

var bindMsgList = function() {

//绑定数据:

/*tp.bind({

element: 'msg-list',

model: record

});*/

ui.areaMsgList.innerHTML = template('msg-template', {

"record": record

});

var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');

[].forEach.call(msgItems, function(item, index) {

item.addEventListener('tap', function(event) {

msgItemTap(item, event);

}, false);

});

imageViewer.findAllImage();

ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;

};

bindMsgList();

window.addEventListener('resize', function() {

ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight + ui.areaMsgList.offsetHeight;

}, false);

var send = function(msg) {

record.push(msg);

bindMsgList();

toRobot(msg.content);

};

var toRobot = function(info) {

var apiUrl = 'http://www.tuling123.com/openapi/api';

$.getJSON(apiUrl, {

"key": '47814f8d68264deb848c87b1e83fff7f',

"info": info,

"userid": plus.device.uuid

}, function(data) {

//alert(JSON.stringify(data));

record.push({

sender: 'zs',

type: 'text',

content: data.text

});

bindMsgList();

});

};

function msgTextFocus() {

ui.boxMsgText.focus();

setTimeout(function() {

ui.boxMsgText.focus();

}, 150);

}

//解决长按“发送”按钮，导致键盘关闭的问题；

ui.footerRight.addEventListener('touchstart', function(event) {

if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {

msgTextFocus();

event.preventDefault();

}

});

//解决长按“发送”按钮，导致键盘关闭的问题；

ui.footerRight.addEventListener('touchmove', function(event) {

if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {

msgTextFocus();

event.preventDefault();

}

});

//ui.footerRight.addEventListener('touchcancel', function(event) {

//if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {

//msgTextFocus();

//event.preventDefault();

//}

//});

//ui.footerRight.addEventListener('touchend', function(event) {

//if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {

//msgTextFocus();

//event.preventDefault();

//}

//});

ui.footerRight.addEventListener('release', function(event) {

if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {

//showKeyboard();

ui.boxMsgText.focus();

setTimeout(function() {

ui.boxMsgText.focus();

}, 150);

//event.detail.gesture.preventDefault();

send({

sender: 'self',

type: 'text',

content: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '
')

});

ui.boxMsgText.value = '';

$.trigger(ui.boxMsgText, 'input', null);

} else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {

ui.btnMsgType.classList.add('mui-icon-compose');

ui.btnMsgType.classList.remove('mui-icon-mic');

ui.boxMsgText.style.display = 'none';

ui.boxMsgSound.style.display = 'block';

ui.boxMsgText.blur();

document.body.focus();

} else if (ui.btnMsgType.classList.contains('mui-icon-compose')) {

ui.btnMsgType.classList.add('mui-icon-mic');

ui.btnMsgType.classList.remove('mui-icon-compose');

ui.boxMsgSound.style.display = 'none';

ui.boxMsgText.style.display = 'block';

//--

//showKeyboard();

ui.boxMsgText.focus();

setTimeout(function() {

ui.boxMsgText.focus();

}, 150);

}

}, false);

ui.footerLeft.addEventListener('tap', function(event) {

var btnArray = [{

title: "拍照"

}, {

title: "从相册选择"

}];

plus.nativeUI.actionSheet({

title: "选择照片",

cancel: "取消",

buttons: btnArray

}, function(e) {

var index = e.index;

switch (index) {

case 0:

break;

case 1:

var cmr = plus.camera.getCamera();

cmr.captureImage(function(path) {

send({

sender: 'self',

type: 'image',

content: "file://" + plus.io.convertLocalFileSystemURL(path)

});

}, function(err) {});

break;

case 2:

plus.gallery.pick(function(path) {

send({

sender: 'self',

type: 'image',

content: path

});

}, function(err) {}, null);

break;

}

});

}, false);

var setSoundAlertVisable=function(show){

if(show){

ui.boxSoundAlert.style.display = 'block';

ui.boxSoundAlert.style.opacity = 1;

}else{

ui.boxSoundAlert.style.opacity = 0;

//fadeOut 完成再真正隐藏

setTimeout(function(){

ui.boxSoundAlert.style.display = 'none';

},200);

}

};

var recordCancel = false;

var recorder = null;

var audio_tips = document.getElementById("audio_tips");

var startTimestamp = null;

var stopTimestamp = null;

var stopTimer = null;

ui.boxMsgSound.addEventListener('hold', function(event) {

recordCancel = false;

if(stopTimer)clearTimeout(stopTimer);

audio_tips.innerHTML = "手指上划，取消发送";

ui.boxSoundAlert.classList.remove('rprogress-sigh');

setSoundAlertVisable(true);

recorder = plus.audio.getRecorder();

if (recorder == null) {

plus.nativeUI.toast("不能获取录音对象");

return;

}

startTimestamp = (new Date()).getTime();

recorder.record({

filename: "_doc/audio/"

}, function(path) {

if (recordCancel) return;

send({

sender: 'self',

type: 'sound',

content: path

});

}, function(e) {

plus.nativeUI.toast("录音时出现异常: " + e.message);

});

}, false);

ui.body.addEventListener('drag', function(event) {

//console.log('drag');

if (Math.abs(event.detail.deltaY) > 50) {

if (!recordCancel) {

recordCancel = true;

if (!audio_tips.classList.contains("cancel")) {

audio_tips.classList.add("cancel");

}

audio_tips.innerHTML = "松开手指，取消发送";

}

} else {

if (recordCancel) {

recordCancel = false;

if (audio_tips.classList.contains("cancel")) {

audio_tips.classList.remove("cancel");

}

audio_tips.innerHTML = "手指上划，取消发送";

}

}, false);

ui.boxMsgSound.addEventListener('release', function(event) {

//console.log('release');

if (audio_tips.classList.contains("cancel")) {

audio_tips.classList.remove("cancel");

audio_tips.innerHTML = "手指上划，取消发送";

}

stopTimestamp = (new Date()).getTime();

if (stopTimestamp - startTimestamp < MIN_SOUND_TIME) {

audio_tips.innerHTML = "录音时间太短";

ui.boxSoundAlert.classList.add('rprogress-sigh');

recordCancel = true;

stopTimer=setTimeout(function(){

setSoundAlertVisable(false);

},800);

}else{

setSoundAlertVisable(false);

}

recorder.stop();

}, false);

ui.boxMsgSound.addEventListener("touchstart", function(e) {

//console.log("start....");

e.preventDefault();

});

ui.boxMsgText.addEventListener('input', function(event) {

ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');

ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');

ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';

ui.footer.style.height = (ui.h.offsetHeight + footerPadding) + 'px';

ui.content.style.paddingBottom = ui.footer.style.height;

});

var focus = false;

ui.boxMsgText.addEventListener('tap', function(event) {

ui.boxMsgText.focus();

setTimeout(function() {

ui.boxMsgText.focus();

}, 0);

focus = true;

setTimeout(function () {

focus = false;

},1000);

event.detail.gesture.preventDefault();

}, false);

//点击消息列表，关闭键盘

ui.areaMsgList.addEventListener('click',function (event) {

if(!focus){

ui.boxMsgText.blur();

}

})

});

}(mui, document));

一键复制

编辑

Web IDE

原始数据

按行查看

历史

食草嘚Mingming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chat ui html,chat.html · zhousheep/webapp聊天app的前端还在开发中js - Gitee.com

html,body {height: 100%;margin: 0px;padding: 0px;overflow: hidden;-webkit-touch-callout: none;-webkit-user-select: none;}footer {position: fixed;width: 100%;height: 50px;min-height: 50px;border-top: s...
复制链接

扫一扫