评论模块_GJ-UI前端组件

发布时间::2018-06-02 11:57:57 已收录 阅读:557次

将将下列html代码复制粘贴在html文件的相应位置即可(可参考组件附带index.html文件中相应的注释说明位置);

评论模块[gj-pl]:

HTML代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-commenting" aria-hidden="true"></i> 评论区</h3>
    </div>
    <div class="gj-body gj-pl">
        <div class="comment">
            <div class="com_form">
                <form action="/comment/index/init.html" method="post" onsubmit="return check_comm(this)">
                    <input type="hidden" name="modelid" value="1">
                    <input type="hidden" name="catid" value="2">
                    <input type="hidden" name="id" value="3">
                    <input type="hidden" name="title" value="测试标题位置内容">
                    <input type="hidden" name="url" value="">
                    <textarea class="textarea" id="content" name="content" placeholder="我来说两句~"></textarea>
                    <p><input type="submit" class="sub_btn" name="dosubmit" value="提交"><span class="emotion">表情</span></p>
                </form>
            </div>
        </div>
    </div>
    <div class="gpl-bt">
        共0条评论
    </div>
    <ul class="gpl-ul">
        <li>
            <div class="gpl-user">
                <a href="javascript:()"><img src="images/tx.jpg" alt=""></a>
                <a href="javascript:()">
                    <h4>游客A</h4>
                </a>
            </div>
            <p class="gpl-cont">这里是评论的内容部分这里是评论的内容部分
                <img src="images/biaoqing.gif" alt="">这里是评论的内容部分...</p>
            <div class="gpl-list">
                <p><span>2018-01-15</span><a href="javascript:()">回复</a></p>
            </div>
        </li>
        ...
    </ul>
</div>

javascript代码:

<script type="text/javascript" src="http://demo.yzmcms.com/common/static/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://demo.yzmcms.com/common/static/js/js.js"></script>
<script type="text/javascript" src="http://demo.yzmcms.com/common/static/js/jquery.qqFace.js"></script>
<script type="text/javascript">
 $(function() {
 //评论QQ表情
 $('.emotion').qqFace({
 assign: 'content',
  path: 'http://demo.yzmcms.com/common/static/images/face/'

    });
  });
</script>

YzmCMS代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-commenting" aria-hidden="true"></i> 评论区</h3>
    </div>
    <div class="gj-body gj-pl">
        <div class="comment">
            <div class="com_form">
                <form action="{U('comment/index/init')}" method="post" onsubmit="return check_comm(this)">
                    <input type="hidden" name="modelid" value="{$modelid}">
                    <input type="hidden" name="catid" value="{$catid}">
                    <input type="hidden" name="id" value="{$id}">
                    <input type="hidden" name="title" value="{$title}">
                    <input type="hidden" name="url" value="{$url}">
                    <textarea class="textarea" id="content" name="content" placeholder="朕有话要说~"></textarea>
                    <p><input type="submit" class="sub_btn" name="dosubmit" value="提交"><span class="emotion">表情</span></p>
                </form>
            </div>
        </div>
    </div>
    <div class="gpl-bt">
        {m:comment_list modelid="$modelid" catid="$catid" id="$id" limit="20"} 共{count($data)}条评论
    </div>
    <ul class="gpl-ul">
       {loop $data $v}
       <li>
         <div class="gpl-user">
            <a href="{U('member/myhome/init', array('userid'=>$v['userid']))}" target="_blank">
            <img class="gpl-tx" src="{if !empty($v['userpic'])}{$v[userpic]}{else}{STATIC_URL}images/default.gif{/if}" alt=""></a>
            <a href="{U('member/myhome/init', array('userid'=>$v['userid']))}" target="_blank">
              <h4>{if $v[userid]}{$v[username]}{else}游客 - 网站名称{/if}</h4>
            </a>
         </div>
         <p class="gpl-cont">{nl2br($v['content'])}</p>
         <div class="gpl-list">
             <p><span>{date('Y-m-d H:i:s',$v['inputtime'])}</span><a href="javascript:toreply('{$v[id]}');">回复</a></p>
             <div id="rep_{$v[id]}" class="none">
                <form action="{U('comment/index/init')}" method="post" onsubmit="return check_rep(this)">
                    <input type="hidden" name="modelid" value="{$modelid}">
                    <input type="hidden" name="catid" value="{$catid}">
                    <input type="hidden" name="id" value="{$id}">
                    <input type="hidden" name="title" value="{$title}">
                    <input type="hidden" name="url" value="{$url}">
                    <input type="hidden" name="reply" value="{$v[id]}">
                    <input type="hidden" name="reply_to" value="{$v[username]}">
                    <textarea name="content" class="textarea textarea2" placeholder="我来说两句~"></textarea>
                    <input type="submit" class="sub_btn static" name="dosubmit" value="提交">
                </form>
             </div>
          </div>
         </li>
       {/loop} {if empty($data)}
       <li>再精彩的文章也需要精湛的评论才能称得上完美~</li>{/if} 
    </ul>
</div>

组件说明:

类[gj-pl]评论组件目前针对YzmCMS的兼容最好,如果需要原生评论组件的话,建议使用目前全网最常用的畅言评论系统(需要域名备案才可以使用);有关畅言评论的具体使用教程,请参考本站动态栏目下的相关内容即可!