munizart / irouter.js

irouter.js a tiny, light-weight JavaScript page navigator

irouter

irouter.js is a tiny, light-weight JavaScript page navigator

Getting Started

Include the library :

include irouter in your page <script src="https://irouter.js.org/lib/ver-0.2/irouter.min.js"></script>

usage :

add ipage class to every navigation container, and also add ipage-default to the default container.
if there is no hash in url then ipage-default will be navigate.

<div id="page1" class="ipage ">
  page 1
</div>
<div id="page2" class="ipage">
  page 2
</div>
<div id="page3" class="ipage ipage-default">
  page 3
</div>

<a href="#!page1">page1</a>
<a href="#!page2">page2</a>
<a href="#!page3">page3</a>

live example

By HTTP request:

for using advanced functions of the library use irouter attribute. irouter take values in json format
i.e. irouter='{"[prop name]":"[prop value]",...}'

<div id="page1" class="ipage ipage-default" irouter='{"get":"component/about-html.html"}'>
  page 1
</div>
<div id="page2" class="ipage" irouter='{"get":"component/about-javascript.html","cache":"false"}'>
  page 2
</div>
<div id="page3" class="ipage" irouter='{"get":"component/about-php.html","loading-screen":"loading-screen-id"}'>
  page 3
</div>
<div id="loading-screen-id" class="iloading-screen">
  <div class="loader">Wait its loading...</div>
</div>
<a href="#!page1">page1</a>
<a href="#!page2">page2</a>
<a href="#!page3">page3</a>

custom loading:

add class iloading-screen in custom loading container and use id of that container as value of loading-screen prop in irouter.
{..."loading-screen":"[loading-screen-id]"...}
live example

Prop Name	Default	Description
`get / post`	its required	Request method
`insert-into`	id of that container	where to insert server response
`cache`	true	if content if fetched form server then it will not requested again if `{"cache":"true"}`
`loading-screen`	Loading...	custom loading screen