齊博x1內容評論標籤的風格製作
阿新 • • 發佈：2021-11-14
評論的標籤如下:
{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>