在一些商城或者博客上,随处可见一些“跟随的标题栏”,什么是”跟随的标题栏“呢?它的效果是当浏览器窗口移到看不见某处内容的时候,这块内容的标题会紧贴在浏览器顶部,跟随浏览器滑动,当用户将浏览器内容往上拖动的时候,这个标题又会自动还原。例如淘宝的顶部搜索栏如下。

GWT实现“跟随标题栏”-LMLPHP

这种方法在GWT也可以实现,最近做了一个测试,发现效果一样,特说下思路,贴出代码,以作后用。

思路:

GWT的界面上提供了一个方法,名为:Window.addWindowScrollHandler(Handler handler),该方法可以监视窗口的拖动。在这个方法里,我们可以进行我们想要的操作。

关于怎么“浮出”这个标题,我首先想到是的使用PopPanel实现,它可以实现精确的定位,但要在其中显示和要浮动的标题一样的控件,必须得先有这个控件才行,但GWT中不允许一个布局控件多次引用。所以在此我用的是一种“障眼法”,创建两个一样的标题控件,将其中一个放在PopPanel中即可。

总体实现方法是这样的:在窗体滑动事件中,根据我们设置的条件,滑到某个程度的时候,弹出一个PopPanel,其中的内容和要“浮动”标题一样,但回到某个地方,将该PopPanel隐藏即可。

代码如下:

 Window.addWindowScrollHandler(new Window.ScrollHandler() {
public void onWindowScroll(Window.ScrollEvent event) {
int topDistance = View1.getAbsoluteTop();
int left = View1.getAbsoluteLeft();
floatPanel.setWidget(View2);
int w = Window.getScrollTop();
floatPanel.setPopupPosition(left, w);
if(event.getScrollTop()>topDistance){
floatPanel.show();
}else{
floatPanel.hide();
}
}
});

  上述代码中的View1和View2其实是两个相同的控件。第三行中有一个getAbsoulutTop()方法,是获取该控件在浏览器中离浏览器顶部的距离。所以在第8行中我们就可以判断,在窗体滑动高度大于该控件里窗体的高度的时候,就将该floatPanel显示出来,否则隐藏。关于PopPanel,它必须拥有坐标,即在浏览器中的位置坐标。高度我们可以使用Window.getScrollTop(),即滑动条的高度,所以一直是在浏览器顶部的。关于离浏览器左边的距离,我们可以在窗体中获取一个相对位置,要想实现PopPanel在隐藏和显示和原控件重叠,最好的办法就是将原控件作为相对位置,所以浮动Panel距离浏览器左边的距离就是原控件距离浏览器左边的距离。
  补充一点:在浏览器是可以改变大小的,这个原控件的位置可能会改变,floatPanel也应该要改变其X坐标才合理,因为一旦浏览器再放大或缩小窗口,floatPanel还会是原来的位置,造成位置偏移。幸好,GWT还提供了一个方法:

 Window.addResizeHandler(new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
//method here
}
});

该方法将监视浏览器缩放情况,一旦浏览器缩放了,就会触发事件。所以把两者结合起来,可以实现:但浏览器缩放的时候,重新获取原控件的X左标,并跟着立即改变PopPanel的X坐标,这样就不会出现缩放浏览器“浮动标题”移位了。

05-22 05:16