php无限级分类实现评论及回复功能(2)

3.view层实现

(1). 展示页面的整体结构设计

实际效果:

页面html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>php无限级分类实战————评论及回复功能</title>
 <link rel="stylesheet" type="text/css" href="/Public/css/comment.css" rel="external nofollow" >
 <script type="text/javascript" src="/Public/js/jquery-1.11.3.min.js" ></script>
 <script type="text/javascript" src="/Public/js/comment.js" ></script>
</head>
<body>

<div class="comment-filed">
 <!--发表评论区begin-->
 <div>
 <div class="comment-num">
 <span>{$num}条评论</span>
 </div>
 <div>
 <div>
 <textarea class="txt-commit" replyid="0"></textarea>
 </div>
 <div class="div-txt-submit">
  <a class="comment-submit" parent_id="0" style="" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span style=''>发表评论</span></a>
 </div> 
 </div>
 </div>
 <!--发表评论区end-->

 <!--评论列表显示区begin-->
 <!-- {$commentlist} -->
 <div class="comment-filed-list" >
 <div><span>全部评论</span></div>
 <div class="comment-list" >
  <!--一级评论列表begin-->
  <ul class="comment-ul"> 
  <volist name="commlist" id="data">   
   <li comment_id="{$data.id}">   
   <div >
   <div>
    <img class="head-pic" src="{$data.head_pic}" alt=""> 
   </div>
   <div class="cm">
    <div class="cm-header">
    <span>{$data.nickname}</span>
    <span>{$data.create_time}</span>
    </div>
    <div class="cm-content">
    <p>
     {$data.content}
    </p>
    </div>
    <div class="cm-footer">
    <a class="comment-reply" comment_id="{$data.id}" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>   
    </div> 
   </div>        
   </div>

   <!--二级评论begin-->
   <ul class="children">
   <volist name="data.children" id="child" >    
   <li comment_id="{$child.id}">   
    <div >
    <div>
     <img class="head-pic" src="{$child.head_pic}" alt=""> 
    </div>
    <div class="children-cm">
     <div class="cm-header">
     <span>{$child.nickname}</span>
     <span>{$child.create_time}</span>
     </div>
     <div class="cm-content">
     <p>
      {$child.content}
     </p>
     </div>
     <div class="cm-footer">    
     <a class="comment-reply" replyswitch="off" comment_id="{$child.id}" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a>
     </div> 
    </div>        
    </div>

    <!--三级评论begin-->
    <ul class="children">
    <volist name="child.children" id="grandson" > 
    <li comment_id="{$grandson.id}">   
     <div >
     <div>
      <img class="head-pic" src="{$grandson.head_pic}" alt=""> 
     </div>
     <div class="children-cm">
      <div class="cm-header">
      <span>{$grandson.nickname}</span>
      <span>{$grandson.create_time}</span>
      </div>
      <div class="cm-content">
      <p>
       {$grandson.content}
      </p>
      </div>
      <div class="cm-footer">    
      <!-- <a class="comment-reply" comment_id="1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a> -->
      </div> 
     </div>        
     </div>
    </li>
    </volist>
    </ul> 
    <!--三级评论end-->

   </li>
   </volist>
   </ul> 
   <!--二级评论end-->

  </li>
  </volist>         
  </ul>
  <!--一级评论列表end-->
 </div> 
 </div>
 <!--评论列表显示区end-->
</div> 
</body>
</html>
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/5912.html