SPAger

SPAger is a SPA (Single Page Application) multi paging module based on routing. It is meant to be very light (< 1Kb!), modular, plug-and-play yet basic.

It is a standalone Vanilla JavaScript lib.

It is based on native browser anchors.

View a full working example or a basic demo

Example

<style>.hidden{display:none}</style>

<section class=page>
  <h1>Welcome home!</h1>
  <a href="#contact">See contact infos</a>
</section>
<section class=page id=contact>
  <h1>Contact me<h1>
  <a href="#">Back home</a>
</section>

<script src="js/spager.min.js"></script>
<script>spager.init()</script>

See this code in action

Here we have 2 pages: home and contact. Pages are detected by the class=page attribute and the page name by the id attribute. The page change is executed based the hash in the URL. Easy and logic!

CSS is very basic too:

• .hidden class is applied on pages that should be hidden (include src/spager.min.css to apply it automatically or implement your own style).
• .current class is applied on the currently visible page, for you convenience.

spager.init() will initialize the spager.

API

spager.init(): initializes the pager. It consists of hiding all pages except the homepage.

spager.home: string that defines the id of the homepage. blank by default.

spager.error404: string that defines the page to display when the hash was not found.

spager.goto(pageName): changes the page to go to pageName (string).

spager.isCurrent(name): returns true if the current page matches the name.

License

MIT. View LICENSE file for further details.