<div class="productDiscuss">
<div class="title"><span class="pl_title">评论</span></div>
<div class="contBox">
<div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>
<div class="fl right">
<div class="discussArea">
<textarea class="textarea" id="content" placeholder="小李子,说点什么吧~~"></textarea>
</div>
<div class="otherInfo">
<span class="fl btn updateImg">选择图片</span>
<input type="file" class="imgFile" id="updateImg" multiple />
<span class="fr btn submitBtn" id="submitBtn">发布</span>
<span class="fr red Tip" style="display:none;" id="submitBtnTip">请输入内容</span>
</div>
<div class="showPic"> </div>
</div>
</div>
<div class="discussList">
<ul>
</ul>
</div>
</div>
/*评论*/
.productDiscuss{ margin:6px 0 0;}
.productDiscuss .otherInfo{ position:relative; overflow:hidden;}
.productDiscuss .title{ margin-bottom:54px; text-align:center; border-bottom:1px solid #b2b2b2;}
.productDiscuss .pl_title{ position:relative; top:24px; display:inline-block; padding:0 30px; height:48px; line-height:48px; border:1px solid #b2b2b2; color:#2399dc; font-size:30px; background:#fff;}
.productDiscuss .gray{ padding-left:10px; color:#999;}
.productDiscuss .red{ color:#ee1212; cursor:pointer;}
.productDiscuss .Tip{ line-height:36px; cursor:default; padding-right:10px; font-size:12px;}
.productDiscuss .right{ width:625px;}
.productDiscuss .discussList .right{ width:680px; }
.productDiscuss .btn{ display:inline-block; padding:0 15px; height:34px; line-height:34px; border-radius:5px; cursor:pointer;}
.productDiscuss .updateImg{ background:#bbc0c3; border:1px solid #959595; color:#fff; }
.productDiscuss .submitBtn,.productDiscuss .submitBtn2,.productDiscuss .submitBtn3{ padding:0 30px; background:#2399dc; color:#fff; border:1px solid #2399dc;}
.discussList,.contBox{ overflow:hidden;}
.contBox{ margin-bottom:23px; padding:20px 20px 30px; border:1px solid #959595; border-radius:10px; background:#eff5f8;}
.discussList li{ margin-bottom:15px; padding:0 0 20px; border-bottom:1px solid #b2b2b2; overflow:hidden;}
.discussList li:last-child{ border-bottom:none;}
.productDiscuss .picDefault{ padding:0 20px 0 0; width:50px; height:50px; }
.productDiscuss .picDefault img{ width:100%; border-radius:50%; }
.productDiscuss .textarea{ float:left; padding:7px 0 0 7px; width:615px; height:70px; line-height:24px; border-radius:10px; }
.productDiscuss .discussList .textarea{ width:670px; }
.productDiscuss .discussArea{ overflow:hidden; padding-bottom:10px; }
.discussList .info{ font-size:12px; color:#999; }
.discussList .addDiscuss{}
.discussList .otherLY{ overflow:hidden; padding-top:10px;}
.discussList .content{ padding:5px 0; line-height:18px;}
.discussList h5{ font-size:14px;}
.discussList .house{ overflow:hidden; width:660px; margin-top:10px; padding:5px 10px; background:#eee;}
.discussList .house dd{ overflow:hidden; padding:5px 0;}
.discussList .parag{ padding-right:10px; width:590px; color:#333;}
.discussList .huifu{ color:#ee1212; cursor:pointer;}
.discussList .deletedDiscuss,.discussList .deletedDiscuss2{ margin-right:10px;}
.imgFile{ display:inline-block; position:absolute; left:; top:; width:88px; height:36px; filter: alpha(opacity = 0);-moz-opacity:;-khtml-opacity:;opacity:;}
.productDiscuss .showPic{ margin-top:7px;}
.productDiscuss .showPl img{ margin-right:10px;}
//上传图片
$('#updateImg').change(function(){
if (!this.files) {
alert('当前浏览器不支持图片上传,请改用chrome或IE9以上等最新浏览器。');
return false;
}
var len_files = this.files.length,
len_li = $('.showPic span').size();
if(len_files > 5 || len_files + len_li >5){
alert('最多上传5张照片');
return false;
}
for(var i=0; i<len_files; i++){
var reader = new FileReader();
reader.onload = function(e) {
var base64 = e.target.result,
img = '<span class="perBase" style="position:relative; display:inline-block; padding:8px 8px 0 0;">'+
'<img src="'+base64+'" style="width:56px; height:56px;" class="pic"/>'+
'<img src="${pageContext.request.contextPath}/resources/images/close_icon.png" class="deleted" style="display:none; position:absolute; top:0px; right:0px; cursor:pointer; "/>'+
'</span>';
$('.showPic').append(img);
arr_base64.push(base64);
}
reader.readAsDataURL(this.files[i]);
}
}) //删除图片
$('.showPic .deleted').live('click',function(){
var that = $(this);
var index = that.parent().index();
arr_base64.splice(index,1); //删除
that.parent().remove();
$('#updateImg').val('') //清空filelist对象
})
//删除按钮
$('.perBase').live('mouseover',function(){
var pic = $(this).find('.pic');
if(!pic.hasClass('current')){
pic.addClass('current');
}
pic.next().show();
})
$('.perBase').live('mouseleave',function(){
var pic = $(this).find('.pic');
pic.next().hide();
}) //发布带图片的评论
$('#submitBtn').click(function(){
var content = $('#content').val(),
len_bases = arr_base64.length,
img='';
for(var i=0; i<len_bases; i++){
img += '<img src="'+arr_base64[i]+'" style="width:70px; height:60px;" />';
}
var html = '<li>'+
'<div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>'+
'<div class="fl right">'+
'<h5><a href="#">小李子</a></h5>'+
'<div class="content">'+content+'</div>'+
'<div class="showPl">'+img+'</div>'+
'<div class="info">'+
'<span>1小时前</span>'+
'<span class="fr red addDiscuss">评论(0)</span><span class="fr red deletedDiscuss">删除</span>'+
'<div class="otherLY" style="display:none;">'+
'<div class="discussArea"><textarea class="textarea" placeholder="小李子,说点什么吧~~"></textarea></div>'+
'<div style="overflow:hidden;" class="my_din"><span class="fr btn submitBtn2">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span></div>'+
'</div>'+
'<div class="house" style="display:none;">'+
'<dl>'+
'</dl>'+
'</div>'+
'</div>'+
'</div>'+
'</li>'; if(content == ''){
$('#submitBtnTip').show()
return false;
}
$('#submitBtnTip').hide();
$('.discussList ul').prepend(html);
//-----------------------------------------------这里调接口-------------------------------------------------
$.ajax({ }) arr_base64 = []; //清空图片数组
$('.showPic').empty();
$('#updateImg').val('') //清空filelist对象
}) //一级评论展开隐藏按钮
$('.addDiscuss').live('click',function(){
$(this).nextAll('.otherLY').toggle();
}) //回复一级评论
$('.submitBtn2').live('click',function(){
var content = $(this).parents('.my_din').siblings('.discussArea').find('.textarea').val();
var html =
'<dd>'+
'<div class="fl parag"><a href="#">小王子</a>:'+content+'<span class="gray">4天前</span></div>'+
'<span class="fl red deletedDiscuss2">删除</span>'+'<span class="fl huifu">回复</span>'+
'</dd>'; if(content == ''){
$(this).nextAll('.Tip').show();
return false;
}
$(this).parents('.otherLY').nextAll('.house').show().find('dl').prepend(html);
$(this).nextAll('.Tip').hide();
//-----------------------------------------------这里调接口-------------------------------------------------
$.ajax({ })
}) //回复展开隐藏
$(".huifu").live('click',function(){
var list =
'<div class="otherLY otherLy2" style="width:640px;">'+
'<div class="discussArea"><textarea class="textarea" style=" width:630px;" placeholder="小李子,说点什么吧~~"></textarea></div>'+
'<span class="fr btn submitBtn3">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span>'+
'</div>'; if(!$(this).hasClass('current')){
$(this).addClass('current');
$(this).after(list);
}else{
$(this).removeClass('current');
$(this).nextAll('.otherLy2').remove();
}
}) //回复二级和三级评论
$('.submitBtn3').live('click',function(){
var content = $(this).siblings('.discussArea').find('.textarea').val();
var html =
'<dd>'+
'<div class="fl parag"><a href="#">小海子</a>回复了<a href="#">小王子</a>:'+content+'<span class="gray">4天前</span></div>'+
'<span class="fl red deletedDiscuss2">删除</span>'+'<span class="fl red huifu">回复</span>'+
'</dd>'; if(content== ''){
$(this).next('.Tip').show();
return false;
}
$(this).nextAll('.Tip').hide();
$(this).parents('dd').after(html);
$(this).parents().prevAll('.huifu').removeClass('current');
$(this).parents('.otherLy2').remove();
//-----------------------------------------------这里调接口-------------------------------------------------
$.ajax({ })
}) //删除一级评论
$('.deletedDiscuss').live('click',function(){
$(this).parents('li').remove();
//-----------------------------------------------这里调接口-------------------------------------------------
$.ajax({ })
})
//删除二级和三级评论
$('.deletedDiscuss2').live('click',function(){
var len = $(this).parents('.house').find('dd').size() - 1;
if(len == 0){
$(this).parents('.house').hide();
}
$(this).parent().remove();
//-----------------------------------------------这里调接口-------------------------------------------------
$.ajax({ })
})
一个基本jquery的评论留言模块的更多相关文章
-
NetCloud——一个网易云音乐评论抓取和分析的Python库
在17的四月份,我曾经写了一篇关于网易云音乐爬虫的文章,还写了一篇关于评论数据可视化的文章.在这大半年的时间里,有时会有一些朋友给我发私信询问一些关于代码方面的问题.所以我最近抽空干脆将原来的代码整理 ...
-
SeaJS:一个适用于 Web 浏览器端的模块加载器
什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...
-
jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
-
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
-
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...
-
写一个适应所有环境的js模块
说下背景: 在ES6以前,JS语言没有模块化,如何让JS不止运行在浏览器,且能更有效的管理代码, 于是应运而生CommonJS这种规范,定义了三个全局变量: require,exports,modul ...
-
分析一个类似于jquery的小框架
在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...
-
artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
-
jquery星级评论打分组件
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jq ...
随机推荐
-
checkbox与说明文字无法对齐的问题
解决方法: vertical-align:middle; 例:<input type=checkbox id="theId" name=checkbox style=&quo ...
-
[saiku] 登陆/选择cube 时发生了什么
一 登陆saiku时发生了什么 大致流程 saiku 默认有admin和两个开发人员的身份 登陆saiku时,后台用户认证成功后创建了用户信息session 并在session中存储了随机生成的一个s ...
-
luoguP2265 路边的水沟
题目:http://www.luogu.org/problem/show?pid=2265 题解:ans=C(n+m,n)%p 求一下逆元就行 代码: #include<cstdio> # ...
-
svn密码问题
官方书籍version control with svn提到了这个问题: Disabling Password Caching When you perform a Subversion operat ...
-
Oracle 数据备份、恢复以及导入时表空间不存在的解决方案
一.数据备份(导出) 1.exp命令导出dmp文件(exp -help查看帮助信息) 命令:exp username/userpasswd@192.168.99.199/orcl file=C:\jd ...
-
【USB-HID在STM32上的实现】-00-开始
前一段时间参照网上的例程搞了一阵STM32F103的HID程序,改了改例子实现了一个摇杆的外设控制功能.1通道开关量输入,2通道模拟量输入. 之后有空了总结一下,防止忘记.
-
Python学习(二):函数入门
1.函数代码格式: def 函数名(): 函数内容 执行函数:函数名() 2.代码举例: #!/usr/bin/env python #coding=utf-8 #定义函数 def Func1(): ...
-
C#应用程序运行到linux【CentOS】
具体的操作方法在linux.Net中.最近要部署网站在centOS,以及测试下小程序跑到上面.刚好实现了一番 说说C#应用程序如何跑到centOS.非常的简单. 1.准备工具“AnyExec”[工具在 ...
-
Java三种注释
单行注释:// 注释内容 多行注释:/*... 注释内容....*/ 文本注释:/**.. 注释内容....*/ 这种注释可以用来自动地生成文档.在JDK中有个 ...
-
关于oracle的缓冲区机制与HDFS中的edit logs的某些关联性的思考
可能大家会问,oracle和HDFS属于不同场景的存储系统,它们之间为什么会有联系呢?确实,从技术本身来看,他们确实无关联,但利用“整体学习”的思想,跳出技术本身,可以发现Oracle的缓冲区和HDF ...