注:毕业设计和工作中多次接触到这个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中定义的默认的类别名称,用来使得该项目看起来是“激活”的。
分享到:
相关推荐
ios的app的navigation bar的代码的实现。
android navigation bar 的一些资料
PagerBottomTabStrip, An bottom navigation bar for Android
This repo contains translations of the app Custom Navigation Bar on Google Play. Feel free contact me at paphonb@gmail.com if you want to help translating the app to your language.
IOS7Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色设置
一个.NET Windows Form控件,实现Outlook 2003左边导航栏的样式及功能
1.android tablehost 实现 类似qq 分组 消息,联系人,动态的分组策略 , 2.滑动手势 3.listview 分页 4.复用 navigation bar
1.android tablehost 实现 类似qq 分组 消息,联系人,动态的分组策略 , 2.滑动手势 3.listview 分页 4.复用navigation bar 5.添加 网络获取 doget dopust
1.android tablehost 实现 类似qq 分组 消息,联系人,动态的分组策略 , 2.滑动手势 3.listview 分页 4.复用navigation bar 5.添加网络获取 do get post 6,异步获取图片
在iOS5.0以上版本,要想navigation bar上面也能显示木质图片,要更改“WoodUINavigationAppDelegate.m”文件的一段代码:[navigationController.navigationBar insertSubview:imageView atIndex:0];改成:...
仅限Android目录支持安装React本机> = 0.60.0 1-安装软件包: $ yarn add react-native-navigation-bar-color 或者$ npm install react-native-navigation-bar-color --save 仅此而已! React本机<= 0.59.0 1-...
底部导航栏jar包bottom-navigation-bar-1.3.0-sources.jar
navigation-toolbar-android,幻灯片建模的UI导航控制器,博客附件,效果请查看博客相对应项目。
custom_navigation_bar 具有气泡单击效果的自定义导航栏。 概述 该项目的灵感和 当您单击导航栏时,此软件包可为您提供可爱的泡泡效果。 盘带: 实施的: 画廊 如何安装 将此添加到包的pubspec.yaml文件中...
您可以通过以下方式之一导入库下载或通过Maven获取: < dependency> < groupId>com.ashokvarma.android</ groupId> < artifactId>bottom-navigation-bar</ artifactId> < version>2.2.0</ version> < type>pom...
XD导航栏和工具栏
自定义UINavigationBar。自定义导航条的按钮,包括增加按钮、segments等等。在导航条左边、中间、右边增加按钮或其他控件。 注意:请在Mac下解压使用
http://blog.csdn.net/duxinfeng2010/article/category/1155790 有运行结果截图
自定义导航条上面返回按钮(backbutton)的文字和颜色,以及自定义导航条的颜色和图片。 注意:请在Mac下解压使用
本文主要介绍了Navigation bar的注意事项。具有一定的参考价值,下面跟着小编一起来看下吧