mobile-router.js — A lightweight single page bone for mobile web App
The mobile-router.js-demo is a simple mobile web app demo for mobile-router.js.
mobile-router.js-sample - A mobile-router.js demo like ui-router sample
Less than 9k when gzipped
How can i install it?
Download a latest build from https://github.com/dolymood/mobile-router.js/releases it contains development and minified production files in build/ folder.
or use npm
npm install mobile-router.js
or use git clone
git clone https://github.com/dolymood/mobile-router.js.git
How can i use it?
Mrouter; // Or like thisMrouter; /* global route change events *//* `routeChangeStart` event, trigged before a route change. */Mrouter;/*`routeChangeEnd` event, trigged after a route changed and the page has been shown.*/Mrouter; // start historyMhistorystart base: '/' // base path of history. Default the url base in the head of your main html file (<base href="/my-base">) or '/' enablePushState: true // enable pushstate or not (less that 2.x) // (2.0.0+) // set `history`, `hashbang` or `abstract` // default `hashbang` history: true // or hashbang: true // or abstract: true;
Advantages?
-
Lightweight, Easy.
-
Nested routes & views (1.5.0+).
-
No Dependencies. You can use it with
jquery
,zepto
,iscroll
or others. -
Cache templates automatically.
-
Good for
SEO
. You can render pages on server. -
Cache pages automatically. Default cache pages number is
3
. -
Switching pages use
CSS animation
. -
History mode:
history
,hashbang
orabstract
About some configs
The priority of get animation
, aniClass
or cacheTemplate
config's value is:
`data-xxx` -> route config -> global config
About examples/
-
index.html
: basic usage,getTemplate
config, anddata-rel=back
attribute config on link element for reverse animation direction. -
index1.html
: link element'sdata-href
attribute config (as same asabstract=true
) , and disable one routeanimation
. -
index2.html
: disableanimation
. -
index3.html
: disablecacheTemplate
. -
index4.html
: set globalaniClass
. -
index5.html
: setaniClass
in two ways. -
index6.html
: setcacheTemplate
of one route. -
index7.html
: setM.history
configabstract=true
. -
index8.html
: nested routes and views. -
requirejs/
: use require.js
About SEO
The server can response HTML with cpmplete content
content rendered by the server
License
The MIT License