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 } @ ...
随机推荐
- 大到可以小说的Y组合子（三）
答:关于Fix的问题你fix了吗? 问:慢着,让我想想,上次留下个什么问题来着?是说我们有了一个求不动点的函数Fix,但Fix却是显式递归的,是吧? 答:有劳你还记的这个问题. 问:Fix的参与背离了 ...
- [Python学习笔记][第四章Python字符串]
2016/1/28学习内容 第四章 Python字符串与正则表达式之字符串 编码规则 UTF-8 以1个字节表示英语字符(兼容ASCII),以3个字节表示中文及其他语言,UTF-8对全世界所有国家需要 ...
- Common Table Expressions (CTE)
子查询有时使用起来很麻烦,因为所有的过滤和匹配逻辑都必须集成到子查询表达式中.如果只需要执行一个任务,且只需要使用一次杳询表达式,子查询是很好的选择.但子查询不能被重用,也不能很好地支持多个需求.这个 ...
- SQL日期形式转换
在SQL Server中,有时存储在数据库中的日期格式和我们需要显示在页面上的格式不相同,我们需要转化成需要的格式. 特在此总结了一下常用的日期格式. --当前时间 SELECT GETDATE(); ...
- SQL Server根据列名查表
select a.name, b.name from syscolumns a, sysobjects b where a.name = 'XXXX' and a.id = b.id and b.xt ...
- OAuth协议与第三方登录：（ＱＱ，百度，微信，微博）
OAuth 相当于授权的U盾,提供第三方认证的协议,是个安全相关的协议,作用在于,使用户授权第三方的应用程序访问用户的web资源,并且不需要向第三方应用程序透露自己的密码. 传统互联网:应用于PC端, ...
- C# 创建execl文件 并且填充数据
第一步:引用文件 using NPOI.HSSF.UserModel;using System.Data;using CTUClassLibrary;using System.IO;using NPO ...
- c链表结点的删除和添加
#include<stdio.h> #include<stdlib.h> typedef char datetype;/*定义新的数据类型名*/ typedef struct ...
- CodeForces 124B Permutations
http://codeforces.com/problemset/problem/124/B Description You are given nk-digit integers. You have ...
- @Scheduled(cron="") spring定时任务时间设置
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...