模板
教程
環境
性能
功能
管理
用Popup窗口建無限級Web頁菜單
在Web上使用菜單可以極大地節約頁面的空間，同時也比較的符合用戶從Windows上繼承下來的UI操作體驗。在以往的Web頁菜單設計中，我們普遍使用div嵌套table的方式來實現菜單，這樣的菜單有個最致命的問題就是會被<select>覆蓋。 下面將介紹的Popup來實現的Web頁菜單將完全解決<div>做為菜單容器時遇到的問題，Popup窗口是IE5.5及以后版本提供的一個新feature。什么是popup呢？簡單說popup其實就是一個彈出窗口，它擁有以下特點(MSDN描述)：
·popup窗口在用戶點擊它自身之外的任何地方或另一個popup打開的時候會自動關閉；
·popup在顯示的時候不能獲得焦點，所以用戶已focused的操作將繼續在其父窗口中執行；
·組成popup的DHTML可以存儲在其父document或其他的document元素中；
·popup窗口中不支持文本框一類的編輯框element；
·不能選中popup窗口中的元素；
·不能在popup窗口中navigate(點擊popup中的連接，不能讓更新的內容顯示到這個popup中)；
·popup窗口一旦顯示就不能移動和resize。
這里MSDN說的不全，而且有的地方不是很準確，popup窗口還有幾個重要的特性。它可以超出瀏覽器的窗口范圍而且也不會被下拉框、flash、IFrame等這些元素遮擋。實際上popup里的內容是可以被選擇的，不知道MSDN說的不能選擇是啥意思?。關于MSDN說popup不能獲得焦點也有點問題，其實是popup里的編輯框類控件不能獲得焦點，而其它的非可編輯控件是可以獲得焦點的。而且popup顯示的時候，IE主窗口不能獲得鼠標的onmousewheel事件。
這樣的一些特性，恰好表明了popup窗口非常的適合用來制作彈出菜單，并且由于popup窗口顯示的時候，IE窗口內的文檔是不能被移動的，這樣就不存在context menu的位置同步問題了，因為畢竟popup窗口不能move(move位置需要hide以后在新的位置上重show)，這個問題還比較討厭。
使用popup窗口制作無限級別的菜單，有兩個問題要解決：一個是要能在一個IE中顯示多個Popup窗口，二是要能把窗口中的一些事件俘獲并執行我們腳本過程。MSDN在描述popup窗口特性時，第一條就說了只要有另一個popup窗口開啟，先前顯示的popup窗口就會自動關閉。這下怎么辦呢？不過既然都說了要實現無限級的菜單了，辦法還是有的。對于popup，使用方式其實是很簡單的，他一共就只包含了兩個方法：hide()和show(...)，和兩個屬性：document和isOpen。雖然在IE中我們連續的調用n次window.createPopup().show(...)只能出來一個popup窗口被顯示，可是我們可以調用popup.document.parentWindow的createPopup方法，它產生的popup窗口在顯示的時候就不會關閉前面已顯示的popup窗口，并且對于新的popup用這個方法可以繼續開啟child popup。這個問題再研究下去，會發現IE實現popup的一些怪異的地方(當然這些對于我們實現這個菜單關系不太大，只是覺得混亂)。
比如我們在一個IE窗口中，var popup = window.createPopup(); var win = popup.document.parentWindow; 我們會發現 window != win，對于多個popup可以共存，這個不相等還能理解，但是當我們調用win.resizeTo(...)的時候，我們發現父IE窗口被resize了。同樣我們在popup中select all，結果也是父IE窗口里的內容被全選了@_@...
我們為了解決這個問題，有時我們干脆在顯示圖層菜單的同時隱藏頁面上的所有下拉列表框，在菜單消失的時候，再顯示他們。這個方法雖然可以解決問題，而其優化過后還可以只隱藏和下拉列表框相交的列表框，但是這些解決方法都不是十分的完美。還有些小問題，這樣的菜單定位很困難，因為在<div>顯示的時候，用戶可以使用鼠標滾輪滾動頁面，這樣一來是否要讓<div>菜單和頁面滾動同步呢？如果不要，頁面被滾走了，菜單仍顯示在一個和自己毫不相關的位置上很是古怪。如果要同步，那么噩夢就來了，因為被滾動的區域不一定就是<body>區域，還可能是一些類似<div style="overflow:auto"><div>的區域，要算出菜單的位置將會非常的麻煩。
