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