Posted on 2007-08-29 17:51
Jack L 閱讀(1382)
評論(1) 編輯 收藏 所屬分類:
JavaScript
在老版GWT中，PopupPanel有兩個(gè)構(gòu)造函數(shù)： public PopupPanel()； public PopupPanel(boolean autoHide)； 實(shí)例化我們的PopupPanel之后，可以設(shè)置顯示的位置，然后調(diào)用show()顯示。但是這樣只能得到一個(gè)模態(tài)（modal）Panel，只要它處于可見（isVisible()返回true）狀態(tài)，我們的頁面就不能進(jìn)行任何操作（除了已經(jīng)運(yùn)行起來的JS代碼，像發(fā)送Ajax請求這樣的后臺操作），相當(dāng)與整個(gè)Web應(yīng)用因?yàn)?/SPAN>顯示該P(yáng)anel而進(jìn)入了暫停狀態(tài)。
由于PopupPanel可以根據(jù)位置參數(shù)出現(xiàn)在頁面任何地方，所以很適合于實(shí)現(xiàn)諸如頁面角落上的提示框（比如在頁面右上角顯示“loading...”）等類似的小功能。但是這樣的提示框不能暫停瀏覽器的運(yùn)行，所以應(yīng)該是一個(gè)非模態(tài)（non-modal）的Panel。于是我們通過一種方式來繞過沒有適當(dāng)構(gòu)造函數(shù)的限制：
使用RootPanel.get().add(myPanel);來取代myPanel.show();
這樣就得到了一個(gè)非模態(tài)的Panel。
在新的GWT1.4中，PopupPanel有三個(gè)構(gòu)造函數(shù)：
public PopupPanel()；
public PopupPanel(boolean autoHide)；
public PopupPanel(boolean autoHide, boolean modal)；
我們看到，我們可以通過構(gòu)造函數(shù)指定是否需要一個(gè)模態(tài)Panel。如果我們使用第三個(gè)構(gòu)造函數(shù)，而且把第二個(gè)參數(shù)設(shè)置為false的話，當(dāng)我們對該P(yáng)opupPanel實(shí)例調(diào)用show()方法的時(shí)候，就會得到一個(gè)非模態(tài)的Panel。
但是，如果我們還要用RootPanel.get().add(myPanel)的話，瀏覽器將忽略我們設(shè)置的寬度，和彈出位置等信息，把myPanel添加到頁面最下方一個(gè)元素的下面，而且其寬度與瀏覽器客戶區(qū)的寬度相同?？傊?，絕不是你想要的結(jié)果。
下面給出一個(gè)在頁面右上角實(shí)現(xiàn)消息提示框的方法。
1 private final PopupPanel infoB=new PopupPanel(false,false);//no auto-hide, non-modal popup
2 public void infoBoard(String info){
3 if(infoB!=null)
4 infoB.hide();
5 Label lb=new Label(info);
6 infoB.setWidget(lb);
7 infoB.show();
8 int width=infoB.getOffsetWidth();
9 infoB.hide();
10 int clientWidth=Window.getClientWidth();
11 infoB.setPopupPosition(clientWidth-width, 0);
12 infoB.show();
13 }
基本思路是，先設(shè)置要顯示的消息（info），然后因?yàn)槭窃谟疑辖秋@示，所以要取得消息框的寬度（width），并取得瀏覽器客戶區(qū)的寬度（clientWidth），計(jì)算（clientWidth-width）就得到了消息框的x坐標(biāo)（準(zhǔn)確地說是左上角那一點(diǎn)的x坐標(biāo)）。
7～9的代碼好像很奇怪，但只有這樣才能取得消息框的寬度。當(dāng)PopupPanel處于不可見狀態(tài)時(shí)，調(diào)用getOffsetWidth()必將返回0。因?yàn)闉g覽器不知道寬度。原因如下：
你的PopupPanel可能會被CSS修飾，可能通過百分比設(shè)置了寬度，也可能設(shè)置了邊框等屬性，所以無法得知到底占用了多少個(gè)像素的寬度。只有處于可見狀態(tài)時(shí)才能得到其寬度。