Web App 聊天样式
意见反馈：
@using CommonDB.EF
@model IEnumerable<Pub_ChatLog>
@{
ViewBag.Title = "意见反馈";
bool hasData =Model!=null&&Model.Count() > 0;
}
@section css
{
<style>
.A-bg-body { background-color: #f0f0f0; }
.more { display: block; width: 50%; padding: .5rem 0; margin: .3rem auto 0 auto; cursor:pointer; }
.more[disabled] { color:#999; }
.jtalk1[data-has=False] { margin-top: 1.2rem; } .footer div { overflow: hidden; width: 100%; padding: 0 1rem; }
.footer input { float: left; width: 75%; padding: 0 3%; height: 2rem; margin: .5rem 0; border-radius: .3rem; border: #ddd 1px solid; }
.footer button { float: left; width: 22%; height: 2.2rem; margin: .4rem 0 .4rem 3%; padding: 0; font-size: 1rem; letter-spacing: .1rem; color: white; border-radius: .3rem; } </style>
}
<div class="header A-bg">
<a class="back-btn A-icon-arrow-left A-active"></a>
<h1>@ViewBag.Title</h1>
</div> @if (hasData){<button class="more A-color">查看更多消息</button>}
<dl data-has="@hasData" class="jtalk1">
<dd class="@(null==ViewBag.userID? "" : Model != null && Model.Count() < 6 ? "" : "hide")">
<div class="avatar bounceIn">
<img src="~/Image/Ico/ic_launcher.png">
</div>
<div class="content bounceIn">
<span></span>
<p>您好！欢迎给有心得提供宝贵的意见，我们将根据您的意见不断改进产品。</p>
</div>
</dd>
@if (Model != null && Model.Count() > 0)
{
foreach (Pub_ChatLog item in Model)
{
if (item.fromID.Equals(ViewBag.userID))
{
<dt data-time="@item.sendTime"></dt>
<dd class="reset">
<div class="content bounceIn">
<span></span>
<p>@item.content</p>
</div>
<div class="avatar bounceIn">
<img src="@ViewBag.avatar">
</div>
</dd>
}
else
{
<dt data-time="@item.sendTime"></dt>
<dd>
<div class="avatar bounceIn">
<img src="~/Image/Ico/ic_launcher.png">
</div>
<div class="content bounceIn">
<span></span>
<p>@item.content</p>
</div>
</dd>
}
}
}
</dl>
<div class="footer">
<div>
<input placeholder="我也想说两句">
<button class="A-btn">发送</button>
</div>
</div>
@*<div class="jtextarea-talk">
<input placeholder="我想说两句" />
<button>发送</button>
</div>*@ @section js{
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
var totalPage = parseInt('@ViewBag.page');
var curPage = totalPage;
var fromId = '@ViewBag.userID';
var toId = '@ViewBag.adminID'; var smartTime = (function(){
var parse = function(timeStr) {
var diffTime = new Date().getTime()-new Date(timeStr).getTime();
var diffYear = Math.floor(diffTime/(1000*60*60*24*30.4*12));
var diffMonth = Math.floor(diffTime/(1000*60*60*24*30.4));
var diffDay = Math.floor(diffTime/(1000*60*60*24));
var diffHour = Math.floor(diffTime/(1000*60*60));
var diffMinute = Math.floor(diffTime/(1000*60));
if (diffMinute<0)timeStr="未来时间";
else if (diffMinute<=5)timeStr="刚刚";
else if (diffMinute<=15)timeStr="5分钟前";
else if (diffMinute<=30)timeStr="15分钟前";
else if (diffMinute<60)timeStr="半个小时前";
else if (diffHour<24)timeStr=diffHour+"小时前";
else if (diffDay<30)timeStr=diffDay+"天前";
else if (diffMonth<12)timeStr=diffMonth+"个月前";
else timeStr=diffYear+"年前";
return timeStr;
}
var calc = function(){
$('.jtalk1 dt').each(function(i,o){
var $o = $(o);
var attrName ='data-time';
if($o.text(parse($o.attr(attrName))).text()!=$o.nextAll('dt:first').text(parse($o.nextAll('dt:first').attr(attrName))).text())
$o.nextAll('dt:first').show();
else $o.nextAll('dt:first').hide();
})
if (arguments[0])setTimeout(calc,1*60*1000);
}
return {parse:parse,calc:calc};
})();
smartTime.calc(true); window.scrollTo(0, $(document.body).height());
$('button.more').click(function () {
var $this = $(this);
$this.prop('disabled',true);
$.post('@Url.Action("FeedbackPaging")',{'fromId':fromId,'toId':toId,'page':totalPage-(--curPage)}, function (json) {
$this.prop('disabled',false);
if (json.status) {
var $jtalk = $('.jtalk1');
var isYou = $jtalk.find('dd.reset:eq(0)').prop('outerHTML');
var system = $($jtalk.find('dd:eq(0)').prop('outerHTML')).removeAttr('class').prop('outerHTML');
console.log(json.list)
$.each(json.list,function(i,item){
var nodeStr = item.isYou?isYou:system;
nodeStr='<dt data-time="'+item.time+'"></dt>'+nodeStr;
$('.jtalk1 dd:first').after($(nodeStr).find('p').text(item.content).end());
});
if(curPage==1){//显示第一句问候语
$('.jtalk1 dd:first').removeAttr('class');
$('button.more').removeAttr('class').text('').css('padding','.6rem 0');
}
smartTime.calc();
} else alert(json.content);
},'json');
}); $('.footer button').click(function () {
var $this = $(this);
var content = $(this).prev().val();
if (!content) { alert("发送的内容不能为空！"); return; }
if ('@ViewBag.userID' == '') { alert("当前未登录，请先登录！"); return; }
$this.text('发送中...').prop('disabled',true);
$.post(location.href,{'fromId':fromId,'toId':toId,'content':content}, function (json) {
$this.text('发送').prop('disabled',false);
if (json.status) {
$('.footer input').val('');
$('.jtalk1').append($('<dt data-time="'+json.content+'"></dt>'+$('.jtalk1').find('dd.reset:eq(0)').prop('outerHTML')).find('p').text(content).end());
smartTime.calc();
window.scrollTo(0,$(document).height());
} else alert(json.content);
});
});
</script>
}
asp.net
好友聊天：
@using CommonDB.EF
@model IEnumerable<Pub_ChatLog>
@{
ViewBag.Title = ViewBag.toName;
bool hasData = Model != null && Model.Count() > 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css
{
<style>
.A-bg-body { background-color: #f0f0f0; }
.more { display: block; width: 50%; padding: .5rem 0; margin: .3rem auto 0 auto; cursor: pointer; }
.more[disabled] { color: #999; }
.jtalk1[data-has=False] { margin-top: 1.2rem; }
.jtalk1 b { display: block; margin-top: .3rem; font-weight: normal; color: #bbb; text-align: right; }
</style>
}
<div class="header A-bg">
<a class="back-btn A-icon-arrow-left A-active"></a>
<h1>@ViewBag.Title</h1>
</div> @if (hasData)
{<button class="more A-color">查看更多消息</button>}
<dl data-has="@hasData" class="jtalk1">
<dd class="@(Model!=null&&Model.Count()<6?"":"hide")">
<div class="avatar bounceIn">
<img src="@ViewBag.toAvatar">
</div>
<div class="content bounceIn">
<span></span>
<p>你好，初次见面，很高兴认识你！<b>[自动回复]</b></p>
</div>
</dd>
@foreach (Pub_ChatLog item in Model)
{
if (item.fromID.Equals(ViewBag.userID))
{
<dt data-time="@item.sendTime"></dt>
<dd class="reset">
<div class="content bounceIn">
<span></span>
<p>@item.content</p>
</div>
<div class="avatar bounceIn">
<img src="@ViewBag.avatar">
</div>
</dd>
}
else
{
<dt data-time="@item.sendTime"></dt>
<dd>
<div class="avatar bounceIn">
<img src="@ViewBag.toAvatar">
</div>
<div class="content bounceIn">
<span></span>
<p>@item.content</p>
</div>
</dd>
}
}
</dl> <div class="jtextarea-talk">
<input placeholder="我想说两句" />
<button>发送</button>
</div> @section js{
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
var totalPage = @ViewBag.page;
var curPage = totalPage;
var fromId = '@ViewBag.userID';
var toId = '@ViewBag.toID'; var smartTime = (function(){
var parse = function(timeStr) {
var diffTime = new Date().getTime()-new Date(timeStr).getTime();
var diffYear = Math.floor(diffTime/(1000*60*60*24*30.4*12));
var diffMonth = Math.floor(diffTime/(1000*60*60*24*30.4));
var diffDay = Math.floor(diffTime/(1000*60*60*24));
var diffHour = Math.floor(diffTime/(1000*60*60));
var diffMinute = Math.floor(diffTime/(1000*60));
if (diffMinute<0)timeStr="未来时间";
else if (diffMinute<=5)timeStr="刚刚";
else if (diffMinute<=15)timeStr="5分钟前";
else if (diffMinute<=30)timeStr="15分钟前";
else if (diffMinute<60)timeStr="半个小时前";
else if (diffHour<24)timeStr=diffHour+"小时前";
else if (diffDay<30)timeStr=diffDay+"天前";
else if (diffMonth<12)timeStr=diffMonth+"个月前";
else timeStr=diffYear+"年前";
return timeStr;
}
var calc = function(){
$('.jtalk1 dt').each(function(i,o){
var $o = $(o);
var attrName ='data-time';
if($o.text(parse($o.attr(attrName))).text()!=$o.nextAll('dt:first').text(parse($o.nextAll('dt:first').attr(attrName))).text())
$o.nextAll('dt:first').show();
else $o.nextAll('dt:first').hide();
})
if (arguments[0])setTimeout(calc,1*60*1000);
}
return {parse:parse,calc:calc};
})();
smartTime.calc(true); window.scrollTo(0, $(document.body).height());
$('button.more').click(function () {
var $this = $(this);
$this.prop('disabled',true);
$.post('@Url.Action("TalkPaging")',{'fromId':fromId,'toId':toId,'page':totalPage-(--curPage)}, function (json) {
$this.prop('disabled',false);
if (json.status) {
var $jtalk = $('.jtalk1');
var isYou = $jtalk.find('dd.reset:eq(0)').prop('outerHTML');
var system = $($jtalk.find('dd:eq(0)').prop('outerHTML')).removeAttr('class').prop('outerHTML');
console.log(json.list)
$.each(json.list,function(i,item){
var nodeStr = item.isYou?isYou:system;
nodeStr='<dt data-time="'+item.time+'"></dt>'+nodeStr;
$('.jtalk1 dd:first').after($(nodeStr).find('p').text(item.content).end());
});
if(curPage==1){//显示第一句问候语
$('.jtalk1 dd:first').removeAttr('class');
$('button.more').removeAttr('class').text('').css('padding','.6rem 0');
}
smartTime.calc();
} else alert(json.content);
},'json');
}); $('.jtextarea-talk button').click(function () {
var content = $(this).prev().val();
var $this=$(this);
if (!content) { alert("发送的内容不能为空！"); return; }
if ('@ViewBag.userID' == '') { alert("当前未登录，请先登录！"); return; }
$this.text('发送中...').prop('disabled',true);
$.post(location.href,{'fromId':fromId,'toId':toId,'content':content}, function (json) {
$this.text('发送').prop('disabled',false);
if (json.status) {
$('.jtextarea-talk input').val('');
$('.jtalk1').append($('<dt data-time="'+json.content+'"></dt>'+$('.jtalk1').find('dd.reset:eq(0)').prop('outerHTML')).find('p').text(content).end());
smartTime.calc();
window.scrollTo(0,$(document).height());
} else alert(json.content);
});
});
</script>
}
asp.net
公共样式：
.jtalk1 { overflow: hidden; padding-bottom: 3rem; }
.jtalk1 dt { display: none; float: right; width: 100%; margin-top: 3rem; text-align: center; font-size: .8rem; color: #888; }
.jtalk1 dt:first-of-type { display: block; }
.jtalk1 dd { clear: both; float: left; display: table; border-spacing: .8rem 0; margin: .5rem 0 1rem 0; }
.jtalk1 dd div { display: table-cell; vertical-align: top; }
.jtalk1 img { width: 100%; border-radius: 50%; box-shadow: 0 0 0 .4rem rgba(255, 255, 255, 0.50); }
.jtalk1 .avatar { width: 3rem; }
.jtalk1 .content { position: relative; }
.jtalk1 .content p { padding: .9rem 1rem; background-color: white; min-height: 3rem; box-shadow: 1px 1px 1px 0 #ddd; border-radius: .2rem;}
.jtalk1 div span { position: absolute; left: -.5rem; top: .9rem; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; border-right: .5rem solid white; }
.jtalk1 .reset { float: right; }
.jtalk1 .reset div span { border-right: none; border-left: .5rem solid #FFEFC5; left: auto; right: -.5rem; }
.jtalk1 .reset div p { background-color: #FFEFC5; }
talk
效果图：
Web App 聊天样式的更多相关文章
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- web app开发技巧总结 （share）
(转自http://hi.baidu.com/kuntakinte/item/ca92d6e5edae9fc0bbf37d08) 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联 ...
- web app 自适应方案总结 关键字 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- 移动web app 中的meta 标签
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scal ...
- web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码
来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...
- Web App开发入门
WebApp与Native App有何区别呢? Native App: 1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C. 2.更新体验较差.同时也比较麻烦.每一次发布 ...
- web app 自适应方案总结 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- web app变革之rem
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- web app变革之rem（手机屏幕实现全适配）
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
随机推荐
- 通过AJAX和PHP，提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
- Intel Core i7的整体操作
Intel Core i7的整体操作(我们也称呼为Nehalem,他的项目代码名) 主要分成2个部分-指令控制单元Instruction Control Unit(ICU),负责从存储器读出指令序列, ...
- UVA 221 - Urban Elevations（离散化）!!!!!!
题意:给出一张俯视图.给出N个建筑物的左下标,长度,宽度,高度.现在求,从南面看,能看到那些建筑? Sample Input 14 160 0 30 60 30 125 0 32 28 60 95 0 ...
- （原）安装windows8.1和ubuntu16双系统及相互访问磁盘
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638232.html 参考网址: http://jingyan.baidu.com/article/f ...
- css架构目标:预测，重用，扩展，维护
请参看下面链接: CSS架构目标:预测.重用.扩展.维护
- 解决MYSQL弃用模块错误Deprecated: mysql_query(): The mysql extension is deprecated and will be removed in the future
今天使用了mysql 5.5版本,就出现了错误.错误提示如下: Deprecated: mysql_connect(): The mysql extension is deprecated and w ...
- Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
1,引言 在Python网络爬虫内容提取器一文我们详细讲解了核心部件:可插拔的内容提取器类gsExtractor.本文记录了确定gsExtractor的技术路线过程中所做的编程实验.这是第二部分,第一 ...
- python bottle框架（WEB开发、运维开发）教程
教程目录 一:python基础(略,基础还是自己看书学吧) 二:bottle基础 python bottle web框架简介 python bottle 框架环境安装 python bottle 框架 ...
- 【Xamarin挖墙脚系列：打造独特的Xamarin.IOS开发环境】
苹果的产品,依赖特定的开发环境. Mac + Xcode 不可缺少.所以,必须有Mac系统. 1-虚拟机搭建 2-土豪有Mac电脑设备 但是我觉得还是顺带上Visual Studio才是完美.. ...
- JAVA的类加载器，详细解释
JVM规范定义了两种类型的类装载器:启动内装载器(bootstrap)和用户自定义装载器(user-defined class loader). 一． ClassLoader基本概念 1．ClassL ...