分页

WCM样例系列－图片新闻翻页

学习笔记 — 作者 iciclefire @ 23:23

就图片新闻那个例子，我们再做个扩展－添加翻页的功能。

如果看客使用过WCM v6.0以前的版本，都知道之前的WCM不提供翻页的功能，只能够通过一些编程的手段来实现。v6.0好了，提供了一个叫“页面导航”的组件，专门来实现翻页的功能。

通过WCM Authoring Portlet工具新建一个“页面导航”组件。可以选择两种类型的分页控件：

1. 往复式，即实现第一页、上一页、下一页和最后一页。如图中的<<(第一页) <(上一页) >(下一页) >>(最后一页)
2. 分页式，即实现页面编号。如图中1 2 3

• 页眉，样例代码：<table border="0"><tr><td>
• 分隔符，样例代码：</td><td>
• 页脚，样例代码：&nbsp;&nbsp;页面&nbsp;<PageInfo value="currentPage"/><PageInfo value="unknownPages" knowntext="" unknowntext="of at least"/>总共&nbsp;<PageInfo value="totalPages"/></td></tr></table>（如图中页面1总共3）
• 第一页控件（活动设计，即被选择状态），样例代码：<font color="#000000">&lt;&lt;</font>
• 第一页控件（非活动设计，未被选择状态），样例代码：<font color="#999999">&lt;&lt;</font>
• 上一页控件（活动设计），样例代码：<font color="#000000">&lt;</font>
• 上一页控件（非活动设计），样例代码：<font color="#999999">&lt;</font>
• 下一页控件（活动设计），样例代码：<font color="#000000">&gt;</font>
• 下一页控件（非活动设计），样例代码：<font color="#999999">&gt;</font>
• 最后一页控件（活动设计），样例代码：<font color="#000000">&gt;&gt;</font>
• 最后一页空间（非活动设计），样例代码：<font color="#999999">&gt;&gt;</font>
• 最后一项选择是否限定翻页的页面数量，酌情处理。

最后，把“页面导航”组件添加到“菜单”组件的页脚处，样例代码：<tr><td colspan="3"><Component name="PagingLink"/></td></tr></table>

实现起来还是非常容易的:)

 查看全文

评论 | 0 引用

WCM样例系列－图片新闻

学习笔记 — 作者 iciclefire @ 21:53

很多网站都有图片新闻，像下图这样。

我用IBM Workplace Web Content Management没事儿闲地做了一个小例子:)

具体实现方法：

1. 新建一个菜单组件
2. "菜单元素查询"部分，通过条件(编写模板、站点区域等)选择想显示的内容
3. 设定一些基本的属性，如排序方式等
4. 代码实现

页眉：

<table align="center" cellpadding="5" cellspacing="5">
<tr><td colspan="3" height="28" bgcolor="#666666" align="center" valign="bottom"><font color="#ffffff" style="font-size:22px;font-family: 黑体"><b>NBA专题--爵士86-83火箭 精彩图集</b></font></td></tr>
<tr id="pic1" align="center">
</tr>
<tr id="title1" align="center">
</tr>
<tr id="pic2" align="center">
</tr>
<tr id="title2" align="center">
</tr>
<tr id="pic3" align="center">
</tr>
<tr id="title3" align="center">
</tr>

说明：构建整个页面显示的框架。<tr>中的id属性，在后面搜索结果设计的代码中会被引用。

每个菜单搜索结果的设计：

<script language="JavaScript">
<!--
var n = <Placeholder tag="Listnum"/>;
if( n <= 3 )
{
var cellObj = document.getElementById("pic1").insertCell();
cellObj.innerHTML = '<Element context="autoFill" type="content" key="DisplayImage"/>';
var cellObj = document.getElementById("title1").insertCell();
cellObj.innerHTML = '<a style="color: #BA3914;" href="<Placeholder tag="href"/>"><Element context="autoFill" type="content" key="Summary"/></a>';
}
if( n > 3 && n <= 6 )
{
var cellObj = document.getElementById("pic2").insertCell();
cellObj.innerHTML = '<Element context="autoFill" type="content" key="DisplayImage"/>';
var cellObj = document.getElementById("title2").insertCell();
cellObj.innerHTML = '<a style="color: #BA3914;" href="<Placeholder tag="href"/>"><Element context="autoFill" type="content" key="Summary"/></a>';
}
if( n > 6 && n <= 9 )
{
var cellObj = document.getElementById("pic3").insertCell();
cellObj.innerHTML = '<Element context="autoFill" type="content" key="DisplayImage"/>';
var cellObj = document.getElementById("title3").insertCell();
cellObj.innerHTML = '<a style="color: #BA3914;" href="<Placeholder tag="href"/>"><Element context="autoFill" type="content" key="Summary"/></a>';
}
//-->
</script>

说明：这部分代码是由javascript来实现的。代码通过在页眉部分定义的id属性，判断从WCM中读取的内容序列，来确定该条内容(图片或文字)应放在页面框架中的位置。

脚注：

</table>

今天就到这儿吧，休息休息一会儿！噢噢！