<<	<	5	>	>>

当然最外围的tag由该组件的模板决定。比如外围用div：

现在假设需要purecss样式的pagingNavigator，它的html如下：

 
«
 
1
 
2
 
3
 
4
 
5
 
»

可见两者的差别还是不少。让我们看看可能的方法：

1、新建一个类，继承PagingNavigator。

比如类名称是PagingNavigator，然后建立对应的模板文件PagingNavigator.html，内容如下：

 
«
 
«
 
 
»
 
»

这样子画出来的PagingNavigator的就是purecss样式的。但是还需要完善，当前页的样式，没有最后一页的时候按钮应该disabled。也就是说根据当前页的情况需要添加pure-button-disabled，或者pure-button-active样式。

为了达成这个功能，我们需要更深的探究PagingNavigator类，看看哪里可以实现这个功能。

对照上面的模板，其中wicket:id="navigation"对应的是PagingNavigation组件，其中有一个方法是：

@Override	protected void populateItem(final LoopItem loopItem)	{	// Get the index of page this link shall point to	final long pageIndex = getStartIndex() + loopItem.getIndex();	// Add a page link pointing to the page	final AbstractLink link = newPagingNavigationLink("pageLink", pageable, pageIndex);	link.add(new TitleAppender(pageIndex));	loopItem.add(link);	// Add a page number label to the list which is enclosed by the link	String label = "";	if (labelProvider != null)	{	label = labelProvider.getPageLabel(pageIndex);	}	else	{	label = String.valueOf(pageIndex + 1);	}	link.add(new Label("pageNumber", label));	}

其中TitleAppender用来添加link的title属性，这样鼠标移到上面的时候就会提示，比如goto 2 page等等。接下来是label，就是pageNumber对应的组件。

可以通过复写这个方法，根据情况对label进行修饰（AttributeModifier），最终达到需要的效果。