Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
48 lines (45 sloc) 1.25 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Breadcrumbs</title>
<link rel="stylesheet" href="breadcrumbs.css"></link>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="breadcrumbs.js"></script>
<style>
#breadcrumb-container {
margin-left: 16px;
margin-top: 16px;
}
#content {
margin: 32px;
}
#resetButton {
margin-left: 32px;
}
</style>
<script>
var fullPath = ['element1', 'element2', 'element3', 'element4', 'element5', 'element6', 'element7'];
window.addEventListener('load', function() {
var $breadcrumbs = $('#breadcrumb-container').breadcrumbs({
'maxEntries': 5,
'path': fullPath
});
$breadcrumbs.on('pathChange', function(event, path) {
$breadcrumbs.trigger('setPath', [path]);
$content.text(path[path.length - 1]);
});
var $content = $('#content');
$content.text(fullPath[fullPath.length - 1]);
$('#resetButton').on('click', function(event) {
$breadcrumbs.trigger('setPath', [fullPath]);
});
});
</script>
</head>
<body>
<div id="breadcrumb-container"></div>
<div id="content"></div>
<button id="resetButton">Reset</button>
</body>
</html>