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