ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

齐博x1内容评论标签的风格制作

2021-11-14 09:32:10  阅读：159  来源： 互联网

标签：comment layer 齐博 标签 content 评论 res var x1


评论的标签如下:

{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}" one rror="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}" one rror="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>

标签：comment,layer,齐博,标签,content,评论,res,var,x1
来源： https://www.cnblogs.com/wanxiangsucai/p/15550735.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有