js 浮動層菜單收藏

2024-05-06 14:16:14

字體：大中小

供稿：網(wǎng)友

使用說明
即僅需把附件中的 JS 文件和 CSS 文件引用到網(wǎng)頁里，如：
代碼如下:
<script type="text/javascript" src="DivMenu.js"></script>
<link href="DivMenu.css" rel="stylesheet" type="text/css" />

在線演示 http://img.Vevb.com/online/DivMenu/DivMenu.htm
下載源碼打包 http://img.Vevb.com/online/DivMenu/DivMenu.zip
其中 DivMenu.js 是經(jīng) Javascript compressor 壓縮的精簡版本，供生成實際使用。DivMenu_develop.js 是帶詳細注釋的開發(fā)版，供學(xué)習(xí)研究。使用時可以參考 DivMenu.css 文件中的注釋，自行修改樣式定義。
JavaScript 程序已經(jīng)實現(xiàn)免打擾（unobtrusive），即引用此 JS 文件的 HTML 文件無需任何其它調(diào)整。但還未實現(xiàn)完全匿名（anonymous），意思是此程序仍然創(chuàng)建了全局變量和若干網(wǎng)頁節(jié)點，已經(jīng)盡量做到少增加全局變量和節(jié)點，但使用時仍請注意變量命名沖突。此程序僅增加一個全局變量“DivMenu”，增加的網(wǎng)頁節(jié)點比較多，對應(yīng)替換掉的每個 SELECT 節(jié)點增加兩個節(jié)點，名字分別是 SELECT 節(jié)點的 name 值加“_a”后綴和“_div”后綴，例如原有某 SELECT 節(jié)點的名字是“menu”，則新增的兩個節(jié)點名字是“menu_a”和“menu_div”。
功能說明
多選菜單不轉(zhuǎn)換，多選菜單中的提示文字只能用 disabled="disabled" 來實現(xiàn)了。若要選擇多個，請住 Ctrl 鍵再選擇多選1 多選2 多選3 多選4 多選5 放一個多選菜單，用來演示多選菜單不會被替換，以及在 IE6 中浮動層可以正常顯示在其它 SELECT 以上了。
以上是個實用的范例，幾組經(jīng)典的 SELECT 選擇菜單，第一個是復(fù)雜帶分組的，提示文字用 disabled="disabled" 的第一個 option 實現(xiàn)，后一個是簡單的，提示文字用的是沒有 value 屬性的那個 option。實踐發(fā)現(xiàn) FF 可以正常處理 disabled="disabled" 或者僅 disabled 的 option，讓它可以不可選的狀態(tài)，而 IE 則無視任何disabled="disabled" 和 disabled，所以估計通常 IE 里的菜單想用提示文字都會用沒有 value 屬性或者 value=""的那個 option。可以看它的源碼就是原來的 SELECT，不需要任何改動。
基本思路是把文檔中原有的 SELECT 菜單轉(zhuǎn)換成隱藏型的 INPUT 表單項，用 A 元素來做菜單的提示文字條和選項條，用 DIV 層做菜單，各個選項也用 A 元素來替代，點擊時把值賦給隱藏型的 INPUT 表單項。
主要功能或限制包括：
所有使用習(xí)慣遵循傳統(tǒng)的 SELECT 菜單。
只有單選的 SELECT 菜單會被替換，多選菜單維持不變，因為通常多選菜單也不用浮動層菜單來替代。
支持各種 SELECT 元素的特性，如把 disabled 的或者沒有 value 的 option 作為提示文字條；用 optgroup 分組的選項也會在新菜單中分組。并且專門針對 IE 6 中 SELECT 擋住 DIV 層的 BUG 進行了修正。
支持默認選中項。
幾乎支持普通菜單的所有功能，但是不支持額外的交互功能，如 JavaScript 實時創(chuàng)建的 Option 選項、聯(lián)動選項等，比如選一個城市區(qū)縣會相應(yīng)變化這類的功能是不支持的。

上一篇：javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

下一篇：借用Google的Javascript API Loader來加速你的網(wǎng)站