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