Router

The Router is used load Ajax Page or Inline Page.

By default, the router will listen to all links click event, and use ajax to load new page instead of directly jump to the new page.

Add class="external" or external to a link if you don't want router to proxy it.

Set $.config.router = false to close router globally. It's recommend to use pageInit event to init the page, event if you closed the router.

The new page will slide from right to left by default. Add class="no-transition" to link to prevent the animation.

There is a stack to manage the history, the new page will push to stack, you can add class='replace' to replace the stack instead of push.

Inline Page

You can write multi page in one html file. Each page is in a .page container. If you have multi page in one html, you should use .page-current to make it a visiable at first enter.

Every .page container must have an id attr.Router will use id as the unique identify of a page. And you can use the id to jump to the page like this: <a href='#{page-id}'>jump</a>. And if the new Page has the same id to a old page , the DOM of old page will be replace by new page.

JS And CSS

Router will ignore all scripts and styles when load new page! You should import all CSS file and JS file(pack them into one js and css file) in the entry page, And use 'pageInit' to load different page's JS code.

Because users may refresh the page, the subpage will broken if it don't import any CSS and JS. So, you can import all CSS and JS file in every page.

{% highlight html %}

Router

Back

Router

This is an Inline Page，Click Back to go back。

{% endhighlight %}

Note that you can only write multi inline page in the entry html file. There can only be one .page in new page loaded by ajax.

Ajax Page

Router will prevent all links' click event, and load new page via Ajax by default.

{% highlight html %}

Router

Ajax New Page

{% endhighlight %} {% highlight html %}

Back

Router

This is an Ajax Page，click Back to go back。

{% endhighlight %}

Go Back

It's very easy to go back, what you need to do is only add a .back class on any link. In case of can't go back, you can set the href attr of the link, and router will load the href if it can't go back in history(For example, the user refreshed the page or enter the link directly)

You can also call$.router.back(url) to go back. The url param is optional but recommend too.

{% highlight html %} Back {% endhighlight %}

JS

Call $.router.loadPage(url) to load an Ajax Page or an Inline Page.

{% highlight js %} $.router.loadPage("/detail"); //load ajax page $.router.loadPage("#about"); //load inline page {% endhighlight %}

You can call $.router.loadPage with a config object like this:

{% highlight js %} $.router.loadPage({ url: "/detail", noAnimation: true, replace: true }); {% endhighlight %}

Param	Default	Description
url	undefined	url to load
noAnimation	false	Load new page with animation
replace	false	If set true, the new page will replace old page in history, you can't back to old page because it has been removed from histroy(but not removed from DOM).

The loadPage method will load new page, and push to history. If you dont't want to push to history, but want to replace history, you should use replacePage:

{% highlight js %} $.router.replacePage(url, noAnimation); {% endhighlight %}

Infact, replacePage is only a shortcut of loadPage, but set the param replace as true.

And if you want to refresh current page, you can simply use $.router.reloadPage();.

Event

There are many events：

Event	Description
pageLoadStart	before Ajax
pageLoadCancel	the ajax is canceled
pageLoadError	Ajax error
pageLoadComplete	Ajax complete
pageAnimationStart	after the DOM of new page insert into document, before the animation start
pageAnimationEnd	animation end
pageInit	all components in the page have been inited
pageReinit	when back to previous page

pageLoad* Events is trigger on window，The others is on .page Element.

{% highlight js %} $(document).on("pageInit", "#page-index", function(e, pageId, $page) {}); $(document).on("pageInit", function(e, pageId, $page) { if(pageId == "pageIndex") {} }); {% endhighlight %}

Router Defaults

$.router.defaults is the default config of router:

Param	Default	Description
transition	true	Use transition when load new page. You can always use `no-transition` to disable transiton on a link even if `defaults.transition` is set to true.