如何调整wicket的PagingNavigator的html输出_html/css_WEB-ITnose

	<<	<			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），最终达到需要的效果。