内容评论的风格制作

评论的标签如下:
~~~
{qb:comment name="xxxxx" rows='5'}
			HTML代码片段
{/qb:comment}
~~~
评论涉及到的元素有
`{posturl}`  这个是代表POST评论内容到哪个网址
`{pageurl}` 这个是代表显示更多页评论的地址

基本流程,  一个是评论区的内容. 一个是提交按钮.一个是数据提交处理事件

![](https://box.kancloud.cn/04485a8b9747054111c2361a7cc0ba01_1337x848.png)

其中
~~~

~~~
这个是评论区的内容. 这里的元素有一个 `id="comment_content"` 方便JS事件获取里边的内容

面下面这个就是评论按钮
~~~

~~~

这里有一个点击事件 `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>
~~~

发表评论这一块的完整代码如下:

~~~
        
            我要留言
            
                内容:
                
                    
                
            
            
                
            
        
<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>
~~~

下面这个图是显示评论内容的处理

![](https://box.kancloud.cn/740cc7360fad76232246714419728f1b_1627x832.png)

代码如下:
`id="show_comment"` 给DIV定义一个容器存放更多页的评论显示

`{volist name="listdb" id="rs"} 代码段 {/volist}` 这里是把默认第一页的评论循环显示出来

`onclick="Show_MoreComment()"` 这个是点击事件,显示更多评论

`{pageurl}` 这个是评论更多数据的调用地址

~~~
        
            用户留言            
            
			{volist name="listdb" id="rs"}
                
                    
                        </a>
                        {$rs.content}
                    
                    
                        称呼:{$rs.username} 日期:{$rs.time}
                        删除</A> 
                    
                
			{/volist}
            
			更多评论

HiddenShowMoreComment();
</script>
~~~

评论的完整代码如下

HiddenShowMoreComment();
</script>
~~~

本文链接：https://x1.wanxiangsucai.com/read/215.html

推荐内容评论的风格制作

相关文章推荐

齐博X1教程专栏最新文章

齐博X1教程专栏文章推荐

建站工具推荐

您可能感兴趣的文章