📅  最后修改于: 2023-12-03 14:48:38.947000             🧑  作者: Mango
XNG BreadCrumb是一个用于显示面包屑导航的JavaScript插件,它可以轻松地在网站中添加面包屑导航。通过使用XNG BreadCrumb,用户可以更快速、更方便地找到所需页面。
面包屑导航是一种常见的网站导航技术,它可以帮助用户迅速了解自己在网站中的位置,并可以通过单击面包屑导航中的链接快速回到之前访问的页面。
要在网站中使用XNG BreadCrumb,您需要在网站中引用XNG BreadCrumb的JavaScript文件。您可以从 GitHub 下载XNG BreadCrumb的源代码,并将其包含在您的网站中。
安装XNG BreadCrumb非常简单,只需将以下代码添加到HTML文件中:
<link rel="stylesheet" href="xng-breadcrumb.css">
<script src="xng-breadcrumb.js"></script>
要在网站中使用XNG BreadCrumb,您需要将面包屑导航放置在适当的位置,并指定用于呈现面包屑导航的元素。下面是一个使用XNG BreadCrumb的简单示例:
<div id="breadcrumb"></div>
<script>
var breadcrumb = new XngBreadCrumb({
container: '#breadcrumb'
});
breadcrumb.push(['Home', '/']);
breadcrumb.push(['Category', '/category']);
breadcrumb.push('Product');
</script>
以下是可用于XNG BreadCrumb的选项,以及它们的含义:
| 选项 | 类型 | 默认值 | 描述 | |-----------|-------|-----|-------------------------------------------| | container | string | | 用于呈现面包屑导航的元素的选择器。 | | divider | string | / | 用于分隔导航链接的字符串。 | | onPush | function | | 在添加新的面包屑链接时调用的回调函数。该函数传递新链接的标题和URL。 | | onUpdate | function | | 在更新面包屑导航时调用的回调函数。该函数传递更新后的链接数组。 |
以下是可用于XNG BreadCrumb的方法,以及它们的含义:
| 方法 | 描述 | |------------------|--------------------------------| | push(link) | 将新的面包屑链接添加到导航上。 | | pop() | 从面包屑导航中删除最后一个链接。 | | clear() | 从面包屑导航中删除所有链接。 | | update(links) | 更新面包屑导航中的链接。 | | getCurrentLink() | 获取当前选定的链接。 |
XNG BreadCrumb是一个简单易用的面包屑导航插件,帮助用户更好地了解他们在网站中的位置,并使其更容易回到之前的页面。它具有一些有用的选项和方法,可以满足各种需求。如果您正在寻找一种简单且易于使用的面包屑导航解决方案,那么XNG BreadCrumb是一个值得尝试的选择。