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 } @ ...
随机推荐
- 谷歌推出情境感知API
在 Google I/O 2016 大会上,我们宣布推出新的 Google Awareness API,让您的应用可以利用快照和围栏智能应对用户情境,并且仅需占用极少量的系统资源. 所有开发者均可以通 ...
- [HeadFirst-HTMLCSS学习笔记][第八章扩大你的词汇量]
字体 font-family,可指定多个候选 body{ font-family:Verdana,Geneva,Arial,sans-serif; } font-size 字体大小 body{ fon ...
- [core java学习笔记][第十章部署应用程序]
第10章 部署应用程序和applet jar文件 Java Web Start 10.1 jar文件 jar文件就是一个压缩了类,图像和声音的ZIP压缩文件 创建一个新的JAR文件应该使用的常见命令格 ...
- 利用MetaWeblog API 自制博客发布小工具
博客园提供了诸多数据接口, 利用这些接口可以很容易的实现博客的发布,修改,删除等 1.需要引用一个DLL:为CookComputing.XmlRpcV2 2.新建一个类,在其中是一些要实现的东西,如: ...
- eclipse中运行tomcat找不到jre的解决办法
一.在eclipse中选择 window--->preferences 二.runtime environment ----->edit 三.在这个地方就可以进行选择jre了.
- SPOJ 4206 Fast Maximum Matching (二分图最大匹配 Hopcroft-Carp 算法 模板)
题目大意: 有n1头公牛和n2头母牛,给出公母之间的m对配对关系,求最大匹配数.数据范围: 1 <= n1, n2 <= 50000, m <= 150000 算法讨论: 第一反应 ...
- VS2010无法断点调试解决办法
今天我的VS2010忽然出现设置断点的时候,无法进行调试.现象:每次在设置断点调试的时候都会出现卡机,然后VS弹出如下图所示的状况: 解决办法: 依次点击:“工具-->扩展管理器”然后找到.Ne ...
- SSH 5W学习
what SSH的英文全称为Secure Shell,是IETF(Internet Engineering Task Force)的Network Working Group所制定的一族协议,其目的是 ...
- SQL实现递归及存储过程中In()参数传递解决方案[转]
SQL实现递归及存储过程中In()参数传递解决方案 1.SQL递归 在SQL Server中,我们可以利用表表达式来实现递归算法,一般用于阻止机构的加载及相关性处理. -->实现: 假设 ...
- php 实现传入参数的传出
类似于.net的out功能,php中可以使用&实现 如下示例: <?php$x=2; inOutFunction($x); function inOutFunction(&$x) ...