A simple and lightweight page router for your single-page-applications.
<!-- Page 1 -->
<div data-page="page-1" data-active="">
<p>You're currently in page 1</p>
<!-- Navigate to page 2 -->
<button data-navigate="page-2">Go to page 2</button>
<!-- Does not exist -->
<button data-navigate="page-3">Go somewhere</button>
</div>
<!-- Page 2 -->
<div data-page="page-2">
<p>You're currently in page 2</p>
<!-- Navigate back to page 1 -->
<button data-navigate="page-2">Go back to page 1</button>
</div>
<!-- Fallback page -->
<div data-page="notfound">
<p>Uh oh, page not found...</p>
</div>
<script src="https://cdn.jsdelivr.net/gh/dlvdls18/Dage/dist/dage.min.js"></script>
To assign a page, add the attribute data-page
.
<div data-page="page-name"></div>
To show the page by default, add the attribute data-active
.
<div data-active="" data-page="page-name"></div>
To assign a navigator, add the attribute data-navigate
.
<button data-navigate="page-name"><button>
Dage.add(HTMLElement: element);
Dage.remove(HTMLElement: element);
// String: page name
Dage.active;
Dage.navigate(String: page_name);
This event is called when the page will be visible. It can be used to define how would the page appear when visible.
Dage.pages["page_name"].onpagevisible = Function(page_name, instance);
onpagehidden
listener
This event is called when the page will be hidden. It can be used to define how would the page appear when hidden.
Dage.pages["page_name"].onpagehidden = Function(page_name, instance);
Dage.on("page_name", Function: callback);
Dage.off("page_name");
This event is called when navigated.
Dage.onchanged = Function(page_name, instance);