评论部分代码

        <!--评论开始-->
        <script type="text/javascript" src="{dede:field name='templeturl'/}/blackair/js/action.js"></script>
        <div class="user_guset">
            <div class="user_cont">
                <div id="comment" class="title">
                    <span id="ajaxBackMsg">评论不能超过250字，请自觉遵守互联网相关政策法规。</span>
                </div>
                    <input type="hidden" id="arcID" name="arcID" value="{dede:field name="id"/}" />
                    <input name="notuser" type="hidden" value="1" />
                    <input name="isconfirm" type="hidden" value="1" />
                    <ul class="face">
                        <li class="textarea">
                            <textarea name="msg" id="comment_text" style="width:650px" onfocus="TexFocus(this)"
                                wrap="physical" rows="" cols=""
                                onkeydown="if(submitForm())commSubmit()">请在这里输入您要发表的评论信息</textarea>
                        </li>
                    </ul>
                    <p class="input">
                        <label>昵称</label>
                        <input id="username" class="inp" type="text" maxlength="8" name="username" onkeydown="if(submitForm())commSubmit()" />
                        <label>验证码</label>
                        <input id="validate" class="yz" type="text" _base_target="_self" maxlength="4" value="" name="validate" onkeydown="if(submitForm())commSubmit()" />
                        <label><img id="code_pic" style="display:none;"
                            onclick="this.src='/include/validateimg.php?'+Math.random()" alt="看不清楚？请点击这里刷新。" /></label>
                        <input name="按钮" type="button" onclick="commSubmit()" class="but" value="提交 CTRL+回车"/>
                    </p>
                <div id="comm_content">
                    <img src="{dede:field name='templeturl'/}/blackair/images/loading.gif" alt="loading.." />
                    评论加载中....
                </div>
            </div>
        </div>
        <script language="javascript">
        loadfeeback({dede:field name=ID/},1);
        function AjaxPage(p){loadfeeback({dede:field name=ID/},p)}
        </script>   
        <!--评论结束-->   

评论部分CSS

/* user guset */
.user_guset{padding:4px;margin-bottom:5px;}
.user_cont .title{height:30px;line-height:30px; border:1px solid #E9E9E9;}
.user_cont .title span{float:left;font-weight:bold; padding-left:10px;}
.user_cont .title p{ float:right;padding-right:10px;}
.user_cont ul.face{ height:32;overflow:auto;margin:0px 10px 10px 10px;}
.user_cont ul.face li{ float:left; width:32px; height:32px; margin:0 4px 0 5px; line-height:30px; display:inline;}
.user_cont ul.face li img{ cursor:pointer;display:block;}
.user_cont ul.face li.tit{ width:16px; text-align:center; font-size:16px; font-weight:bold}
.user_cont ul.face li.tit a,.user_cont ul.face li.tit a:visited{display:block; width:16px; height:30px}
.user_cont ul.face li.tit a:hover{ text-decoration:none;}
.user_cont ul.face li.textarea{height:auto;text-align:right; margin-bottom:10px;padding-top:10px}
.user_cont ul.face li.textarea textarea{ width:420px; height:138px; padding:5px; line-height:19px; font-size:12px;}
.user_cont p.input{ height:25px; line-height:25px; padding-left:20px; margin-bottom:15px;}
.user_cont p.input img{ float:left; }
.user_cont p.input input{ float:left; margin:0 5px;}
.user_cont p.input .inp{height:17px; width:78px;padding-top:6px; font-size:12px;padding-left:5px; padding-right:5px;}
.user_cont p.input .yz{height:19px; width:38px; padding-top:4px;padding-left:5px; padding-right:5px;font-size:12px; }
.user_cont p.input .but{ border:0; width:121px; height:25px; font-size:12px; padding-top:3px; cursor:pointer}
.user_cont p.input label{ float:left; }


user_guset{background-color:#F7F7F7;}
.user_cont{background-color:#fff; border:1px solid #E9E9E9;}
.user_cont p a,user_cont a:visited{color:#0093BB;}
.user_cont ul.face li.tit{ color:#999;}
.user_cont ul.face li.tit a,.user_cont ul.face li.tit a:visited{ color:#0093BB; display:block;}
.user_cont ul.face li.textarea textarea{border:1px solid #ddd; color:#999; }
.user_cont ul.wl_commInput li.textarea textarea{border:1px solid #ddd; color:#999;}
.user_cont p.input .inp{border:1px solid #ddd;color:#999;}
.user_cont p.input .yz{border:1px solid #ddd;color:#999;}
.user_cont p.input .but{ background:url(../img/but.jpg) no-repeat; border:0;}
.user_cont .pages p a,.user_cont .pages p a:visited{ color:#0093BB;}
.user_cont .pages p a.active,.user_cont .pages p a.active:visited{ color:#ff0000;}

/*评论列表*/
#comm_content dl{line-height:20px;overflow:hidden; margin:10px;}
#comm_content dl dt{background:#F2F6FB none repeat scroll 0%;color:#666666;margin:5px 0pt;padding-left:5px;line-height:20px;}
#comm_content dl dt .red{color:#BC2931;}
#comm_content dl dt .user{font-weight:bold; margin-left:10px;}
#comm_content dl dd{color:#000000;font-size:12px;margin:0pt;padding-left:36px;line-height:20px;}

.commpages{line-height:20px;overflow:hidden;margin:10px;}
.commpages .pagelistbox{ float:right;color:#666;}
.commpages .pagelistbox a{color:#000;}
.commpages .pagelistbox a:hover{color:#FF0000;}

action.js 文件代码：

var canSub = true;
function TexFocus(o){
    if ('请在这里输入您要发表的评论信息'==o.value) o.value='';
    if('block'!=$('code_pic').style.display){
        $('code_pic').src='/include/validateimg.php';
        $('code_pic').style.display='block';
    }
}
function submitForm(e) {
    try{
        e = e ? e : window.event;
        if(e.ctrlKey&&e.keyCode==13)
        return true;
    }catch(e){}
    return false
}        
function commSubmit(form)
{
    if (!canSub)return false;
    if ('请在这里输入您要发表的评论信息' == $('comment_text').value)
    {
        $('comment_text').focus();
        return false;
    }
    if ($('comment_text').value.length > 500 || $('comment_text').value.length < 4)
    {
        alert("评论字数必须在4到100个之间！");
        $('comment_text').focus();
        return false;
    }
    if (!(/^[a-z]|[0-9]|[A-Z]{4}$/.test($('validate').value)))
    {
        alert("请输入4位数的验证码！");
        $('validate').focus();
        return false;
    }
    canSub = false;
    postfeeback();
}

//ajax load freeback list..
function loadfeeback(id,page){
    var URL = "/plus/ajax_feedback.php";
    var pars = 'arcID=' + id + '&nowpage='+page+'&action=show';
    new Ajax.Updater(
        {success: 'comm_content'},
        URL, {method: "get",parameters:pars}
    );   
}

//ajax submit data....
function postfeeback(){
    var opt = {
        method: 'post',
        postBody: 'action=send&arcID='+$('arcID').value
            +'¬user=1&isconfirm=1&msg='+$('comment_text').value
            +'&username='+$('username').value+'&validate='+$('validate').value,
        onSuccess: function(t) {
            $('ajaxBackMsg').update(t.responseText);
            loadfeeback($('arcID').value,1);
            canSub = true;
            $('comment_text').value = '';
            $('username').value = '';
            $('validate').value = '';
            $('code_pic').src = '/include/validateimg.php?'+Math.random();
        },
        on404: function(t) {$('ajaxBackMsg').update('服务器错误，请稍后再试！')},
        onFailure: function(t) {$('ajaxBackMsg').update('提交失败，请稍后再试！')}
    };
    new Ajax.Request("/plus/ajax_feedback.php", opt);
}

//ajax good and bad
function postGoodBad(i,a,d){
    var opt = {
        method: 'post',
        postBody: 'fid='+i+'&action='+a+'&arcID='+d,
        onSuccess: function(t) {$(i + 'span' + a).update(t.responseText)},
        on404: function(t) {},
        onFailure: function(t) {}
    };
    new Ajax.Request("/plus/ajax_feedback.php", opt);
}