内容评论的风格制作
2018-06-09 22:54:51
788
收藏
管理
评论的标签如下:
{qb:comment name="xxxxx" rows='5'}
HTML代码片段
{/qb:comment}评论涉及到的元素有{posturl} 这个是代表POST评论内容到哪个网址{pageurl} 这个是代表显示更多页评论的地址
基本流程, 一个是评论区的内容. 一个是提交按钮.一个是数据提交处理事件
其中
<textarea name="textfield" id="comment_content"></textarea>
这个是评论区的内容. 这里的元素有一个 id="comment_content" 方便JS事件获取里边的内容
面下面这个就是评论按钮
<input type="button" name="Submit" value="发表留言" onclick="post_commentPc()">
这里有一个点击事件 post_commentPc()
他是JS处理评论事件
下面这段就是表单POST的JS处理事件
<script type="text/javascript">
var posturl = "{posturl}"; //POST数据到指定网址
var commentpage = 1; //默认显示第一页的数据
var havepost = false; //做个标志,不要重复提交数据
//POST评论内容
function post_commentPc(){ if(havepost===true){
layer.alert("请不要重复提交数据"); return ;
} var contents = $('#comment_content').val(); //获取评论内容
if(contents==''){
layer.alert("请输入评论内容！");
}else{
havepost = true; //做个标志,不要重复提交
$.post(
posturl, //提交到指定网址
{content:contents}, //提交的评论内容
function(res,status){
if(res.code==0){ //评论成功
$('#comment_content').val(''); //清空评论区的内容
$('#show_comment').html(res.data); //把返回的新的评论数据重新显示在网页上
commentpage = 1; //恢复到第一页
layer.msg('发表成功！');
HiddenShowMoreComment(); //这里统计是否有分页,这个可删除
}else{ //评论失败
layer.alert('评论发表失败:'+res.msg);
}
havepost = false; //允许再次发表评论
}
);
}
}</script>发表评论这一块的完整代码如下:
<div class="PostComment">
<div class="head">我要留言</div>
<dl>
<dt>内容:</dt>
<dd>
<textarea name="textfield" id="comment_content"></textarea>
</dd>
</dl>
<div class="sub">
<input type="button" name="Submit" value="发表留言" onclick="post_commentPc()">
</div>
</div><script type="text/javascript">
var posturl = "{posturl}"; //POST数据到指定网址
var commentpage = 1; //默认显示第一页的数据
var havepost = false; //做个标志,不要重复提交数据
//POST评论内容
function post_commentPc(){ if(havepost===true){
layer.alert("请不要重复提交数据"); return ;
} var contents = $('#comment_content').val(); //获取评论内容
if(contents==''){
layer.alert("请输入评论内容！");
}else{
havepost = true; //做个标志,不要重复提交
$.post(
posturl, //提交到指定网址
{content:contents}, //提交的评论内容
function(res,status){
if(res.code==0){ //评论成功
$('#comment_content').val(''); //清空评论区的内容
$('#show_comment').html(res.data); //把返回的新的评论数据重新显示在网页上
commentpage = 1; //恢复到第一页
layer.msg('发表成功！');
HiddenShowMoreComment(); //这里统计是否有分页,这个可删除
}else{ //评论失败
layer.alert('评论发表失败:'+res.msg);
}
havepost = false; //允许再次发表评论
}
);
}
}</script>下面这个图是显示评论内容的处理
代码如下:id="show_comment" 给DIV定义一个容器存放更多页的评论显示
{volist name="listdb" id="rs"} 代码段 {/volist} 这里是把默认第一页的评论循环显示出来
onclick="Show_MoreComment()" 这个是点击事件,显示更多评论
{pageurl} 这个是评论更多数据的调用地址
<div class="ShowComment">
<div class="head">用户留言</div>
<div id="show_comment">
{volist name="listdb" id="rs"} <div class="ListComment">
<dl>
<dt><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></dt>
<dd>{$rs.content}</dd>
</dl>
<div class="moreinfo">
称呼:{$rs.username} 日期:{$rs.time} <A HREF="#">删除</A>
</div>
</div>
{/volist} </div>
<div class="ShowMoreComment" style="text-align:center;margin:10px;"><button style="padding:8px;background:Orange;border:1px solid #fff;color:#fff;" type="butter" onclick="Show_MoreComment()">更多评论 <i class="fa fa-angle-double-down"></i></button></div>
</div>
<br><script type="text/javascript">
//显示更多数据
function Show_MoreComment(){
commentpage++;
$.get('{pageurl}?page='+commentpage,function(res){ if(res.code==0){ if(res.data==''){
layer.msg('显示完了！');
$('.ShowMoreComment button').hide();;
}else{
$('#show_comment').append(res.data); //更多评论数据调用成功,追加显示
}
}else{
layer.msg(res.msg,{time:2500});
}
});
}
//判断是否有更多页数据
function HiddenShowMoreComment(){ var Comments=$('#show_comment .ListComment').length; if(parseInt(Comments/{$cfg_array.rows})<1){
$('.ShowMoreComment').hide();
}else{
$('.ShowMoreComment').show();
}
}
HiddenShowMoreComment();</script>评论的完整代码如下
<div class="PostComment">
<div class="head">我要留言</div>
<dl>
<dt>内容:</dt>
<dd>
<textarea name="textfield" id="comment_content"></textarea>
</dd>
</dl>
<div class="sub">
<input type="button" name="Submit" value="发表留言" onclick="post_commentPc()">
</div>
</div><script type="text/javascript">
var posturl = "{posturl}"; //POST数据到指定网址
var commentpage = 1; //默认显示第一页的数据
var havepost = false; //做个标志,不要重复提交数据
//POST评论内容
function post_commentPc(){ if(havepost===true){
layer.alert("请不要重复提交数据"); return ;
} var contents = $('#comment_content').val(); //获取评论内容
if(contents==''){
layer.alert("请输入评论内容！");
}else{
havepost = true; //做个标志,不要重复提交
$.post(
posturl, //提交到指定网址
{content:contents}, //提交的评论内容
function(res,status){
if(res.code==0){ //评论成功
$('#comment_content').val(''); //清空评论区的内容
$('#show_comment').html(res.data); //把返回的新的评论数据重新显示在网页上
commentpage = 1; //恢复到第一页
layer.msg('发表成功！');
HiddenShowMoreComment(); //这里统计是否有分页,这个可删除
}else{ //评论失败
layer.alert('评论发表失败:'+res.msg);
}
havepost = false; //允许再次发表评论
}
);
}
}</script>
<div class="ShowComment">
<div class="head">用户留言</div>
<div id="show_comment">
{volist name="listdb" id="rs"} <div class="ListComment">
<dl>
<dt><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></dt>
<dd>{$rs.content}</dd>
</dl>
<div class="moreinfo">
称呼:{$rs.username} 日期:{$rs.time} <A HREF="#">删除</A>
</div>
</div>
{/volist} </div>
<div class="ShowMoreComment" style="text-align:center;margin:10px;"><button style="padding:8px;background:Orange;border:1px solid #fff;color:#fff;" type="butter" onclick="Show_MoreComment()">更多评论 <i class="fa fa-angle-double-down"></i></button></div>
</div>
<br><script type="text/javascript">
//显示更多数据
function Show_MoreComment(){
commentpage++; //第几页
$.get('{pageurl}?page='+commentpage,function(res){ if(res.code==0){ if(res.data==''){
layer.msg('显示完了！');
$('.ShowMoreComment button').hide();;
}else{
$('#show_comment').append(res.data); //更多评论数据调用成功,追加显示
}
}else{
layer.msg(res.msg,{time:2500});
}
});
}
//判断是否有更多页数据 , 并不重要
function HiddenShowMoreComment(){ var Comments=$('#show_comment .ListComment').length; if(parseInt(Comments/{$cfg_array.rows})<1){
$('.ShowMoreComment').hide();
}else{
$('.ShowMoreComment').show();
}
}
HiddenShowMoreComment();</script>
上一页：二次开发的灵魂fun函数
下一页：阿里云短信配置
全部评论(0)
