js 浮動層菜單收藏

2019-11-21 01:29:22

字體：大中小

來源：轉載

供稿：網(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ā)版，供學習研究。使用時可以參考 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é)點比較多，對應替換掉的每個 SELECT 節(jié)點增加兩個節(jié)點，名字分別是 SELECT 節(jié)點的 name 值加“_a”后綴和“_div”后綴，例如原有某 SELECT 節(jié)點的名字是“menu”，則新增的兩個節(jié)點名字是“menu_a”和“menu_div”。
功能說明
多選菜單不轉換，多選菜單中的提示文字只能用 disabled="disabled" 來實現(xiàn)了。若要選擇多個，請住 Ctrl 鍵再選擇多選1 多選2 多選3 多選4 多選5 放一個多選菜單，用來演示多選菜單不會被替換，以及在 IE6 中浮動層可以正常顯示在其它 SELECT 以上了。
以上是個實用的范例，幾組經(jīng)典的 SELECT 選擇菜單，第一個是復雜帶分組的，提示文字用 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 菜單轉換成隱藏型的 INPUT 表單項，用 A 元素來做菜單的提示文字條和選項條，用 DIV 層做菜單，各個選項也用 A 元素來替代，點擊時把值賦給隱藏型的 INPUT 表單項。
主要功能或限制包括：
所有使用習慣遵循傳統(tǒng)的 SELECT 菜單。
只有單選的 SELECT 菜單會被替換，多選菜單維持不變，因為通常多選菜單也不用浮動層菜單來替代。
支持各種 SELECT 元素的特性，如把 disabled 的或者沒有 value 的 option 作為提示文字條；用 optgroup 分組的選項也會在新菜單中分組。并且專門針對 IE 6 中 SELECT 擋住 DIV 層的 BUG 進行了修正。
支持默認選中項。
幾乎支持普通菜單的所有功能，但是不支持額外的交互功能，如 JavaScript 實時創(chuàng)建的 Option 選項、聯(lián)動選項等，比如選一個城市區(qū)縣會相應變化這類的功能是不支持的。
全部樣式都用 CSS 定義，字號使用相對大小，無需改動即可適應多數(shù)網(wǎng)頁。
菜單位置和尺寸均設置成靈活的，可適應任意的網(wǎng)頁排版和布局。做的時候考慮的是要能在替代的 A 元素中顯示時，放得下最寬的選項文字，因而沒有直接取原有 SELECT 框的寬度。因此菜單尺寸可能比原有的 SELECT 寬，使用時請注意。
歡迎試用，并提出意見建議，共用探討改進。

上一篇：解javascript 混淆加密收藏

下一篇：jquery中常用的SET和GET