齐博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}" 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>

巴特西

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

最新文章

热门文章