DynarchD?/span>
- 安装说明 - 如何安装在您的网站上?/span>
- 改变外观和感觉?/span>
- 支持 - 如果发生什么错误，请与我们联系?/span>
- 改变外观和感觉?/span>
License许可
请阅dq里的许可文?/span>?/span>
Navbar的概?/span>
我们的DHTMLD栏是一个多用途的cMWindows XP的资源管理器菜单的DHTML“lg”Q?/a>?a >样品Q?/span>
特征
- 支持q泛范围?u>览?/span>?/span>
- 此外Q外观是可定制的Q只需要改动一个CSS文gQ而不必须触及JavaScript代码?/span>
- 用户可以Ҏ他的需要折?展开菜单的部分?/span>
- 依赖于网|准。它不依赖于专有的浏览器的功能，同时如果它们可用Ӟ充分利用一些?/span>
- 提供高质量的动画和E入E出效果。如果不惌Q动d以禁用，要么完全或限制在某个水^?/span>
- 菜单部分可以嵌入普通HTML代码?/span>
- Q菜单）目在单L可以执行定制JavaScript代码?/span>
- 当菜单是隐藏的时Q它扩大了可用于其他|页的空间?/span>
- 它会在一个cookie中记住它的状态，q在用户的回该|页时自动恢复。因此，开发h员ƈ不需要在服务器端q样做了?/span>
- 2个工作模式：一ơ允许多个（菜单Q节点被展开Q或只有一个（菜单Q节点被展开?/span>
- 某些特征的配|可不需要重新装载和重徏菜单Q因此，没有一个网被重新加蝲Q。他们将被保存在Cookie中?/span>
- 允许菜单选项带图标。如果一个图标不存在Q将会?»'来代ѝ?/span>
- 允许使用带有alpha-opacity的png图标Q在IE览器中也可以?/span>
- 可以昄工具提示?/span>
- 不用框架?/span>
- 降低了网늚文g大小Q因为创单的代码可以被放q一个JavaScript文gQ该文g是将会被览器缓存?/span>
- 菜单可以从服务器端脚本动态生成（在网|C时Q?/span>
- 此外Q外观是可定制的Q只需要改动一个CSS文gQ而不必须触及JavaScript代码?/span>
Browser support览器支?/span>
- Windows中的Internet Explorer 6.0 - 的支?/span>
- Windows中的Internet Explorer 5.5 - 良好的支?/span>
- Windows中的Internet Explorer 5.0 –能工作，但没有png方式
- Mozilla Q?Firefox Q其?em>Gecko-sQQ何^収ͼ - 的支?/span>
- Opera7QQ何^収ͼ - 很好的支持，没有淡入淡出
- MacOSX的Apple Safari - 的支?/span>
- Linux的Konqueror -良好的支?/span>
- Windows中的Internet Explorer 5.5 - 良好的支?/span>
׃大多数Web览器，甚至新的Q默认工作在兼容模式Q也UCؓQUIRKS模式Q，以便能够正确昄旧的|页QNavbar需要您在网上声明Z格的DOCTYPE。这引导览器切换到标准的执行模式，Navbar在QUIRKS模式不能正常工作?/span>
1?/span>从Navbar的发布包中复?#8220;navbar”目录到您的Web服务器，例如使用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:如果您直接复制它到您的文档根目录下，因此像下面一L一个网址是有效的，q引g要的js文gQ?/span>
http://www.yourdomain.com/navbar/navbar.jss
在这U情况下Q?Navbar的\径将?#8220;/navbar” Q红色段Q。因为Navbar使用路径来寻找控制图标，因此要在产生菜单之前指定它?/span>
h意，有些Web服务器或览器可能不认识.jss扩展名（q的是一个非标准的扩展名Q，因此无法传递正的“content type”。如果您遇到M问题Q请重命名该文g为：“navbar-all.js”Qƈ?lt;script>标记中替换ƈ载入该文件?/span>
2?/span>创徏一?#8220;setupmenu.js”文g。你可以把它攑֜M你想存放的地方，没有必要把它攑֜?navbar的\径下。此文g包含初始化和生成菜单的代码Q以下是一个标注了的范例，对于一个完整的例子Q您应该查看发行包中?#8220;setupmenu.js”源文Ӟ也可看看q个|页的源文g?/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"));
// 开始生成（d剙控制按钮Q?/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; // 自动隐藏 // l束生成 menu.generate();
|
一些标注：
- 如果一个到囄的\径是相对Q即“images/home.png”Q，那么它将相对到您的网，而不?navbar的\径?/span>
- 您可以用PNG图标。包括在Internet ExplorerQ变化的opacity可以工作?/span>
- 所有定刉项的列表（如menu.prefs[“animation”]Q见定制信息?/span>
- 您可以用PNG图标。包括在Internet ExplorerQ变化的opacity可以工作?/span>
3?/span>正如您从上述代码所注意到的Q我们创Z一个标Cؓ“a menu”名字的单个项目的菜单Qƈ链接到页?#8220;home.html”Q?“products.html”。每个网应h以下l构Q?/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">
/* 提取D栏的样式 */ @import url(/navbar/navbar.css);
</style>
</head>
<body>
<div id="beforemenu">
[...] 昄在导航栏中的内容Q位于菜单前?[...] </div>
<div id="aftermenu">
[...] 昄在导航栏中的内容Q位于菜单后?[...] </div>
<div id="content">
<div>
[...] q里攄你包含的面内容 [...] </div>
</div>
<!-- Z能够生成菜单Q在q里加蝲setupmenu --> <script type="text/javascript" src="setupmenu.js"></script>
</body>
</html>
|
菜单徏立在id“content”的DIV层里面。其他的两个DIV层将被移到导航栏中，q且攑֜菜单的前面和后面Q同时它们也是可选的?/span>
Navbar的定?/strong>
外观是完全可通过改变CSS文g而定制的。除此之外，有几个自定义选项Q需要一些JavaScript代码。假如您是用下面的命o创徏的菜单：
var menu = new NavBar("content");
|
您可以修改下列自定义选项Q?/p>
1. menu.prefs["animation"] = 0 | 1 | 2 | 3
意思是“0”为没有所有的动画Q?#8220;1”Z是项目的动画Q?#8220;2”单栏的动画，以及“3”?#8220;膨胀”动画Q当隐藏菜单Ӟ整个|页生动画）。我强烈使用“2”Q默认| ?/p>
2. menu.prefs["mono-section"] = true | false
当mono-section的gؓtrueӞ是一ơ只有一个项目可见（被展开Q。选择另一部分隐藏当前可见的部分?/p>
3. menu.prefs["generate-anim"] = true | false
如果q个值是true的话Q那么菜单在启动时会昄动画?/p>
4. menu.prefs["auto-hide"] = true | false
如果q个值是true的话Q菜单将会是一?#8220;自动隐藏”的菜单，意思是当鼠标光标鼠标光标离开菜单区域Ӟ菜单自动隐藏?/p>
5. menu.prefs["tooltips"] = true | false
如果q个值是trueQ默认）的话Q导航栏显C工hC?/p>
6. menu.prefs["icon-width"] = 20
menu.prefs["icon-height"] = 14
允许您设定图标的寸。如果您提供了不同尺寸的囄Q它们将被羃，以满上面两行配|的要求?/p>
7. menu.prefs["link-prefix"] = "/foo/bar/"
如果此选项讄Q则各个菜单所指向的链接都加上特定前~Q例如：“/foot/bar/” Q?/p>
8. menu.prefs["cookie-path"] = "/bar/foo/"
讑֮菜单存储的cookie的\径。Cookie用于在紧接后的请求中C菜单的状态?/p>
9. menu.prefs["cookie-exp"] = 15
配置Cookieq期旉。如果没有设|（默认Q，则cookie直到关闭浏览器Q在会议l束Ӟ才过期。上面的例子说明cookie在15天后q期?/p>
10. menu.prefs["link-target"] = "_blank"
讑֮在菜单中链接的target属性。这应该是一个frame的名U。如果你惛_当前H口/帧中打开所有链接，p不要讄?/p>
11. menu.prefs["nb-frames"] = 15
menu.prefs["ns-frames"] = "auto"
D栏（nb-Q或菜单目动画Qns-Q的帧数。这个数字越高，动画的速度p慢。如果设?#8220;自动” Q默认）Q的数目将Z菜单目的高度来计算?/p>
12. menu.prefs["nb-fps"] = 45
menu.prefs["ns-fps"] = 100
D栏（nb-Q或菜单目动画Qns-Q每U将会显C的帧数。这个数字越高，动画会^滑，但CPU的负载就会越高。其默认值应该对于大部分pȝ都是不错的?/p>
13. menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl"
menu.prefs["home-title"] = "NavBar project page"
menu.prefs["home-text"] = "NavBar"
q个首选项可让您定义将会显C在头部/N和它的工h提示的链接。上面的例子昄了默认选项?/p>
14. menu.prefs["no-controls"] = false
讄?/strong>trueQؓ了隐?#8220;全局菜单控制”Q即“+”Q?#8220;-”按钮操作所有菜单项目，以及?右箭头可关闭/打开菜单?/p>
如果您设|ؓtrue的话QNavbar不会禁用当前的目。如果你惛_前的目看上LȀzȝQƈ且没有被用Q可在这里设|?#8220;item-disabled” Q或自定义字W串Q，同时该项目将获得附加的字W串作ؓcȝ名称。用这个（cdUͼ您可以在它的样式表中定义一个自定义外观?#8220;item-disabled”是在navbar.css中定义的默认的类别名Uͼ用来使得该项目看h?#8220;Ȁz?#8221;的?/p>
15. menu.prefs["no-disable"] = false
]]>