CMS教程
每日更新|TOP排行榜|Tag标签|充值
CMS教程模板无忧>建站教程>CMS教程>动易Cms教程>
收藏分享查看评论动易Cms教程
大中小

解析让图片频道也调用AJAX评论的步骤_动易Cms教程

编辑Tag赚U币
教程Tag：暂无Tag,欢迎添加,赚取U币!

第一步：添加{$MY_ajax图片评论}标签

此标签的内容可以仿文章的这个ajax评论标签，需要注意的是要把文章ajax评论标签里的所有“Article”字样的代码都要替换成“Photo”，或复制以下的代码：

<!-- 为评论列表增加CSS控制： -->
<STYLE type=text/css>.commentTable
{
 padding:5px; border:#98d0f8 1px solid; text-align:center;
}
.commentTable th
{
 color:#008000;
}
.commentTable th, .commentTable td
{
 border-right:#98d0f8 1px solid;border-bottom:#98d0f8 1px solid;
}
td.commentPager
{
 border:none;
}
td.commentTdEnd,th.commentTdEnd
{
 border-right:none;
}
.commentTitle
{
 background:#e7f5fe;
}
.commentListOver
{
 background:#f3f9f4;
}
</STYLE>
<script language="javascript">
function SetWinHeight(obj)
{
 var iComment=obj;
 if (document.getElementById)
 {
  if (iComment && !window.opera)
  {
   if (iComment.contentDocument && iComment.contentDocument.body.offsetHeight)
    iComment.height = iComment.contentDocument.body.offsetHeight;
   else if(iComment.Document && iComment.Document.body.scrollHeight)
    iComment.height = iComment.Document.body.scrollHeight;
  }
 }
}
function  ShowComment()  {
 var pars;
 var ModuleName = "{$ChannelDir}";
 var InfoID = "{$PhotoID}";
 var Titlelen = "";  //内容摘要长度，默认是20
 var Tablelen = "";  //调用表格宽度，如100%或760
 var MaxPerPage = 2;  //每页调用数量
 pars="ModuleName="+ModuleName+"&InfoID="+InfoID+"&Titlelen="+Titlelen+"&Tablelen="+Tablelen+"&MaxPerPage="+MaxPerPage;
 new Ajax.Updater(
 "leaveMsgList",
 "{$InstallDir}Include/PowerEasy.Comment_Ajax.asp?rnd="+Math.random(),
 {
 method:"get",
 parameters  :pars,
 evalScripts :true,
 asynchronous:true
 });
}
function ajaxPager(pars)
{
 new Ajax.Updater(
 "leaveMsgList",
 "{$InstallDir}Include/PowerEasy.Comment_Ajax.asp",
 {
 method:"get",
 parameters: pars
 });
}
</script>
<div id=leaveMsgList>数据载入中，请稍后…… </div>
<script type="text/javascript">
ShowComment();
</script>
<script type="text/javascript">
if ({$ClassID}==-1)
{}
else
{
document.write ("<IFRAME id=iComment name=iComment src='{$InstallDir}{$ChannelDir}/Comment.asp?PhotoID={$PhotoID}' frameBorder=0 width='100%' scrolling=no onload=Javascript:SetWinHeight(this)></IFRAME>")
}
</script>

 

第二步：修改图片频道的内容页模板

1、在<head>..</head>之间添加以下三行JS调用代码

<script src="{$InstallDir}JS/prototype.js"></script>

<script src="{$InstallDir}JS/scriptaculous.js"></script>

<script src="{$InstallDir}JS/checklogin.js"></script>

2、然后在<body>相应的位置里设置调用第一步添加好了的{$MY_ajax图片评论}标签

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>{$PageTitle}</title>
<link href="{$InstallDir}Images/favicon.ico" type="image/x-icon" rel="icon">
<link href="{$InstallDir}Images/favicon.ico" type="image/x-icon" rel="shortcut icon">
{$ShowJS_Comment}
<script language=javascript>
function refreshimg(){
  document.all.checkcode.src='../Inc/CheckCode.asp?'+Math.random();
}
</script>
<script language='JavaScript' type='text/JavaScript'>
   function Check()
   {
    if (document.form1.Name.value=='')
    {
     alert('请输入姓名！');
     document.form1.Name.focus();
     return false;
    }
    if (document.form1.Email.value=='')
    {
     alert('请输入Email！');
     document.form1.Email.focus();
     return false;
    }
    if (document.form1.Content.value=='')
    {
     alert('请输入评论内容！');
     document.form1.Content.focus();
     return false;
    }

 return true;
   }
   </script>

<style>th{ color:#000; font-size:12px; font-weight:normal;text-align:right;padding-right:5px}
img{ border:0px}
.m720{
 BORDER: #92b0dd 1px solid; PADDING: 5px 5px 5px 5px;margin:5px 0px 5px 0px; BACKGROUND-COLOR: #ebf4ff}
.declare { color:#000; font-size:12px; font-weight:normal;}</style>
</head>
<body>
<!-- ********网页中部代码开始******** -->
<div id="globalComments">
  <form action="Comment.asp" onsubmit="return Check();" method="post" name="form1" id="form1">
    <table border="0">
      <tr>
        <th>用户名</th>
        <td><Input name="Name" type="text" id="Name" size="30" maxlength="16" value="{$UserName}" class="textInput">
          <FONT color=red>*</FONT></td>
        <td rowspan="4" valign="top"><textarea name="Content" cols="45" rows="5" ></textarea>
        </td>
      </tr>
      <tr>
        <th>电子邮件地址</th>
        <td><input name="Email" type="text" id="Email" size="30" maxlength="100" value="{$UserEmail}" class="textInput" /></td>
      </tr>
      <tr>
        <th>评价等级</th>
        <td><input name="Score" type="radio" value="1" id="Score1" />
          <label for="Score1">1</label>
          <input name="Score" type="radio" value="2" id="Score2" />
          <label for="Score2">2</label>
          <input name="Score" type="radio" value="3" id="Score3" />
          <label for="Score3">3</label>
          <input name="Score" type="radio" value="4" id="Score4" />
          <label for="Score4">4</label>
          <input name="Score" type="radio" value="5" checked="checked" id="Score5" />
          <label for="Score5">5</label>
        </td>
      </tr>
<tr>
      <th> </th>
        <td><Input id="photo" type="hidden" value="Save" name="photo">
          <Input id="photoID" type="hidden" value="{$photoID}" name="photoID">
          <input type="image" src="{$InstallDir}images/btn_submit.gif" />
          <img src="{$InstallDir}images/btn_reset.gif" onclick="form1.reset();" alt="Reset" style="cursor:pointer;" /> </td>
      </tr>
    </table>
  </form>
</div>
</div>
<!-- ********网页中部代码结束******** -->
</body>
</html>

 

至此，我们就完成了图片频道也可以调用AJAX评论的功能

第三步：添加图片默认评论ajax模板

查看更多 动易Cms教程  动易Cms模板

来源：模板无忧//所属分类：动易Cms教程/更新时间：2009-07-20
[收藏][报错][返回列表]
相关动易Cms教程：