Posted on 2007-08-29 17:51
Jack L 閱讀(1390)
評論(1) 編輯 收藏 所屬分類:
JavaScript
在老版GWT中，PopupPanel有兩個構造函數： public PopupPanel()； public PopupPanel(boolean autoHide)； 實例化我們的PopupPanel之后，可以設置顯示的位置，然后調用show()顯示。但是這樣只能得到一個模態（modal）Panel，只要它處于可見（isVisible()返回true）狀態，我們的頁面就不能進行任何操作（除了已經運行起來的JS代碼，像發送Ajax請求這樣的后臺操作），相當與整個Web應用因為顯示該Panel而進入了暫停狀態。 由于PopupPanel可以根據位置參數出現在頁面任何地方，所以很適合于實現諸如頁面角落上的提示框（比如在頁面右上角顯示“loading...”）等類似的小功能。但是這樣的提示框不能暫停瀏覽器的運行，所以應該是一個非模態（non-modal）的Panel。于是我們通過一種方式來繞過沒有適當構造函數的限制： 使用RootPanel.get().add(myPanel);來取代myPanel.show(); 這樣就得到了一個非模態的Panel。 在新的GWT1.4中，PopupPanel有三個構造函數： public PopupPanel()； public PopupPanel(boolean autoHide)； public PopupPanel(boolean autoHide, boolean modal)； 我們看到，我們可以通過構造函數指定是否需要一個模態Panel。如果我們使用第三個構造函數，而且把第二個參數設置為false的話，當我們對該PopupPanel實例調用show()方法的時候，就會得到一個非模態的Panel。
但是，如果我們還要用RootPanel.get().add(myPanel)的話，瀏覽器將忽略我們設置的寬度，和彈出位置等信息，把myPanel添加到頁面最下方一個元素的下面，而且其寬度與瀏覽器客戶區的寬度相同。總之，絕不是你想要的結果。
下面給出一個在頁面右上角實現消息提示框的方法。
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 }
基本思路是，先設置要顯示的消息（info），然后因為是在右上角顯示，所以要取得消息框的寬度（width），并取得瀏覽器客戶區的寬度（clientWidth），計算（clientWidth-width）就得到了消息框的x坐標（準確地說是左上角那一點的x坐標）。
7～9的代碼好像很奇怪，但只有這樣才能取得消息框的寬度。當PopupPanel處于不可見狀態時，調用getOffsetWidth()必將返回0。因為瀏覽器不知道寬度。原因如下：
你的PopupPanel可能會被CSS修飾，可能通過百分比設置了寬度，也可能設置了邊框等屬性，所以無法得知到底占用了多少個像素的寬度。只有處于可見狀態時才能得到其寬度。