一个基本jquery的评论留言模块
<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 ...
随机推荐
- 文件TEXTBOX
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 用JAVA写一个函数,功能例如以下： 随意给定一组数, 找出随意数相加之后的结果为35(随意设定)的情况
用JAVA写一个函数.功能例如以下:随意给定一组数,比如{12,60,-8,99,15,35,17,18},找出随意数相加之后的结果为35(随意设定)的情况. 能够递归算法来解: package te ...
- android实现弧形进度表盘效果
附件:Cirbar.rar
- POJ 1329
三角外接圆
Circle Through Three Points Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3169 Acce ...
- 学习笔记之Lucene
http://baike.baidu.com/view/371811.htm?fr=aladdin Apache Lucene(http://lucene.apache.org/) Java 全文搜索 ...
- [Effective C++ --005]了解C++默默编写并调用哪些函数
<前言>编译器是个十分敬业的工作者,不但为你编译代码,甚至为你生成代码,不可思议吧.本文主要介绍编译器究竟会为我们生成和调用哪些代码. <空类和非空类>如果问什么样的类是空类? ...
- (原)nginx 源码编译
要在nginx上开发,所以先了解下这个是干嘛的..百度一下很多 编译源码需要的组件 1.zlib 2.pcre 3.openssl 使用ubuntu的话.可以直接使用 sudo apt-get ins ...
- 如何打开“USB调试”模式？
请首先确认您的系统版本, 点击「设置」-「关于手机」查看您当前的手机版本号. 如果您使用的是 Android 3.2及以下系统,请按以下步骤操作: STEP1:在应用列表选择「设置」进入系统设置菜单: ...
- C# 之 读取Word时发生 “拒绝访问” 及 “消息筛选器显示应用程序正在使用中” 异常的处理
1.Asp.net中建立Microsoft.Office.Interop.Word.Application时出现 “ 拒绝访问 ” 错误 项目中要实现在服务器端打开一个Word模版文件,修改其内容后再 ...
- js中数组内置方法
var arr = ['A','B','C','D']; length 计算数组的长度 arr.length//4 indexOf() 搜索一个指定的元素的位置 arr.indexOf('C');// ...