|
|
即僅需把附件中的 JS 文件和 CSS 文件引用到網(wǎng)頁(yè)里，如：
復(fù)制代碼 代碼如下:
<script type="text/Javascript" src="DivMenu.js"></script>
<link href="DivMenu.css" rel="stylesheet" type="text/css" />
在線演示 http://img.jb51.NET/online/DivMenu/DivMenu.htm
下載源碼打包 http://img.jb51.NET/online/DivMenu/DivMenu.zip
其中 DivMenu.js 是經(jīng) Javascript compressor 壓縮的精簡(jiǎn)版本，供生成實(shí)際使用。DivMenu_develop.js 是帶詳細(xì)注釋的開(kāi)發(fā)版，供學(xué)習(xí)研究。使用時(shí)可以參考 DivMenu.css 文件中的注釋，自行修改樣式定義。
JavaScript 程序已經(jīng)實(shí)現(xiàn)免打擾（unobtrusive），即引用此 JS 文件的 HTML 文件無(wú)需任何其它調(diào)整。但還未實(shí)現(xiàn)完全匿名（anonymous），意思是此程序仍然創(chuàng)建了全局變量和若干網(wǎng)頁(yè)節(jié)點(diǎn)，已經(jīng)盡量做到少增加全局變量和節(jié)點(diǎn)，但使用時(shí)仍請(qǐng)注意變量命名沖突。此程序僅增加一個(gè)全局變量“DivMenu”，增加的網(wǎng)頁(yè)節(jié)點(diǎn)比較多，對(duì)應(yīng)替換掉的每個(gè) SELECT 節(jié)點(diǎn)增加兩個(gè)節(jié)點(diǎn)，名字分別是 SELECT 節(jié)點(diǎn)的 name 值加“_a”后綴和“_div”后綴，例如原有某 SELECT 節(jié)點(diǎn)的名字是“menu”，則新增的兩個(gè)節(jié)點(diǎn)名字是“menu_a”和“menu_div”。
功能說(shuō)明
多選菜單不轉(zhuǎn)換，多選菜單中的提示文字只能用 disabled="disabled" 來(lái)實(shí)現(xiàn)了。 若要選擇多個(gè)，請(qǐng)住 Ctrl 鍵再選擇 多選1 多選2 多選3 多選4 多選5 放一個(gè)多選菜單，用來(lái)演示多選菜單不會(huì)被替換，以及在 IE6 中浮動(dòng)層可以正常顯示在其它 SELECT 以上了。
以上是個(gè)實(shí)用的范例，幾組經(jīng)典的 SELECT 選擇菜單，第一個(gè)是復(fù)雜帶分組的，提示文字用 disabled="disabled" 的第一個(gè) option 實(shí)現(xiàn)，后一個(gè)是簡(jiǎn)單的，提示文字用的是沒(méi)有 value 屬性的那個(gè) option。實(shí)踐發(fā)現(xiàn) FF 可以正常處理 disabled="disabled" 或者僅 disabled 的 option，讓它可以不可選的狀態(tài)，而 IE 則無(wú)視任何disabled="disabled" 和 disabled，所以估計(jì)通常 IE 里的菜單想用提示文字都會(huì)用沒(méi)有 value 屬性或者 value=""的那個(gè) option。可以看它的源碼就是原來(lái)的 SELECT，不需要任何改動(dòng)。
基本思路是把文檔中原有的 SELECT 菜單轉(zhuǎn)換成隱藏型的 INPUT 表單項(xiàng)，用 A 元素來(lái)做菜單的提示文字條和選項(xiàng)條，用 DIV 層做菜單，各個(gè)選項(xiàng)也用 A 元素來(lái)替代，點(diǎn)擊時(shí)把值賦給隱藏型的 INPUT 表單項(xiàng)。
主要功能或限制包括：
所有使用習(xí)慣遵循傳統(tǒng)的 SELECT 菜單。
只有單選的 SELECT 菜單會(huì)被替換，多選菜單維持不變，因?yàn)橥ǔ６噙x菜單也不用浮動(dòng)層菜單來(lái)替代。
支持各種 SELECT 元素的特性，如把 disabled 的或者沒(méi)有 value 的 option 作為提示文字條；用 optgroup 分組的選項(xiàng)也會(huì)在新菜單中分組。并且專門針對(duì) IE 6 中 SELECT 擋住 DIV 層的 BUG 進(jìn)行了修正。
支持默認(rèn)選中項(xiàng)。
幾乎支持普通菜單的所有功能，但是不支持額外的交互功能，如 JavaScript 實(shí)時(shí)創(chuàng)建的 Option 選項(xiàng)、聯(lián)動(dòng)選項(xiàng)等，比如選一個(gè)城市區(qū)縣會(huì)相應(yīng)變化這類的功能是不支持的。
全部樣式都用 CSS 定義，字號(hào)使用相對(duì)大小，無(wú)需改動(dòng)即可適應(yīng)多數(shù)網(wǎng)頁(yè)。
菜單位置和尺寸均設(shè)置成靈活的，可適應(yīng)任意的網(wǎng)頁(yè)排版和布局。做的時(shí)候考慮的是要能在替代的 A 元素中顯示時(shí)，放得下最寬的選項(xiàng)文字，因而沒(méi)有直接取原有 SELECT 框的寬度。因此菜單尺寸可能比原有的 SELECT 寬，使用時(shí)請(qǐng)注意。
歡迎試用，并提出意見(jiàn)建議，共用探討改進(jìn)。
JavaScript技術(shù)：js 浮動(dòng)層菜單收藏，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
