第一步：添加{$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評論的功能
新聞熱點
疑難解答
圖片精選
