[译]Dynarch Navigation Bar

tanzek

浏览: 52542 次
性别:
来自: 湖南

最近访客更多访客>>

gundam_

paopao3

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

翻译

JavaScript 浏览器 CSS 项目管理设计模式

注：毕业设计和工作中多次接触到这个Dynarch Navigation Bar，其文档是英文的，但因一些原因，在这里翻译了一下它的一小部分，原文地址是：http://www.dynarch.com/demos/NavBar/，如有不当之处还请各位读友指正。

Dynarch导航栏

安装说明 - 如何安装在您的网站上。
定制 - 改变外观和感觉。
支持 - 如果发生什么错误，请与我们联系。

License许可

请阅读在这里的许可文本。

Navbar的概况

我们的DHTML导航栏是一个多用途的类似Windows XP的资源管理器菜单的DHTML“组件”（见样品）。

特征

支持广泛范围的浏览器。
此外，外观是可定制的，只需要改动一个CSS文件，而不必须触及JavaScript代码。
用户可以根据他的需要折叠/展开菜单的部分。
依赖于网页标准。它不依赖于专有的浏览器的功能，同时如果它们可用时，充分利用一些。
提供高质量的动画和淡入淡出效果。如果不想要，动画可以禁用，要么完全或限制在某个水平。
菜单部分可以嵌入普通HTML代码。
（菜单）项目在单击时可以执行定制JavaScript代码。
当菜单是隐藏的时，它扩大了可用于其他网页的空间。
它会在一个cookie中记住它的状态，并在用户的回顾该网页时自动恢复。因此，开发人员并不需要在服务器端这样做了。
2个工作模式：一次允许多个（菜单）节点被展开，或只有一个（菜单）节点被展开。
某些特征的配置可不需要重新装载和重建菜单（因此，没有一个网页被重新加载）。他们将被保存在Cookie中。
允许菜单选项带图标。如果一个图标不存在，将会使用'»'来代替。
允许使用带有alpha-opacity的png图标，在IE浏览器中也可以。
可以显示工具提示。
不使用框架。
降低了网页的文件大小，因为创建菜单的代码可以被放进一个JavaScript文件，该文件是将会被浏览器缓存。
菜单可以从服务器端脚本动态生成（在网页显示时）。

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 -良好的支持

由于大多数Web浏览器，甚至新的，默认工作在兼容模式（也称为QUIRKS模式），以便能够正确显示旧的网页，Navbar需要您在网页上声明为严格的DOCTYPE。这引导浏览器切换到标准的执行模式，Navbar将在QUIRKS模式不能正常工作。

安装说明

1、从Navbar的发布包中复制“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:如果您直接复制它到您的文档根目录下，因此像下面一样的一个网址将是有效的，并引导主要的js文件：

http://www.yourdomain.com/navbar/navbar.jss

在这种情况下， Navbar的路径将是“/navbar” （红色段）。因为Navbar使用路径来寻找控制图标，因此要在产生菜单之前指定它。

请注意，有些Web服务器或浏览器可能不认识.jss扩展名（这的确是一个非标准的扩展名），因此将无法传递正确的“content type”。如果您遇到任何问题，请重命名该文件为：“navbar-all.js”，并在<script>标记中替换并载入该文件。

2、创建一个“setupmenu.js”文件。你可以把它放在任何你想存放的地方，没有必要把它放在的/navbar的路径下。此文件将包含初始化和生成菜单的代码，以下是一个标注了的范例，对于一个完整的例子，您应该查看发行包中的“setupmenu.js”源文件，也可看看这个网页的源文件。

_NavBar_url = "/navbar";

// 用于禁用当前页面功能的助手函数

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();

// 一个菜单项目

new NavSection(

 menu, // 父菜单

 "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的路径。
您可以使用PNG图标。包括在Internet Explorer，变化的opacity将可以工作。
所有定制选项的列表（如menu.prefs[“animation”]）见定制信息。

3、正如您从上述代码所注意到的，我们创建了一个标记为“a menu”名字的单个项目的菜单，并链接到页面“home.html”， “products.html”。每个网页应具有以下结构：

<!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”的DIV层里面。其他的两个DIV层将被移到导航栏中，并且放在菜单的前面和后面，同时它们也是可选的。

Navbar的定制

外观是完全可通过改变CSS文件而定制的。除此之外，有几个自定义选项，需要一些JavaScript代码。假如您是使用下面的命令创建的菜单：

var menu = new NavBar("content");

您可以修改下列自定义选项：

1. menu.prefs["animation"] = 0 | 1 | 2 | 3

意思是“0”为没有所有的动画，“1”为仅是项目的动画，“2”为菜单栏的动画，以及“3”为“膨胀”动画（当隐藏菜单时，整个网页将产生动画）。我强烈建议使用“2”（默认值）。

2. menu.prefs["mono-section"] = true | false

当mono-section的值为true时，将是一次只有一个项目可见（被展开）。选择另一部分将隐藏当前可见的部分。

3. menu.prefs["generate-anim"] = true | false

如果这个值是true的话，那么菜单在启动时会显示动画。

4. menu.prefs["auto-hide"] = true | false

如果这个值是true的话，菜单将会是一个“自动隐藏”的菜单，意思是当鼠标光标鼠标光标离开菜单区域时，菜单将自动隐藏。

5. menu.prefs["tooltips"] = true | false

如果这个值是true（默认）的话，导航栏将显示工具提示。

6. menu.prefs["icon-width"] = 20 menu.prefs["icon-height"] = 14

允许您设定图标的尺寸。如果您提供了不同尺寸的图片，它们将被缩小，以满足上面两行配置的要求。

7. menu.prefs["link-prefix"] = "/foo/bar/"

如果将此选项设置，则各个菜单所指向的链接都将加上特定前缀（例如：“/foot/bar/” ）。

8. menu.prefs["cookie-path"] = "/bar/foo/"

设定菜单存储的cookie的路径。Cookie用于在紧接后的请求中记住菜单的状态。

9. menu.prefs["cookie-exp"] = 15

配置Cookie过期时间。如果没有设置（默认），则cookie将直到关闭浏览器（在会议结束时）才过期。上面的例子说明cookie将在15天后过期。

10. menu.prefs["link-target"] = "_blank"

设定在菜单中链接的target属性。这应该是一个frame的名称。如果你想在当前窗口/帧中打开所有链接，就请不要设置。

11. menu.prefs["nb-frames"] = 15 menu.prefs["ns-frames"] = "auto"

导航栏（nb-）或菜单项目动画（ns-）的帧数。这个数字越高，动画的速度就越慢。如果设为“自动” （默认），帧的数目将基于菜单项目的高度来计算。

12. menu.prefs["nb-fps"] = 45 menu.prefs["ns-fps"] = 100

导航栏（nb-）或菜单项目动画（ns-）每秒将会显示的帧数。这个数字越高，动画将会越平滑，但CPU的负载就会越高。其默认值应该对于大部分系统都是不错的。

13. menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl" menu.prefs["home-title"] = "NavBar project page" menu.prefs["home-text"] = "NavBar"

这个首选项可让您定义将会显示在头部/尾部和它的工具栏提示的链接。上面的例子显示了默认选项。

14. menu.prefs["no-controls"] = false

设置为true，为了隐藏“全局菜单控制”，即“+”，“-”按钮操作所有菜单项目，以及左/右箭头可关闭/打开菜单。

15. menu.prefs["no-disable"] = false

如果您设置为true的话，Navbar将不会禁用当前的项目。如果你想当前的项目看上去是激活的，并且没有被禁用，可在这里设置“item-disabled” （或自定义字符串），同时该项目将获得附加的字符串作为类的名称。使用这个（类名称）您可以在它的样式表中定义一个自定义外观。“item-disabled”是在navbar.css中定义的默认的类别名称，用来使得该项目看起来是“激活”的。

分享到：