irouter.js
is a tiny, light-weight JavaScript page navigator
include irouter in your page
<script src="https://irouter.js.org/lib/ver-0.2/irouter.min.js"></script>
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>
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>
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 |