舟山闪爸电子技术有限公司

大家好!今天我們來講一下科汛自定義SQL函數(shù)標(biāo)簽來實現(xiàn)分頁式的圖片文章列表,如http://pic.yesky.com/pic/meinv/這種效果;見下圖:

首先,我們在系統(tǒng)后臺添加圖片文章，然后到標(biāo)簽-新建自定義SQL函數(shù)標(biāo)簽,名為”型男色女”,采用AJAX調(diào)用,因為我們是要分頁的,所以我們選擇終級分頁標(biāo)簽類型,分頁樣式可以選擇。

點擊下一步繼續(xù),我們選擇主表如下,選中的藍色部份where tid in ({$CurrClassChildID})是指定當(dāng)前欄目（即型男色女）

點擊”下一步”繼續(xù),如下圖:

我們在循環(huán)體中輸入要循環(huán)的內(nèi)容,再看看我們的效果圖,每行顯示四列,每列都有圖片與文章,圖片在上,標(biāo)題在下,都有鏈接,那么我們在循環(huán)體中輸入內(nèi)容如下:

<table cellSpacing=5 cellPadding=0 width=577 align=center bgColor=#f1f1ee border=0
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank"> ?(注釋:給圖片加鏈接并在新窗口打開)
<img width="120" height="90" src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">(注釋:控制圖片寬度為120,高度為90,如果沒圖片即顯示圖片nopic.gif)
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank"> (注釋:給文章標(biāo)簽加鏈接并在新窗口打開)
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
</table>

建好后,我們到模板插入標(biāo)簽,如下圖:

保存模板,我們到前臺預(yù)覽效果,如下圖:

因為我們只循環(huán)一次,所以我們每頁只顯示一行四列,下面我們把循環(huán)體復(fù)制4下,即4行4列,代碼如下:

<table cellSpacing=5 cellPadding=0 width=577 align=center bgColor=#f1f1ee border=0
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
<tr>
[loop=4]
<td align="center">
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
<img width="120" height="90" src="{$Field(Picurl,Text,0,...,0,/images/nopic.gif)}" border="0">
</a>
<div>
<a href='{$Field(ID,GetInfoUrl,1,1)}' target="_blank">
{$Field(Title,Text,20,,0,)}
</a>
</div>
</td>
[/loop]
</tr>
</table>

最終前臺顯示的確效果圖如下: