Dynarch瀵艱埅鏍?/span>
- 瀹夎璇存槑 - 濡備綍瀹夎鍦ㄦ偍鐨勭綉绔欎笂銆?/span>
- 鏀瑰彉澶栬鍜屾劅瑙夈?/span>
- 鏀寔 - 濡傛灉鍙戠敓浠涔堥敊璇紝璇蜂笌鎴戜滑鑱旂郴銆?/span>
- 鏀瑰彉澶栬鍜屾劅瑙夈?/span>
License璁稿彲
璇烽槄璇誨湪榪欓噷鐨勮鍙枃鏈?/span>銆?/span>
Navbar鐨勬鍐?/span>
鎴戜滑鐨凞HTML瀵艱埅鏍忔槸涓涓鐢ㄩ旂殑綾諱技Windows XP鐨勮祫婧愮鐞嗗櫒鑿滃崟鐨凞HTML“緇勪歡”錛?/a>瑙?a >鏍峰搧錛夈?/span>
鐗瑰緛
- 鏀寔騫挎硾鑼冨洿鐨?u>嫻忚鍣?/span>銆?/span>
- 姝ゅ錛屽瑙傛槸鍙畾鍒剁殑錛屽彧闇瑕佹敼鍔ㄤ竴涓狢SS鏂囦歡錛岃屼笉蹇呴』瑙﹀強JavaScript浠ｇ爜銆?/span>
- 鐢ㄦ埛鍙互鏍規嵁浠栫殑闇瑕佹姌鍙?灞曞紑鑿滃崟鐨勯儴鍒嗐?/span>
- 渚濊禆浜庣綉欏墊爣鍑嗐傚畠涓嶄緷璧栦簬涓撴湁鐨勬祻瑙堝櫒鐨勫姛鑳斤紝鍚屾椂濡傛灉瀹冧滑鍙敤鏃訛紝鍏呭垎鍒╃敤涓浜涖?/span>
- 鎻愪緵楂樿川閲忕殑鍔ㄧ敾鍜屾貳鍏ユ貳鍑烘晥鏋溿傚鏋滀笉鎯寵錛屽姩鐢誨彲浠ョ鐢紝瑕佷箞瀹屽叏鎴栭檺鍒跺湪鏌愪釜姘村鉤銆?/span>
- 鑿滃崟閮ㄥ垎鍙互宓屽叆鏅欻TML浠ｇ爜銆?/span>
- 錛堣彍鍗曪級欏圭洰鍦ㄥ崟鍑繪椂鍙互鎵ц瀹氬埗JavaScript浠ｇ爜銆?/span>
- 褰撹彍鍗曟槸闅愯棌鐨勬椂錛屽畠鎵╁ぇ浜嗗彲鐢ㄤ簬鍏朵粬緗戦〉鐨勭┖闂淬?/span>
- 瀹冧細鍦ㄤ竴涓猚ookie涓浣忓畠鐨勭姸鎬侊紝騫跺湪鐢ㄦ埛鐨勫洖欏捐緗戦〉鏃惰嚜鍔ㄦ仮澶嶃傚洜姝わ紝寮鍙戜漢鍛樺茍涓嶉渶瑕佸湪鏈嶅姟鍣ㄧ榪欐牱鍋氫簡銆?/span>
- 2涓伐浣滄ā寮忥細涓嬈″厑璁稿涓紙鑿滃崟錛夎妭鐐硅灞曞紑錛屾垨鍙湁涓涓紙鑿滃崟錛夎妭鐐硅灞曞紑銆?/span>
- 鏌愪簺鐗瑰緛鐨勯厤緗彲涓嶉渶瑕侀噸鏂拌杞藉拰閲嶅緩鑿滃崟錛堝洜姝わ紝娌℃湁涓涓綉欏佃閲嶆柊鍔犺澆錛夈備粬浠皢琚繚瀛樺湪Cookie涓?/span>
- 鍏佽鑿滃崟閫夐」甯﹀浘鏍囥傚鏋滀竴涓浘鏍囦笉瀛樺湪錛屽皢浼氫嬌鐢?»'鏉ヤ唬鏇褲?/span>
- 鍏佽浣跨敤甯︽湁alpha-opacity鐨刾ng鍥炬爣錛屽湪IE嫻忚鍣ㄤ腑涔熷彲浠ャ?/span>
- 鍙互鏄劇ず宸ュ叿鎻愮ず銆?/span>
- 涓嶄嬌鐢ㄦ鏋躲?/span>
- 闄嶄綆浜嗙綉欏電殑鏂囦歡澶у皬錛屽洜涓哄垱寤鴻彍鍗曠殑浠ｇ爜鍙互琚斁榪涗竴涓狫avaScript鏂囦歡錛岃鏂囦歡鏄皢浼氳嫻忚鍣ㄧ紦瀛樸?/span>
- 鑿滃崟鍙互浠庢湇鍔″櫒绔剼鏈姩鎬佺敓鎴愶紙鍦ㄧ綉欏墊樉紺烘椂錛夈?/span>
- 姝ゅ錛屽瑙傛槸鍙畾鍒剁殑錛屽彧闇瑕佹敼鍔ㄤ竴涓狢SS鏂囦歡錛岃屼笉蹇呴』瑙﹀強JavaScript浠ｇ爜銆?/span>
Browser support嫻忚鍣ㄦ敮鎸?/span>
- Windows涓殑Internet Explorer 6.0 - 鍑鴻壊鐨勬敮鎸?/span>
- Windows涓殑Internet Explorer 5.5 - 鑹ソ鐨勬敮鎸?/span>
- Windows涓殑Internet Explorer 5.0 –鑳藉伐浣滐紝浣嗘病鏈塸ng鏂瑰紡
- Mozilla 錛?Firefox 錛屽叾浠?em>Gecko-s錛堜換浣曞鉤鍙幫級 - 鍑鴻壊鐨勬敮鎸?/span>
- Opera7錛堜換浣曞鉤鍙幫級 - 寰堝ソ鐨勬敮鎸侊紝娌℃湁娣″叆娣″嚭
- MacOSX鐨凙pple Safari - 鍑鴻壊鐨勬敮鎸?/span>
- Linux鐨凨onqueror -鑹ソ鐨勬敮鎸?/span>
- Windows涓殑Internet Explorer 5.5 - 鑹ソ鐨勬敮鎸?/span>
鐢變簬澶у鏁癢eb嫻忚鍣紝鐢氳嚦鏂扮殑錛岄粯璁ゅ伐浣滃湪鍏煎妯″紡錛堜篃縐頒負QUIRKS妯″紡錛夛紝浠ヤ究鑳藉姝ｇ‘鏄劇ず鏃х殑緗戦〉錛孨avbar闇瑕佹偍鍦ㄧ綉欏典笂澹版槑涓轟弗鏍肩殑DOCTYPE銆傝繖寮曞嫻忚鍣ㄥ垏鎹㈠埌鏍囧噯鐨勬墽琛屾ā寮忥紝Navbar灝嗗湪QUIRKS妯″紡涓嶈兘姝ｅ父宸ヤ綔銆?/span>
1銆?/span>浠嶯avbar鐨勫彂甯冨寘涓鍒?#8220;navbar”鐩綍鍒版偍鐨刉eb鏈嶅姟鍣紝渚嬪浣跨敤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:濡傛灉鎮ㄧ洿鎺ュ鍒跺畠鍒版偍鐨勬枃妗ｆ牴鐩綍涓嬶紝鍥犳鍍忎笅闈竴鏍風殑涓涓綉鍧灝嗘槸鏈夋晥鐨勶紝騫跺紩瀵間富瑕佺殑js鏂囦歡錛?/span>
http://www.yourdomain.com/navbar/navbar.jss
鍦ㄨ繖縐嶆儏鍐典笅錛?Navbar鐨勮礬寰勫皢鏄?#8220;/navbar” 錛堢孩鑹叉錛夈傚洜涓篘avbar浣跨敤璺緞鏉ュ鎵炬帶鍒跺浘鏍囷紝鍥犳瑕佸湪浜х敓鑿滃崟涔嬪墠鎸囧畾瀹冦?/span>
璇鋒敞鎰忥紝鏈変簺Web鏈嶅姟鍣ㄦ垨嫻忚鍣ㄥ彲鑳戒笉璁よ瘑.jss鎵╁睍鍚嶏紙榪欑殑紜槸涓涓潪鏍囧噯鐨勬墿灞曞悕錛夛紝鍥犳灝嗘棤娉曚紶閫掓紜殑“content type”銆傚鏋滄偍閬囧埌浠諱綍闂錛岃閲嶅懡鍚嶈鏂囦歡涓猴細“navbar-all.js”錛屽茍鍦?lt;script>鏍囪涓浛鎹㈠茍杞藉叆璇ユ枃浠躲?/span>
2銆?/span>鍒涘緩涓涓?#8220;setupmenu.js”鏂囦歡銆備綘鍙互鎶婂畠鏀懼湪浠諱綍浣犳兂瀛樻斁鐨勫湴鏂癸紝娌℃湁蹇呰鎶婂畠鏀懼湪鐨?navbar鐨勮礬寰勪笅銆傛鏂囦歡灝嗗寘鍚垵濮嬪寲鍜岀敓鎴愯彍鍗曠殑浠ｇ爜錛屼互涓嬫槸涓涓爣娉ㄤ簡鐨勮寖渚嬶紝瀵逛簬涓涓畬鏁寸殑渚嬪瓙錛屾偍搴旇鏌ョ湅鍙戣鍖呬腑鐨?#8220;setupmenu.js”婧愭枃浠訛紝涔熷彲鐪嬬湅榪欎釜緗戦〉鐨勬簮鏂囦歡銆?/span>
_NavBar_url = "/navbar";
// 鐢ㄤ簬紱佺敤褰撳墠欏甸潰鍔熻兘鐨勫姪鎵嬪嚱鏁?/span> 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"));
// 寮濮嬬敓鎴愶紙娣誨姞欏墮儴鎺у埗鎸夐挳錛?/span> menu.openMenu();
// 涓涓彍鍗曢」鐩?/span> new NavSection( menu, // 鐖惰彍鍗?/span> "a menu", // 欏圭洰鏍囩 [
[ 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" ]
]
);
// 璁劇疆涓浜涢夐」 menu.prefs["animation"] = 3; // "bloatware" ;-)
menu.prefs["auto-hide"] = true; // 鑷姩闅愯棌 // 緇撴潫鐢熸垚 menu.generate();
|
涓浜涙爣娉細
- 濡傛灉涓涓埌鍥劇墖鐨勮礬寰勬槸鐩稿錛堝嵆“images/home.png”錛夛紝閭ｄ箞瀹冨皢鐩稿鍒版偍鐨勭綉欏碉紝鑰屼笉鏄?navbar鐨勮礬寰勩?/span>
- 鎮ㄥ彲浠ヤ嬌鐢≒NG鍥炬爣銆傚寘鎷湪Internet Explorer錛屽彉鍖栫殑opacity灝嗗彲浠ュ伐浣溿?/span>
- 鎵鏈夊畾鍒墮夐」鐨勫垪琛紙濡俶enu.prefs[“animation”]錛夎瀹氬埗淇℃伅銆?/span>
- 鎮ㄥ彲浠ヤ嬌鐢≒NG鍥炬爣銆傚寘鎷湪Internet Explorer錛屽彉鍖栫殑opacity灝嗗彲浠ュ伐浣溿?/span>
3銆?/span>姝ｅ鎮ㄤ粠涓婅堪浠ｇ爜鎵娉ㄦ剰鍒扮殑錛屾垜浠垱寤轟簡涓涓爣璁頒負“a menu”鍚嶅瓧鐨勫崟涓」鐩殑鑿滃崟錛屽茍閾炬帴鍒伴〉闈?#8220;home.html”錛?“products.html”銆傛瘡涓綉欏靛簲鍏鋒湁浠ヤ笅緇撴瀯錛?/span>
<!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"; /* 褰撳墠欏電殑鑿滃崟鏍囪*/ </script>
<style type="text/css">
/* 鎻愬彇瀵艱埅鏍忕殑鏍峰紡 */ @import url(/navbar/navbar.css);
</style>
</head>
<body>
<div id="beforemenu">
[...] 鏄劇ず鍦ㄥ鑸爮涓殑鍐呭錛屼綅浜庤彍鍗曞墠闈?[...] </div>
<div id="aftermenu">
[...] 鏄劇ず鍦ㄥ鑸爮涓殑鍐呭錛屼綅浜庤彍鍗曞悗闈?[...] </div>
<div id="content">
<div>
[...] 榪欓噷鏀劇疆浣犲寘鍚殑欏甸潰鍐呭 [...] </div>
</div>
<!-- 涓轟簡鑳藉鐢熸垚鑿滃崟錛屽湪榪欓噷鍔犺澆setupmenu --> <script type="text/javascript" src="setupmenu.js"></script>
</body>
</html>
|
鑿滃崟灝嗗緩绔嬪湪id“content”鐨凞IV灞傞噷闈€傚叾浠栫殑涓や釜DIV灞傚皢琚Щ鍒板鑸爮涓紝騫朵笖鏀懼湪鑿滃崟鐨勫墠闈㈠拰鍚庨潰錛屽悓鏃跺畠浠篃鏄彲閫夌殑銆?/span>
Navbar鐨勫畾鍒?/strong>
澶栬鏄畬鍏ㄥ彲閫氳繃鏀瑰彉CSS鏂囦歡鑰屽畾鍒剁殑銆傞櫎姝や箣澶栵紝鏈夊嚑涓嚜瀹氫箟閫夐」錛岄渶瑕佷竴浜汮avaScript浠ｇ爜銆傚亣濡傛偍鏄嬌鐢ㄤ笅闈㈢殑鍛戒護鍒涘緩鐨勮彍鍗曪細
var menu = new NavBar("content");
|
鎮ㄥ彲浠ヤ慨鏀逛笅鍒楄嚜瀹氫箟閫夐」錛?/p>
1. menu.prefs["animation"] = 0 | 1 | 2 | 3
鎰忔濇槸“0”涓烘病鏈夋墍鏈夌殑鍔ㄧ敾錛?#8220;1”涓轟粎鏄」鐩殑鍔ㄧ敾錛?#8220;2”涓鴻彍鍗曟爮鐨勫姩鐢伙紝浠ュ強“3”涓?#8220;鑶ㄨ儉”鍔ㄧ敾錛堝綋闅愯棌鑿滃崟鏃訛紝鏁翠釜緗戦〉灝嗕駭鐢熷姩鐢伙級銆傛垜寮虹儓寤鴻浣跨敤“2”錛堥粯璁ゅ鹼級 銆?/p>
2. menu.prefs["mono-section"] = true | false
褰搈ono-section鐨勫間負true鏃訛紝灝嗘槸涓嬈″彧鏈変竴涓」鐩彲瑙侊紙琚睍寮錛夈傞夋嫨鍙︿竴閮ㄥ垎灝嗛殣钘忓綋鍓嶅彲瑙佺殑閮ㄥ垎銆?/p>
3. menu.prefs["generate-anim"] = true | false
濡傛灉榪欎釜鍊兼槸true鐨勮瘽錛岄偅涔堣彍鍗曞湪鍚姩鏃朵細鏄劇ず鍔ㄧ敾銆?/p>
4. menu.prefs["auto-hide"] = true | false
濡傛灉榪欎釜鍊兼槸true鐨勮瘽錛岃彍鍗曞皢浼氭槸涓涓?#8220;鑷姩闅愯棌”鐨勮彍鍗曪紝鎰忔濇槸褰撻紶鏍囧厜鏍囬紶鏍囧厜鏍囩寮鑿滃崟鍖哄煙鏃訛紝鑿滃崟灝嗚嚜鍔ㄩ殣钘忋?/p>
5. menu.prefs["tooltips"] = true | false
濡傛灉榪欎釜鍊兼槸true錛堥粯璁わ級鐨勮瘽錛屽鑸爮灝嗘樉紺哄伐鍏鋒彁紺恒?/p>
6. menu.prefs["icon-width"] = 20
menu.prefs["icon-height"] = 14
鍏佽鎮ㄨ瀹氬浘鏍囩殑灝哄銆傚鏋滄偍鎻愪緵浜嗕笉鍚屽昂瀵哥殑鍥劇墖錛屽畠浠皢琚緝灝忥紝浠ユ弧瓚充笂闈袱琛岄厤緗殑瑕佹眰銆?/p>
7. menu.prefs["link-prefix"] = "/foo/bar/"
濡傛灉灝嗘閫夐」璁劇疆錛屽垯鍚勪釜鑿滃崟鎵鎸囧悜鐨勯摼鎺ラ兘灝嗗姞涓婄壒瀹氬墠緙錛堜緥濡傦細“/foot/bar/” 錛夈?/p>
8. menu.prefs["cookie-path"] = "/bar/foo/"
璁懼畾鑿滃崟瀛樺偍鐨刢ookie鐨勮礬寰勩侰ookie鐢ㄤ簬鍦ㄧ揣鎺ュ悗鐨勮姹備腑璁頒綇鑿滃崟鐨勭姸鎬併?/p>
9. menu.prefs["cookie-exp"] = 15
閰嶇疆Cookie榪囨湡鏃墮棿銆傚鏋滄病鏈夎緗紙榛樿錛夛紝鍒檆ookie灝嗙洿鍒板叧闂祻瑙堝櫒錛堝湪浼氳緇撴潫鏃訛級鎵嶈繃鏈熴備笂闈㈢殑渚嬪瓙璇存槑cookie灝嗗湪15澶╁悗榪囨湡銆?/p>
10. menu.prefs["link-target"] = "_blank"
璁懼畾鍦ㄨ彍鍗曚腑閾炬帴鐨則arget灞炴с傝繖搴旇鏄竴涓猣rame鐨勫悕縐般傚鏋滀綘鎯沖湪褰撳墠紿楀彛/甯т腑鎵撳紑鎵鏈夐摼鎺ワ紝灝辮涓嶈璁劇疆銆?/p>
11. menu.prefs["nb-frames"] = 15
menu.prefs["ns-frames"] = "auto"
瀵艱埅鏍忥紙nb-錛夋垨鑿滃崟欏圭洰鍔ㄧ敾錛坣s-錛夌殑甯ф暟銆傝繖涓暟瀛楄秺楂橈紝鍔ㄧ敾鐨勯熷害灝辮秺鎱€傚鏋滆涓?#8220;鑷姩” 錛堥粯璁わ級錛屽撫鐨勬暟鐩皢鍩轟簬鑿滃崟欏圭洰鐨勯珮搴︽潵璁＄畻銆?/p>
12. menu.prefs["nb-fps"] = 45
menu.prefs["ns-fps"] = 100
瀵艱埅鏍忥紙nb-錛夋垨鑿滃崟欏圭洰鍔ㄧ敾錛坣s-錛夋瘡縐掑皢浼氭樉紺虹殑甯ф暟銆傝繖涓暟瀛楄秺楂橈紝鍔ㄧ敾灝嗕細瓚婂鉤婊戯紝浣咰PU鐨勮礋杞藉氨浼氳秺楂樸傚叾榛樿鍊煎簲璇ュ浜庡ぇ閮ㄥ垎緋葷粺閮芥槸涓嶉敊鐨勩?/p>
13. menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl"
menu.prefs["home-title"] = "NavBar project page"
menu.prefs["home-text"] = "NavBar"
榪欎釜棣栭夐」鍙鎮ㄥ畾涔夊皢浼氭樉紺哄湪澶撮儴/灝鵑儴鍜屽畠鐨勫伐鍏鋒爮鎻愮ず鐨勯摼鎺ャ備笂闈㈢殑渚嬪瓙鏄劇ず浜嗛粯璁ら夐」銆?/p>
14. menu.prefs["no-controls"] = false
璁劇疆涓?/strong>true錛屼負浜嗛殣钘?#8220;鍏ㄥ眬鑿滃崟鎺у埗”錛屽嵆“+”錛?#8220;-”鎸夐挳鎿嶄綔鎵鏈夎彍鍗曢」鐩紝浠ュ強宸?鍙崇澶村彲鍏抽棴/鎵撳紑鑿滃崟銆?/p>
濡傛灉鎮ㄨ緗負true鐨勮瘽錛孨avbar灝嗕笉浼氱鐢ㄥ綋鍓嶇殑欏圭洰銆傚鏋滀綘鎯沖綋鍓嶇殑欏圭洰鐪嬩笂鍘繪槸嬋媧葷殑錛屽茍涓旀病鏈夎紱佺敤錛屽彲鍦ㄨ繖閲岃緗?#8220;item-disabled” 錛堟垨鑷畾涔夊瓧絎︿覆錛夛紝鍚屾椂璇ラ」鐩皢鑾峰緱闄勫姞鐨勫瓧絎︿覆浣滀負綾葷殑鍚嶇О銆備嬌鐢ㄨ繖涓紙綾誨悕縐幫級鎮ㄥ彲浠ュ湪瀹冪殑鏍峰紡琛ㄤ腑瀹氫箟涓涓嚜瀹氫箟澶栬銆?#8220;item-disabled”鏄湪navbar.css涓畾涔夌殑榛樿鐨勭被鍒悕縐幫紝鐢ㄦ潵浣垮緱璇ラ」鐩湅璧鋒潵鏄?#8220;嬋媧?#8221;鐨勩?/p>
15. menu.prefs["no-disable"] = false
]]>