注：畢業(yè)設(shè)計和工作中多次接觸到這個Dynarch Navigation Bar，其文檔是英文的，但因一些原因，在這里翻譯了一下它的一小部分，原文地址是：http://www.dynarch.com/demos/NavBar/，如有不當(dāng)之處還請各位讀友指正。
Dynarch導(dǎo)航欄
- 安裝說明 - 如何安裝在您的網(wǎng)站上。
- 定制 - 改變外觀和感覺。
- 支持 - 如果發(fā)生什么錯誤，請與我們聯(lián)系。
License許可
請閱讀在這里的許可文本。
Navbar的概況
我們的DHTML導(dǎo)航欄是一個多用途的類似Windows XP的資源管理器菜單的DHTML“組件”（見樣品）。
特征
- 支持廣泛范圍的瀏覽器。
- 此外，外觀是可定制的，只需要改動一個CSS文件，而不必須觸及JavaScript代碼。
- 用戶可以根據(jù)他的需要折疊/展開菜單的部分。
- 依賴于網(wǎng)頁標(biāo)準(zhǔn)。它不依賴于專有的瀏覽器的功能，同時如果它們可用時，充分利用一些。
- 提供高質(zhì)量的動畫和淡入淡出效果。如果不想要，動畫可以禁用，要么完全或限制在某個水平。
- 菜單部分可以嵌入普通HTML代碼。
- （菜單）項(xiàng)目在單擊時可以執(zhí)行定制JavaScript代碼。
- 當(dāng)菜單是隱藏的時，它擴(kuò)大了可用于其他網(wǎng)頁的空間。
- 它會在一個cookie中記住它的狀態(tài)，并在用戶的回顧該網(wǎng)頁時自動恢復(fù)。因此，開發(fā)人員并不需要在服務(wù)器端這樣做了。
- 2個工作模式：一次允許多個（菜單）節(jié)點(diǎn)被展開，或只有一個（菜單）節(jié)點(diǎn)被展開。
- 某些特征的配置可不需要重新裝載和重建菜單（因此，沒有一個網(wǎng)頁被重新加載）。他們將被保存在Cookie中。
- 允許菜單選項(xiàng)帶圖標(biāo)。如果一個圖標(biāo)不存在，將會使用'»'來代替。
- 允許使用帶有alpha-opacity的png圖標(biāo)，在IE瀏覽器中也可以。
- 可以顯示工具提示。
- 不使用框架。
- 降低了網(wǎng)頁的文件大小，因?yàn)閯?chuàng)建菜單的代碼可以被放進(jìn)一個JavaScript文件，該文件是將會被瀏覽器緩存。
- 菜單可以從服務(wù)器端腳本動態(tài)生成（在網(wǎng)頁顯示時）。
Browser support瀏覽器支持
- Windows中的Internet Explorer 6.0 - 出色的支持
- Windows中的Internet Explorer 5.5 - 良好的支持
- Windows中的Internet Explorer 5.0 –能工作，但沒有png方式
- Mozilla ， Firefox ，其他Gecko-s（任何平臺） - 出色的支持
- Opera7（任何平臺） - 很好的支持，沒有淡入淡出
- MacOSX的Apple Safari - 出色的支持
- Linux的Konqueror -良好的支持
由于大多數(shù)Web瀏覽器，甚至新的，默認(rèn)工作在兼容模式（也稱為QUIRKS模式），以便能夠正確顯示舊的網(wǎng)頁，Navbar需要您在網(wǎng)頁上聲明為嚴(yán)格的DOCTYPE。這引導(dǎo)瀏覽器切換到標(biāo)準(zhǔn)的執(zhí)行模式，Navbar將在QUIRKS模式不能正常工作。
安裝說明
1、從Navbar的發(fā)布包中復(fù)制“navbar”目錄到您的Web服務(wù)器，例如使用FTP客戶端。 If you copied it directly in your document root then a URL like the one below would be valid and lead to the main JS file:如果您直接復(fù)制它到您的文檔根目錄下，因此像下面一樣的一個網(wǎng)址將是有效的，并引導(dǎo)主要的js文件：
http://www.yourdomain.com/navbar/navbar.jss
在這種情況下， Navbar的路徑將是“/navbar” （紅色段）。因?yàn)镹avbar使用路徑來尋找控制圖標(biāo)，因此要在產(chǎn)生菜單之前指定它。
請注意，有些Web服務(wù)器或?yàn)g覽器可能不認(rèn)識.jss擴(kuò)展名（這的確是一個非標(biāo)準(zhǔn)的擴(kuò)展名），因此將無法傳遞正確的“content type”。如果您遇到任何問題，請重命名該文件為：“navbar-all.js”，并在<script>標(biāo)記中替換并載入該文件。
2、創(chuàng)建一個“setupmenu.js”文件。你可以把它放在任何你想存放的地方，沒有必要把它放在的/navbar的路徑下。此文件將包含初始化和生成菜單的代碼，以下是一個標(biāo)注了的范例，對于一個完整的例子，您應(yīng)該查看發(fā)行包中的“setupmenu.js”源文件，也可看看這個網(wǎng)頁的源文件。
_NavBar_url = "/navbar";
// 用于禁用當(dāng)前頁面功能的助手函數(shù)
function L(label) {
if (_NavBar_pageID.toLowerCase() == label.toLowerCase())
label = "!" + label;
return label;
}
var menu = new NavBar(document.getElementById("content"),
document.getElementById("beforemenu"),
document.getElementById("aftermenu"));
// 開始生成（添加頂部控制按鈕）
menu.openMenu();
// 一個菜單項(xiàng)目
new NavSection(
menu, // 父菜單
"a menu", // 項(xiàng)目標(biāo)簽
[
[ L("Home"), "home.html", "Homepage", "images/home.png" ],
[ L("Products"), "products.html", "Our products", "images/products.png" ],
[ L("Label"), "url", "A tooltip", "images/icon.png" ]
]
);
// 設(shè)置一些選項(xiàng)
menu.prefs["animation"] = 3; // "bloatware" ;-)
menu.prefs["auto-hide"] = true; // 自動隱藏
// 結(jié)束生成
menu.generate();
|
一些標(biāo)注：
- 如果一個到圖片的路徑是相對（即“images/home.png”），那么它將相對到您的網(wǎng)頁，而不是/navbar的路徑。
- 您可以使用PNG圖標(biāo)。包括在Internet Explorer，變化的opacity將可以工作。
- 所有定制選項(xiàng)的列表（如menu.prefs[“animation”]）見定制信息。
3、正如您從上述代碼所注意到的，我們創(chuàng)建了一個標(biāo)記為“a menu”名字的單個項(xiàng)目的菜單，并鏈接到頁面“home.html”， “products.html”。每個網(wǎng)頁應(yīng)具有以下結(jié)構(gòu)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- DOCTYPE 是很重要的，不要忘記了 -->
<html xmlns="http://www.w3.org/1999/xhtml"
style="padding: 0px; margin: 0px">
<head>
<title>yourwebsite.com homepage</title>
<!-- 包含主要的腳本 -->
<script type="text/javascript" src="/navbar/navbar.jss"></script>
<script type="text/javascript">
_NavBar_pageID = "Home"; /* 當(dāng)前頁的菜單標(biāo)記*/
</script>
<style type="text/css">
/* 提取導(dǎo)航欄的樣式 */
@import url(/navbar/navbar.css);
</style>
</head>
<body>
<div id="beforemenu">
[...] 顯示在導(dǎo)航欄中的內(nèi)容，位于菜單前面 [...]
</div>
<div id="aftermenu">
[...] 顯示在導(dǎo)航欄中的內(nèi)容，位于菜單后面 [...]
</div>
<div id="content">
<div>
[...] 這里放置你包含的頁面內(nèi)容 [...]
</div>
</div>
<!-- 為了能夠生成菜單，在這里加載setupmenu -->
<script type="text/javascript" src="setupmenu.js"></script>
</body>
</html>
|
菜單將建立在id“content”的DIV層里面。其他的兩個DIV層將被移到導(dǎo)航欄中，并且放在菜單的前面和后面，同時它們也是可選的。
Navbar的定制
外觀是完全可通過改變CSS文件而定制的。除此之外，有幾個自定義選項(xiàng)，需要一些JavaScript代碼。假如您是使用下面的命令創(chuàng)建的菜單：
var menu = new NavBar("content");
|
您可以修改下列自定義選項(xiàng)：
1. menu.prefs["animation"] = 0 | 1 | 2 | 3
意思是“0”為沒有所有的動畫，“1”為僅是項(xiàng)目的動畫，“2”為菜單欄的動畫，以及“3”為“膨脹”動畫（當(dāng)隱藏菜單時，整個網(wǎng)頁將產(chǎn)生動畫）。我強(qiáng)烈建議使用“2”（默認(rèn)值） 。
2. menu.prefs["mono-section"] = true | false
當(dāng)mono-section的值為true時，將是一次只有一個項(xiàng)目可見（被展開）。選擇另一部分將隱藏當(dāng)前可見的部分。
3. menu.prefs["generate-anim"] = true | false
如果這個值是true的話，那么菜單在啟動時會顯示動畫。
4. menu.prefs["auto-hide"] = true | false
如果這個值是true的話，菜單將會是一個“自動隱藏”的菜單，意思是當(dāng)鼠標(biāo)光標(biāo)鼠標(biāo)光標(biāo)離開菜單區(qū)域時，菜單將自動隱藏。
5. menu.prefs["tooltips"] = true | false
如果這個值是true（默認(rèn)）的話，導(dǎo)航欄將顯示工具提示。
6. menu.prefs["icon-width"] = 20
menu.prefs["icon-height"] = 14
允許您設(shè)定圖標(biāo)的尺寸。如果您提供了不同尺寸的圖片，它們將被縮小，以滿足上面兩行配置的要求。
7. menu.prefs["link-prefix"] = "/foo/bar/"
如果將此選項(xiàng)設(shè)置，則各個菜單所指向的鏈接都將加上特定前綴（例如：“/foot/bar/” ）。
8. menu.prefs["cookie-path"] = "/bar/foo/"
設(shè)定菜單存儲的cookie的路徑。Cookie用于在緊接后的請求中記住菜單的狀態(tài)。
9. menu.prefs["cookie-exp"] = 15
配置Cookie過期時間。如果沒有設(shè)置（默認(rèn)），則cookie將直到關(guān)閉瀏覽器（在會議結(jié)束時）才過期。上面的例子說明cookie將在15天后過期。
10. menu.prefs["link-target"] = "_blank"
設(shè)定在菜單中鏈接的target屬性。這應(yīng)該是一個frame的名稱。如果你想在當(dāng)前窗口/幀中打開所有鏈接，就請不要設(shè)置。
11. menu.prefs["nb-frames"] = 15
menu.prefs["ns-frames"] = "auto"
導(dǎo)航欄（nb-）或菜單項(xiàng)目動畫（ns-）的幀數(shù)。這個數(shù)字越高，動畫的速度就越慢。如果設(shè)為“自動” （默認(rèn)），幀的數(shù)目將基于菜單項(xiàng)目的高度來計算。
12. menu.prefs["nb-fps"] = 45
menu.prefs["ns-fps"] = 100
導(dǎo)航欄（nb-）或菜單項(xiàng)目動畫（ns-）每秒將會顯示的幀數(shù)。這個數(shù)字越高，動畫將會越平滑，但CPU的負(fù)載就會越高。其默認(rèn)值應(yīng)該對于大部分系統(tǒng)都是不錯的。
13. menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl"
menu.prefs["home-title"] = "NavBar project page"
menu.prefs["home-text"] = "NavBar"
這個首選項(xiàng)可讓您定義將會顯示在頭部/尾部和它的工具欄提示的鏈接。上面的例子顯示了默認(rèn)選項(xiàng)。
14. menu.prefs["no-controls"] = false
設(shè)置為true，為了隱藏“全局菜單控制”，即“+”，“-”按鈕操作所有菜單項(xiàng)目，以及左/右箭頭可關(guān)閉/打開菜單。
15. menu.prefs["no-disable"] = false
如果您設(shè)置為true的話，Navbar將不會禁用當(dāng)前的項(xiàng)目。如果你想當(dāng)前的項(xiàng)目看上去是激活的，并且沒有被禁用，可在這里設(shè)置“item-disabled” （或自定義字符串），同時該項(xiàng)目將獲得附加的字符串作為類的名稱。使用這個（類名稱）您可以在它的樣式表中定義一個自定義外觀。“item-disabled”是在navbar.css中定義的默認(rèn)的類別名稱，用來使得該項(xiàng)目看起來是“激活”的。