內容評論的風格制作 · 齊博CMS之X1

評論的標簽如下: ~~~ {qb:comment name="xxxxx" rows='5'} HTML代碼片段 {/qb:comment} ~~~ 評論涉及到的元素有 `{posturl}` 這個是代表POST評論內容到哪個網址 `{pageurl}` 這個是代表顯示更多頁評論的地址基本流程, 一個是評論區的內容. 一個是提交按鈕.一個是數據提交處理事件 ![](https://box.kancloud.cn/04485a8b9747054111c2361a7cc0ba01_1337x848.png) 其中 ~~~ <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> ~~~ 下面這個圖是顯示評論內容的處理 ![](https://box.kancloud.cn/740cc7360fad76232246714419728f1b_1627x832.png) 代碼如下: `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> ~~~