We will not init page on document loaded, because $.config.autoInit = false;. You should call $.init() on document loaded. $.init method will init all components in page, and trigger a pageInit event after init complete. You should call $.init after all pageInit events has binded.
But the page Loaded By router will always be inited.
Do not modify $.init please.
If you set $.config.autoInit = true;, the $.init method will auto be called after document onload. But your pageInit binds may have not executed at this time. So, please do not set autoInit=true, unless you don't listen to pageInit event or you can make sure that your code will be right.
Use router to load new page. The router will listen all links events and will prevent links' default behavior and use ajax to load new page
showPageLoadingIndicator
true
Show indicator when router is loading new page。Available only when router is true
swipePanel
"left"
Swipe to open a panel
swipePanelOnlyClose
true
Only Swipe to close panel, but can't swipe to open a panel
content padded
You can put content in .content-padded to add extra margin.
Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
<divclass="content-padded"><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p></div>
Types
Basic text style.
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.
<divclass="content-padded"><h1>Heading1</h1><h2>Heading2</h2><h3>Heading3</h3><h4>Heading4</h4><h5>Heading5</h5><h6>Heading6</h6><p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p></div>
Text and Background Color
There are some util class to set text color and background color:
<headerclass="bar bar-nav"><buttonclass="button pull-left">
Left
</button><buttonclass="button pull-right">
Right
</button><divclass="buttons-row"><ahref="#tab1"class="tab-link active button">Tab 1</a><ahref="#tab2"class="tab-link button">Tab 2</a><ahref="#tab3"class="tab-link button">Tab 3</a></div></header>
Toolbar
Toolbar is used as the main tab. You should put it sibling to .page elements to make it a global toolbar.Add a .no-tabbar class on .page when you want to hide toolbar on specific page. Or, you can use $.showToolbar(true/false) to toggle toolbar.
Note! If you use router to switch pages, you should use inline pages instead of ajax pages. Because when load ajax page, the router will not check if it is already exist. The same page may be loaded multi times.
<navclass="bar bar-tab"><aclass="tab-item active"href="#">
Text
</a><aclass="tab-item"href="#">
Text
</a><aclass="tab-item"href="#">
Text
</a></nav>
Secondary Titlebar and Toolbar
<navclass="bar bar-nav bar-standard"><h1class="title">Secondary Titlebar and Toolbar</h1></nav><!-- Block button in standard bar fixed below top bar --><divclass="bar bar-header-secondary"><buttonclass="button button-block">Block level button</button></div><!-- Block button in standard bar fixed above the footer --><divclass="bar bar-footer-secondary"><buttonclass="button button-block">Block level button</button></div><!-- Icons in standard bar fixed to the bottom of the screen --><divclass="bar bar-footer"><aclass="icon icon-edit pull-left"></a><aclass="icon icon-settings pull-right"></a></div>
<divclass="page"><headerclass="bar bar-nav"><h1class='title'>侧栏</h1></header><divclass="content"><divclass="content-block"><p><ahref="#"class="button button-fill open-panel"data-panel='#panel-left-demo'>打开左侧栏</a></p></div></div></div><divclass="panel-overlay"></div><!-- Left Panel with Reveal effect --><divclass="panel panel-left panel-reveal theme-dark"id='panel-left-demo'><divclass="content-block"><p>这是一个侧栏</p><p>你可以在这里放用户设置页面</p><p><ahref="#"class="close-panel">关闭</a></p></div><divclass="list-block"><!-- .... --></div></div><divclass="panel panel-right panel-reveal"><divclass="content-block"><p>这是一个侧栏</p><!-- Click on link with "close-panel" class will close panel --><p><ahref="#"class="close-panel">关闭</a></p></div></div>
<divclass="page"><headerclass="bar bar-nav"><h1class='title'>侧栏</h1></header><divclass="content"><divclass="content-block"><p><ahref="#"class="button button-fill my-btn">JS打开侧栏</a></p></div></div></div><divclass="panel-overlay"></div><!-- Left Panel with Reveal effect --><divclass="panel panel-right panel-cover theme-dark"id='panel-js-demo'><divclass="content-block"><p>我是从右边出现的</p><p>并且我是覆盖在页面上而不是推开页面</p><p></p><!-- Click on link with "close-panel" class will close panel --><p><ahref="#"class="close-panel">关闭</a></p></div></div><divclass="panel panel-right panel-reveal"><divclass="content-block"><p>这是一个侧栏</p><!-- Click on link with "close-panel" class will close panel --><p><ahref="#"class="close-panel">关闭</a></p></div></div>
<headerclass="bar bar-nav"><h1class='title'>Tabs</h1></header><divclass="content"><divclass="buttons-tab"><ahref="#tab1"class="tab-link active button">All</a><ahref="#tab2"class="tab-link button">Potatos</a><ahref="#tab3"class="tab-link button">Tomatos</a></div><divclass="content-block"><divclass="tabs"><divid="tab1"class="tab active"><divclass="content-block"><p>This is tab 1 content</p></div></div><divid="tab2"class="tab"><divclass="content-block"><p>This is tab 2 content</p></div></div><divid="tab3"class="tab"><divclass="content-block"><p>This is tab 3 content</p></div></div></div></div></div>
Secondary Tabs
Secondary Tabs is less important than Primary tabs.
<headerclass="bar bar-nav"><h1class="title">Alert</h1></header>
...
<divclass="content"><divclass="content-block"><p><ahref="#"class="alert-text">Alert With Text</a></p><p><ahref="#"class="alert-text-title">Alert With Text and Title</a></p><p><ahref="#"class="alert-text-title-callback">Alert With Text and Title and Callback</a></p><p><ahref="#"class="alert-text-callback">Alert With Text and Callback</a></p></div></div>
...
<headerclass="bar bar-nav"><h1class="title">Confirm</h1></header>
...
<divclass="content"><divclass="content-block"><p><ahref="#"class="confirm-ok">Confirm with text and Ok callback</a></p><p><ahref="#"class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p><p><ahref="#"class="confirm-title-ok">Confirm with text, title and Ok callback</a></p><p><ahref="#"class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p></div></div>
...
$(document).on('click','.confirm-ok',function(){$.confirm('Are you sure?',function(){$.alert('You clicked Ok button');});});$(document).on('click','.confirm-ok-cancel',function(){$.confirm('Are you sure?',function(){$.alert('You clicked Ok button');},function(){$.alert('You clicked Cancel button');});});$(document).on('click','.confirm-title-ok',function(){$.confirm('Are you sure?','Custom Title',function(){$.alert('You clicked Ok button');});});$(document).on('click','.confirm-title-ok-cancel',function(){$.confirm('Are you sure?','Custom Title',function(){$.alert('You clicked Ok button');},function(){$.alert('You clicked Cancel button');});});
<headerclass="bar bar-nav"><h1class="title">Prompt</h1></header>
...
<divclass="content"><divclass="content-block"><p><ahref="#"class="prompt-ok">Prompt with text and Ok callback</a></p><p><ahref="#"class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p><p><ahref="#"class="prompt-title-ok">Prompt with text, title and Ok callback</a></p><p><ahref="#"class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p></div></div>
...
$(document).on('click','.prompt-ok',function(){$.prompt('What is your name?',function(value){$.alert('Your name is "'+value+'". You clicked Ok button');});});$(document).on('click','.prompt-ok-cancel',function(){$.prompt('What is your name?',function(value){$.alert('Your name is "'+value+'". You clicked Ok button');},function(value){$.alert('Your name is "'+value+'". You clicked Cancel button');});});$(document).on('click','.prompt-title-ok',function(){$.prompt('What is your name?','Custom Title',function(value){$.alert('Your name is "'+value+'". You clicked Ok button');});});$(document).on('click','.prompt-title-ok-cancel',function(){$.prompt('What is your name?','Custom Title',function(value){$.alert('Your name is "'+value+'". You clicked Ok button');},function(value){$.alert('Your name is "'+value+'". You clicked Cancel button');});});
<headerclass="bar bar-nav"><h1class="title">自定义Modals</h1></header>
...
<divclass="content"><divclass="content-block"><p><ahref="#"class="open-3-modal">Modal With 3 Buttons</a></p><p><ahref="#"class="open-slider-modal">Modal With Slider</a></p><p><ahref="#"class="open-tabs-modal">Modal With Tabs</a></p><p><ahref="#"class="open-vertical-modal">Modal With Vertical Buttons</a></p></div></div>
...
$(document).on('click','.open-3-modal',function(){$.modal({title:'Modal with 3 buttons',text:'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',buttons:[{text:'B1',onClick:function(){$.alert('You clicked first button!')}},{text:'B2',onClick:function(){$.alert('You clicked second button!')}},{text:'B3',bold:true,onClick:function(){$.alert('You clicked third button!')}},]})});$(document).on('click','.open-slider-modal',function(){varmodal=$.modal({title:'Awesome Photos?',text:'What do you think about my photos?',afterText:'<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+'<div class="swiper-pagination"></div>'+'<div class="swiper-wrapper">'+'<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+'<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+'</div>'+'</div>',buttons:[{text:'Bad :('},{text:'Awesome!',bold:true,onClick:function(){$.alert('Thanks! I know you like it!')}},]})$.swiper($$(modal).find('.swiper-container'),{pagination:'.swiper-pagination'});});$(document).on('click','.open-tabs-modal',function(){$.modal({title:'<div class="buttons-row">'+'<a href="#tab1" class="button active tab-link">Tab 1</a>'+'<a href="#tab2" class="button tab-link">Tab 2</a>'+'</div>',text:'<div class="tabs">'+'<div class="tab active" id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis nunc non dolor euismod feugiat. Sed at sapien nisl. Ut et tincidunt metus. Suspendisse nec risus vel sapien placerat tincidunt. Nunc pulvinar urna tortor.</div>'+'<div class="tab" id="tab2">Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>'+'</div>',buttons:[{text:'Ok, got it',bold:true},]})});$(document).on('click','.open-vertical-modal',function(){$.modal({title:'Vertical Buttons Layout',text:'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',verticalButtons:true,buttons:[{text:'Button 1',onClick:function(){$.alert('You clicked first button!')}},{text:'Button 2',onClick:function(){$.alert('You clicked second button!')}},{text:'Button 3',onClick:function(){$.alert('You clicked third button!')}},]})});
Popover compontent is used to manage the presentation of content in a popover. You use popovers to present information temporarily. The popover remains visible until the user taps outside of the popover window or you explicitly dismiss it.
Note that is not recommended to use Popover on small screens (iPhone). On small screens you should use Action Sheet.
Popover Layout
First of all let's look on Popover layout, it is pretty simple, just add somewhere in the end of the body:
<divclass="popover"><!-- Popover's angle arrow --><divclass="popover-angle"></div><!-- Popover content --><divclass="popover-inner"><!-- Any HTML content here --></div></div>
Open and close with HTML
It is possible to open and close required Popover using special classes and data attributes on links:
To open popover we need to add "open-popover" class to any HTML element (prefered to link)
To close popover we may add "close-popover" class to any HTML element (prefered to link)
If you have more than one popover in app, you need to specify appropriate popover via additional data-popover=".my-popover" attribute on this HTML element
When we open Popover with such method (from HTML), it will be automatically positioned around element that we clicked to call this Popover.
Open and close with JavaScript
We can also open and close Popover with JavaScript:
$.popover(popover, target) - open Popover around target element
popover - HTMLElement or string (with CSS Selector) of Popover to open. Requred
target - HTMLElement or string (with CSS Selector) of target element to set popover position around this element. Requred
This method returns Popover's HTMLElement
$.closeModal(popover) - close Popover
popover - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Popover will be closed
Dynamic Popover
It allows you to create Popover dynamically by passing its HTML to related methods:
$.popover(popoverHTML, target, removeOnClose) - open Popover with popoverHTML content around target element
popoverHTML - string. HTML string of popover
target - HTMLElement or string (with CSS Selector) of target element to set popover position around this element. Requred
removeOnClose - boolean. Optional, by default - true. If true then Popover will be removed from DOM when closed
This method returns dynamically created Popover's HTMLElement
Modal Defaults
The default config of modal is $.modal.prototype.defaults, you can change these config:
Parameter
Default
Description
modalButtonOk
"OK"
Text of OK button
modalButtonCancel
"Cancel"
Text of cancel button
modalPreloaderTitle
"Loading"
Text of preloader
closePrevious
true
Close all previous modal when open a new modal.
actionsCloseByOutside
true
点击背景关闭 ActionSheet
modalCloseByOutside
false
点击背景关闭 Modal
popupCloseByOutside
false
点击背景关闭 Popup
Popup
Popup is a popup window with any HTML content that pops up over App's main content
Popup
Popup layout is pretty simple. All you need to do is to put .popup right in the body:
<divclass="modal modal-no-buttons">
...
<divclass="popup">
Any HTML content goes here
</div></div><p>Note! Don't put <code>popup</code> into <code>page</code>.</p>
Open and Close Popup
From HTML
It is possible to open and close required popups using special classes and data attributes on links:
To open popup we need to add open-popup class to any HTML element (prefered to link)
To close popup we need to add close-popup class to any HTML element (prefered to link)
If you have more than one popups in app, you need to specify appropriate popup via additional data-popup=".my-popup" attribute on this HTML element
According to above note:
<divclass="page">
...
<divclass="content"><divclass="content-block"><p><ahref="#"class="open-popup open-about"data-popup=".popup-about">Open About Popup </a></p><p><ahref="#"class="open-popup open-services"data-popup=".popup-services">Open Services Popup </a></p></div></div>
...
</div><!-- About Popup --><divclass="popup popup-about"><divclass="content-block"><p>About</p><p><ahref="#"class="close-popup">Close popup</a></p><p>Lorem ipsum dolor ...</p></div></div><!-- Services Popup --><divclass="popup popup-services"><divclass="content-block"><p>Services</p><p><ahref="#"class="close-popup">Close popup</a></p><p>Lorem ipsum dolor ...</p></div></div>
Using JavaScript
We can also open and close Popups with JavaScript, for this we need to look at related App methods:
$.popup(popup) - Open Popup
popup - HTMLElement or string (with CSS Selector) of Popup to open . Required
$.closeModal(popup) - Close Popup
popup - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Popup/Modal will be closed
<headerclass="bar bar-nav"><h1class="title">Popup(JavaScript)</h1></header>
...
<divclass="content"><divclass="content-block"><p><ahref="#"class="open-about">Open About Popup </a></p><p><ahref="#"class="open-services">Open Services Popup </a></p></div></div><!-- About Popup --><divclass="popup popup-about"><divclass="content-block"><p>About</p><p><ahref="#"class="close-popup">Close popup</a></p><p>Lorem ipsum dolor ...</p></div></div><!-- Services Popup --><divclass="popup popup-services"><divclass="content-block"><p>Services</p><p><ahref="#"class="close-popup">Close popup</a></p><p>Lorem ipsum dolor ...</p></div></div>
<headerclass="bar bar-nav"><h1class="title">Popup Events</h1></header>
...
<divclass="content"><divclass="content-block"><!-- In data-popup attribute we specify CSS selector of popup we need to open --><p><ahref="#"data-popup=".popup-about"class="open-popup">Open About Popup </a></p><p><ahref="#"data-popup=".popup-services"class="open-popup">Open Services Popup </a></p></div></div><!-- About Popup --><divclass="popup popup-about"><divclass="content-block"><p>About</p><p><ahref="#"class="close-popup">Close popup</a></p><p>Lorem ipsum dolor ...</p></div></div><!-- Services Popup --><divclass="popup popup-services"><divclass="content-block"><p>Services</p><p><ahref="#"class="close-popup">Close popup</a></p><p>Lorem ipsum dolor ...</p></div></div>
$(document).on('click','.popup-about',function(){console.log('About Popup opened')});$(document).on('click','.popup-about',function(){console.log('About Popup is closing')});$(document).on('click','.popup-services',function(){console.log('Services Popup is opening')});$(document).on('click','.popup-services',function(){console.log('Services Popup is closed')});
Dynamic Popup
Light7 allows you to create Popup dynamically by passing its HTML to related methods:
$.popup(popupHTML, removeOnClose) - Open Popup
popupHTML - string. HTML String of popup
removeOnClose - boolean. Optional, by default - true. If true then Popup will be removed from DOM when closed
<headerclass="bar bar-nav"><h1class="title">Dynamic Popup</h1></header>
...
<divclass="content"><divclass="content-block"><!-- In data-popup attribute we specify CSS selector of popup we need to open --><p><ahref="#"class="create-popup">Create Popup</a></p></div></div>
$(document).on('click','.create-popup',function(){varpopupHTML='<div class="popup">'+'<div class="content-block">'+'<p>Popup created dynamically.</p>'+'<p><a href="#" class="close-popup">Close me</a></p>'+'</div>'+'</div>'$.popup(popupHTML);});
Enable and calendar will be closed when user pick a date
yearPicker
boolean
true
Enable year picker in toolbar
Callbacks
onChange
function (p, values, displayValues)
Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column
onMonthAdd
function (p, monthContainer)
Callback function that will be executed when newly generated month HTML element will be added to calendar.
onDayClick
function (p, dayContainer, year, month, day)
Callback function that will be executed when user clicks/select any date
onOpen
function (p)
Callback function that will be executed when picker is opened
onClose
function (p)
Callback function that will be executed when picker is closed
<headerclass="bar bar-nav"><h1class="title">操作表</h1></header><divclass="content"><divclass="content-block"><!-- In data-popup attribute we specify CSS selector of popup we need to open --><p><ahref="#"class="create-actions">选择操作</a></p></div></div>
You can set button color with color, or set background with bg. There are four different color: primary, success, warning, danger. In fact, the different color is defined in Text.
列表可以支持单选和多选，我们只是修改了 checkbox 和 radio 的样式，并没有进行任何JS操作。所以如果取数据，需要从其中隐藏的 input 元素中取，和原生的表单用法完全一样。
列表是单选还是多选，完全取决于 input 的 type 属性设置。目前我们对单选和多选的图标样式是没有做区分的，后续可能会设置不同的样式以区分单选和多选。
<ul><li><labelclass="label-checkbox item-content"><inputtype="radio"name="my-radio"><divclass="item-media"><iclass="icon icon-form-checkbox"></i></div><divclass="item-inner"><divclass="item-title-row"><divclass="item-title">石头</div><divclass="item-after">17:14</div></div><divclass="item-subtitle">New messages from John Doe</div><divclass="item-text">Lorem ipsum dolor sit amet...</div></div></label></li><li><labelclass="label-checkbox item-content"><inputtype="radio"name="my-radio"><divclass="item-media"><iclass="icon icon-form-checkbox"></i></div><divclass="item-inner"><divclass="item-title-row"><divclass="item-title">剪刀</div><divclass="item-after">17:14</div></div><divclass="item-subtitle">New messages from John Doe</div><divclass="item-text">Lorem ipsum dolor sit amet...</div></div></label></li></ul>
Pull to refresh is a special component that can be used to initiate the refreshing of a page’s contents.
demo
HTML:
Pull to refresh
card
Hello there! I am a card;
<headerclass="bar bar-nav"><h1class='title'>Pull to refresh</h1></header><divclass="content pull-to-refresh-content"data-ptr-distance="55"><divclass="pull-to-refresh-layer"><divclass="preloader"></div><divclass="pull-to-refresh-arrow"></div></div><divclass="card"><divclass="card-header">card</div><divclass="card-content"><divclass="card-content-inner">
Hello there! I am a card;
</div></div></div></div>
javascript:
$(document).on('refresh','.pull-to-refresh-content',function(e){setTimeout(function(){varcardHTML='<div class="card">'+'<div class="card-header">New Card</div>'+'<div class="card-content">'+'<div class="card-content-inner">'+'Hello! I am the new card!'+(Math.random()*1000000)+'</div>'+'</div>'+'</div>';$(e.target).find('.card').replaceWith(cardHTML);// done$.pullToRefreshDone('.pull-to-refresh-content');},2000);});
Where
page-content should have additional pull-to-refresh-content class. This is required to enable pull to refresh
pull-to-refresh-layer hidden layer with pull to refresh visual elements: preloader and arrow.
data-ptr-distance="55" additional attribute that allows to set custom pull to refresh trigger distance. By default (if not specified) it is 44px.
Pull To Refresh Sequence
When user starts to pull pull-to-refresh-content down, then pull-to-refresh-layer will receive additional "pull-down" class.
When user pulls down pull-to-refresh-content on a distance more than 44px (when pull-to-refresh-layer will be fully visible), then pull-to-refresh-layer will receive additional "pull-up" class which changes arrow rotation to notify user about refresh action on release.
When user release pull to refresh content when it is in "pull-up" state, then pull-to-refresh-layer will receive additional "refreshing" class. In "refreshing" state arrow will be hidden and user will see preloader indicator. On this stage you probably need to do Ajax request and refresh page content.
Pull To Refresh Events
There is a special JavaScript event that helps us to recognize when we need to refresh content:
Event
Target
Description
refresh
Pull To Refresh content<div class="pull-to-refresh-content">
Event will be triggered when pull to refresh enters in "refreshing" state
Reset Pull To Refresh
After we refreshed page content, we need to reset pull to refresh component to let user pull it again:
$.pullToRefreshDone(ptrContent)
Trigger Pull To Refresh
We can also trigger Pull To Refresh manually by using the following method:
$.pullToRefreshTrigger(ptrContent)
Destroy/Disable Pull To Refresh
Sometimes you may need to disable Pull To Refresh on page. We can do that using the following method:
$.destroyPullToRefresh(ptrContent)
And if we need to initialize/enable it again:
$.initPullToRefresh(ptrContent)
See demos for how to use pull to refresh with tabs.
Infinite scroll
Load new items when user scroll to bottom of page。
demo
What you should do is only add a infinite-scroll class to div.content
You need to use $.attachInfiniteScroll only after you have called $.detachInfiniteScroll. The $.detachInfiniteScroll method will auto be called when infinite scroll component init.
Notification
You can show some notifications. It's a iOS like notification that you can set icon, title and text, and you can alose drag to close the notification.
Use JavaScript to open/close notification:
$.notification({title:"Baby",text:"I miss you",media:"<img src='...'>",data:"123",onClick:function(data){$.alert("Click"+data);},onClose:function(data){$.alert("Close "+data);}});//close notification$.closeNotification();
There is only one notification can shown in the same time. It means that the new notification will replace the old one.
Params
Param
Default
Description
title
undefined
Title of notification
text
undefined
Text of notification
media
undefined
Media of notification. It should be a icon with image or iconfont.
data
undefined
This data will be the param of onClick and onClose function.
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.
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:
$.router.replacePage(url,noAnimation);
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();.
