Components

A set of powerful components with iOS style.

title

layout

The layout of page should be correct. Every page should have a .page container, and put contents in .content container.

Here is the basic layout of a page:

<!-- page containet -->
<div class="page">
  <!-- titlebar -->
  <header class="bar bar-nav">
    <a class="icon icon-me pull-left open-panel"></a>
    <h1 class="title">Title</h1>
  </header>

  <!-- toolbar -->
  <nav class="bar bar-tab">
    <a class="tab-item active" href="#">
      <span class="icon icon-home"></span>
      <span class="tab-label">Home</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-star"></span>
      <span class="tab-label">Fav</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-settings"></span>
      <span class="tab-label">Settings</span>
    </a>
  </nav>

  <!-- page content -->
  <div class="content">
    <div class="content-block">content here</div>
  </div>
</div>

<!-- popup, panel -->
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>Here is a side panel</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">close</a></p>
  </div>
</div>

Ever page should have a .page container.

Rem

Rem is related to html font-size. We scale the whole page with Rem.

Infact, there is no px except border-width in css.

See rem.less For more information about how the page is scaled,

See MDN REM for more information about rem,

Init

Init all components in a page with $.init().

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.

see demos for more usage.

global config

You can set $.config before light7.js to change some default config:

Note! autoInit is false in default config.

<script>
  $.config = {
    autoInit: true //no recommend
  }
</script>
<script src='light7.min.js'></script>
all available config:
name default description
autoInit false Auto call $.init after document.onload
router true 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.

<div class="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.

<div class="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:

<ul>
  <li class='color-primary'>color primary</li>
  <li class='color-success'>color success</li>
  <li class='color-warning'>color warning</li>
  <li class='color-danger'>color danger</li>
</ul>

<ul>
  <li class='bg-primary'>bg primary</li>
  <li class='bg-success'>bg success</li>
  <li class='bg-warning'>bg warning</li>
  <li class='bg-danger'>bg danger</li>
</ul>

Titlebar

Title bar is on top of page.

title

<header class="bar bar-nav">
  <h1 class="title">title</h1>
</header>

Title bar with buttons

Title

<header class="bar bar-nav">
  <button class="button pull-left">
    Btn
  </button>
  <button class="button pull-right">
    Btn
  </button>
  <h1 class="title">Title</h1>
</header>

With icons

<header class="bar bar-nav">
  <a class="icon icon-left pull-left"></a>
  <a class="icon icon-refresh pull-right"></a>
  <h1 class="title">title</h1>
</header>

With icons and text

title

<header class="bar bar-nav">
  <button class="button button-link button-nav pull-left">
    <span class="icon icon-left"></span>
    back
  </button>
  <button class="button button-link button-nav pull-right">
    next
    <span class="icon icon-right"></span>
  </button>
  <h1 class="title">title</h1>
</header>

带标签页

<header class="bar bar-nav">
  <button class="button pull-left">
    Left
  </button>
  <button class="button pull-right">
    Right
  </button>
  <div class="buttons-row">
    <a href="#tab1" class="tab-link active button">Tab 1</a>
    <a href="#tab2" class="tab-link button">Tab 2</a>
    <a href="#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.

<nav class="bar bar-tab">
  <a class="tab-item active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">Text</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-me"></span>
    <span class="tab-label">Text</span>
    <span class="badge">2</span>
  </a>
  ....
</nav>

Toolbar with only text

  <nav class="bar bar-tab">
      <a class="tab-item active" href="#">
  Text
</a>
      <a class="tab-item" href="#">
  Text
</a>
      <a class="tab-item" href="#">
  Text
</a>
  </nav>
  

Secondary Titlebar and Toolbar

<nav class="bar bar-nav bar-standard">
  <h1 class="title">Secondary Titlebar and Toolbar</h1>
</nav>

<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-header-secondary">
  <button class="button button-block">Block level button</button>
</div>

<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-footer-secondary">
  <button class="button button-block">Block level button</button>
</div>

<!-- Icons in standard bar fixed to the bottom of the screen -->
<div class="bar bar-footer">
  <a class="icon icon-edit pull-left"></a>
  <a class="icon icon-settings pull-right"></a>
</div>

buttons

buttons with different size and color

<header class="bar bar-nav">
  <h1 class='title'>buttons</h1>
</header>
<div class="content">
  <div class="content-block">
    <p><a href="#" class="button">Usual Button 1</a></p>
    <p><a href="#" class="button button-light">light button</a></p>
    <p><a href="#" class="button button-dark">dark button</a></p>
    <p><a href="#" class="button button-success">success button</a></p>
    <p><a href="#" class="button button-danger">danger button</a></p>
    <p><a href="#" class="button button-warning">warning button</a></p>
    <p><a href="#" class="button disabled">disabled button</a></p>
  </div>
  <div class="content-block">
    <p><a href="#" class="button button-round">Round Button 1</a></p>
  </div>
  <div class="content-block">
    <p><a href="#" class="button button-big">Big Button </a></p>
    <p><a href="#" class="button button-big button-round">Big Round Button </a></p>
  </div>
</div>

Buttons group

<header class="bar bar-nav">
  <h1 class='title'>Buttons group</h1>
</header>
<div class="content">
  <div class="content-block">
    <p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button active">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button active">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round">Button 2</a></p>
    <p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round active">Button 2</a></p>
  </div>
</div>

Filled buttons

Filled buttons

<header class="bar bar-nav">
  <h1 class='title'>Filled buttons</h1>
</header>
<div class="content">
  <div class="content-block">
    <p><a href="#" class="button button-fill">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-success">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-danger">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-warning">Fill Button </a></p>
  </div>
</div>

Layout with list and grid

Layout buttons with list and grid

layout buttons

List block buttons
Inset list block buttons
Using Grid
<header class="bar bar-nav">
  <h1 class='title'>layout buttons</h1>
</header>
<div class="content">
  <div class="content-block-title">List block buttons</div>
  <div class="list-block">
    <ul>
      <li><a href="#" class="item-link list-button">List Button 1</a></li>
      <li><a href="#" class="item-link list-button">List Button 2</a></li>
      <li><a href="#" class="item-link list-button">List Button 3</a></li>
    </ul>
  </div>
  <div class="content-block-title">Inset list block buttons</div>
  <div class="list-block inset">
    <ul>
      <li><a href="#" class="item-link list-button">List Button 1</a></li>
      <li><a href="#" class="item-link list-button">List Button 2</a></li>
      <li><a href="#" class="item-link list-button">List Button 3</a></li>
    </ul>
  </div>
  <div class="content-block-title">Using Grid</div>
  <div class="content-block">
    <div class="row">
      <div class="col-50"><a href="#" class="button button-big button-fill button-danger">Cancel</a></div>
      <div class="col-50"><a href="#" class="button button-big button-fill button-success">Submit</a></div>
    </div>
  </div>
</div>

Form

Form use List to layout.

List

  • name
  • email
  • password
  • gender
  • birthday
  • Switch
  • text
<header class="bar bar-nav">
  <h1 class='title'>Form</h1>
</header>
<div class="content">
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-name"></i></div>
          <div class="item-inner">
            <div class="item-title label">Name</div>
            <div class="item-input">
              <input type="text" placeholder="Your name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-email"></i></div>
          <div class="item-inner">
            <div class="item-title label">Email</div>
            <div class="item-input">
              <input type="email" placeholder="E-mail">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-password"></i></div>
          <div class="item-inner">
            <div class="item-title label">Password</div>
            <div class="item-input">
              <input type="password" placeholder="Password" class="">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-gender"></i></div>
          <div class="item-inner">
            <div class="item-title label">Gender</div>
            <div class="item-input">
              <select>
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
          </div>
        </div>
      </li>
      <!-- Date -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-calendar"></i></div>
          <div class="item-inner">
            <div class="item-title label">Birthday</div>
            <div class="item-input">
              <input type="date" placeholder="Birth day" value="2014-04-30">
            </div>
          </div>
        </div>
      </li>
      <!-- Switch (Checkbox) -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-toggle"></i></div>
          <div class="item-inner">
            <div class="item-title label">Switch</div>
            <div class="item-input">
              <label class="label-switch">
                <input type="checkbox">
                <div class="checkbox"></div>
              </label>
            </div>
          </div>
        </div>
      </li>
      <li class="align-top">
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-comment"></i></div>
          <div class="item-inner">
            <div class="item-title label">Textarea</div>
            <div class="item-input">
              <textarea></textarea>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block">
    <div class="row">
      <div class="col-50"><a href="#" class="button button-big button-fill button-danger">Cancel</a></div>
      <div class="col-50"><a href="#" class="button button-big button-fill button-success">Submit</a></div>
    </div>
  </div>
</div>

Only icons

Forms with only icons.

Only icons

<header class="bar bar-nav">
  <h1 class='title'>Only icons</h1>
</header>
<div class="content">
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-name"></i></div>
          <div class="item-inner">
            <div class="item-input">
              <input type="text" placeholder="Your name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-email"></i></div>
          <div class="item-inner">
            <div class="item-input">
              <input type="email" placeholder="E-mail">
            </div>
          </div>
        </div>
      </li>

      <!-- Select -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-gender"></i></div>
          <div class="item-inner">
            <div class="item-input">
              <select>
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Only Title

Forms with only Title and no icons

只有文案的表单

  • Name
  • E-mail
  • Gender
<header class="bar bar-nav">
  <h1 class='title'>Only title</h1>
</header>
<div class="content">
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title label">Name</div>
            <div class="item-input">
              <input type="text" placeholder="Your name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title label">E-mail</div>
            <div class="item-input">
              <input type="email" placeholder="E-mail">
            </div>
          </div>
        </div>
      </li>

      <!-- Select -->
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title label">Gender</div>
            <div class="item-input">
              <select>
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Side Panels

Side panel is on left or right side of page, and you can swipe-left-to-right or swipe-right-to-left to open it.

How to use

Add .open-panel To any link to make it a button which can open a side panel. You can add data-panel='{panel's css selector}' to spcify which panel to open, if you have more than one panel.

Add .close-panel to any link to make it a close button which can close a panel. You have not need to spcify which panel to close, because only one panel can be opened at the same time.

Use .panel-left or .panel-right to spcify left panel or right panel.

Use .panel-cover or .panel-reveal to spcify then type of panel.

Config

The panel can be opened and closed by slide gestures by default.

You can set $.config.swipePanel and $.config.swipePanelOnlyClose to enable or disable the slide gestures in init config

.
<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>Side Panel</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill open-panel" data-panel='#panel-left-demo'>Open left side panel</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
  <div class="content-block">
    <p>This is a side panel</p>
    <p></p>
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
  <div class="list-block">
    <!-- .... -->
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>This is a side panel</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>

Use JavaScript

We can also open and close Panels with JavaScript, for this we need to look at related App methods: $.openPanel(panel) and $.closePanel()

  • $.openPanel(panel) Open a panel.
  • $.closePanel():close currently opened Panel.
<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>Panel</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill my-btn">Open Panel with JS</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-right panel-cover theme-dark" id='panel-js-demo'>
  <div class="content-block">
    <p>I am on the right</p>
    <p>I cover the page</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>I am a Panel</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">Close</a></p>
  </div>
</div>
$(document).on("click", ".my-btn", function() {
  $.openPanel("#panel-js-demo");
});

Events

Events will triggered on .panel when open or close.

Event Target Description
open Panel Element<div class="panel"> Event will be triggered when Panel starts its opening animation
opened Panel Element<div class="panel"> Event will be triggered after Panel completes its opening animation
close Panel Element<div class="panel"> Event will be triggered when Panel starts its closing animation
closed Panel Element<div class="panel"> Event will be triggered after Panel completes its closing animation

Light Searchbar

Light searchbar is to use in page content instead of in header. Light searchbar is layout with grid, it's easy to changed layout by yourself.

<div class="content-padded">
  <div class="searchbar">
    <div class="search-input">
      <label class="icon icon-search" for="search"></label>
      <input type="search" id='search' placeholder='query...'/>
    </div>
  </div>

  <div class="searchbar row">
    <div class="search-input col-75">
      <label class="icon icon-search" for="search"></label>
      <input type="search" id='search' placeholder='query...'/>
    </div>
    <a class="button button-fill button-primary col-25">Search</a>
  </div>

  <div class="searchbar row">
    <div class="search-input col-85">
      <input type="search" id='search' placeholder='query...'/>
    </div>
    <a class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
  </div>
</div>

Tabs

Tabs allow to simply switch between different content.

Tabs

This is tab 1 content

This is tab 2 content

This is tab 3 content

<header class="bar bar-nav">
  <h1 class='title'>Tabs</h1>
</header>
<div class="content">
  <div class="buttons-tab">
    <a href="#tab1" class="tab-link active button">All</a>
    <a href="#tab2" class="tab-link button">Potatos</a>
    <a href="#tab3" class="tab-link button">Tomatos</a>
  </div>
  <div class="content-block">
    <div class="tabs">
      <div id="tab1" class="tab active">
        <div class="content-block">
          <p>This is tab 1 content</p>
        </div>
      </div>
      <div id="tab2" class="tab">
        <div class="content-block">
          <p>This is tab 2 content</p>
        </div>
      </div>
      <div id="tab3" class="tab">
        <div class="content-block">
          <p>This is tab 3 content</p>
        </div>
      </div>
    </div>
  </div>
</div>

Secondary Tabs

Secondary Tabs is less important than Primary tabs.

Secondary Tabs

This is tab 1 content

This is tab 2 content

This is tab 3 content

<header class="bar bar-nav">
  <h1 class='title'>Secondary tabs</h1>
</header>
<div class="content">
  <div class="content-block">
    <div class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab1" class="tab active">
      <div class="content-block">
        <p>This is tab 1 content</p>
      </div>
    </div>
    <div id="tab2" class="tab">
      <div class="content-block">
        <p>This is tab 2 content</p>
      </div>
    </div>
    <div id="tab3" class="tab">
      <div class="content-block">
        <p>This is tab 3 content</p>
      </div>
    </div>
  </div>
</div>

Grid

responsive grid.

Grid

50%
50%
33%
33%
33%
20%
80%

no gutter

20%
80%
<header class="bar bar-nav">
  <h1 class='title'>Grid</h1>
</header>
<div class="content">
  <div class="content-padded grid-demo">
    <div class="row">
      <div class="col-50">50%</div>
      <div class="col-50">50%</div>
    </div>
    <div class="row">
      <div class="col-33">33%</div>
      <div class="col-33">33%</div>
      <div class="col-33">33%</div>
    </div>
    <div class="row">
      <div class="col-20">20%</div>
      <div class="col-80">80%</div>
    </div>
    <h2>no gutter</h2>
    <div class="row no-gutter">
      <div class="col-20">20%</div>
      <div class="col-80">80%</div>
    </div>
  </div>
</div>

Confirm

Confirm modal usualy used when it is required to confirm some action. To open Confirm modal we should also call one of the following App methods:

$.confirm(text, [title, callbackOk, callbackCancel]) or $.confirm(text, [callbackOk, callbackCancel])
  • text - string. Text to Confirm
  • title - string. Optional. Confirm modal title
  • callbackOk - function. Optional. Callback function that will be executed when user click "Ok" button on Confirm modal (when user confirm action)
  • callbackCancel - function. Optional. Callback function that will be executed when user click "Cancel" button on Confirm modal (when user dismiss action)
  
  <header class="bar bar-nav">
    <h1 class="title">Confirm</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
      <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
      <p><a href="#" 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');
        }
      );
  });    
  

Prompt

Prompt modal used when it is required to get some data/answer from user. To open Prompt modal we should also call one of the following App methods:
$.prompt(text, [title, callbackOk, callbackCancel]) $.prompt(text, [callbackOk, callbackCancel])

  • text - string. Prompt text/question
  • title - string. Optional. Prompt modal Title
  • callbackOk - function. Optional. OK button callback, As an argument function receives value of text input
  • callbackCancel - function. Optional. calcel button callback
  
  <header class="bar bar-nav">
    <h1 class="title">Prompt</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
      <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
      <p><a href="#" 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');
        }
      );
  });           
  

Modals

Ok, all predefined modals were just particular case (like shortcuts) of full Modal methods. Let's look how to create custom modals:

$.modal(parameters) - show custom modal

  • parameters - object. Parameters/options of modal

Here is the list of Modal parameters:

Parameter Type Default Description
title string Optional. String with Modal title (could be HTML string)
text string Optional. String with Modal text (could be HTML string)
afterText string Optional. String with text (could be HTML string) that will be placed after "text"
buttons array Optional. Array of buttons. Each button should be presented as Object with button parameters (look below)
verticalButtons boolean false Optional. Set to true to enable vertical buttons layout
onClick function Optional. Callback function that will be executed when user clicks any of Modal's button. As arguments it receives modal (with Modal's HTMLElement) and index (with index number of clicked button)

Let's look at Button's parameters:

Parameter Type Default Description
text string String with Button's text (could be HTML string)
bold boolean false Optional. Set to true for bold button text
close boolean true Optional. If "true" then modal will be closed after click on this button
onClick function Optional. Callback function that will be executed when user click this button

Such configuration options allows to create flexible modals. Let's look at some examples.

  
  <header class="bar bar-nav">
      <h1 class="title">Custom Modals</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-3-modal">Modal With 3 Buttons</a></p>
      <p><a href="#" class="open-slider-modal">Modal With Slider</a></p>
      <p><a href="#" class="open-tabs-modal">Modal With Tabs</a></p>
      <p><a href="#" 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 () {
    var modal = $.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!')
          }
        },
      ]
    })
    });
  

Close Modals with JavaScript

Any Modal can be closed with JavaScript, not only by clicking on its buttons. For this we need to look at relate App method:

$.closeModal(modal) - close modal

  • modal - HTMLElement or string ( CSS Selector). Optional. If not specified, any opened modal will be closed

Modal Events

Modal events could be very useful when you need to do something in JavaScript when Modal opened/closed

Event Target Description
open Modal Element<div class="modal"> Event will be triggered when Modal starts its opening animation
opened Modal Element<div class="modal"> Event will be triggered after Modal completes its opening animation
close Modal Element<div class="modal"> Event will be triggered when Modal starts its closing animation
closed Modal Element<div class="modal"> Event will be triggered after Modal completes its closing animation

Preloader Modal

Preloader Modal is used to indicate some background activity (like Ajax request) and to block any user actions during this activity. To open Preloader modal we should also call appropriate App method: $.showPreloader([title]) - show modal with Preloader

  • title - string. Optional. Preloader modal title. By default (if not specified) it is euqal to "Loading...".

$.hidePreloader() - hide/close modal with Preloader. Because Preloader modal has not any buttons, it should be closed by JavaScript

  
  <header class="bar bar-nav">
    <h1 class="title">Preloader Modal</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-preloader">Open Preloader</a></p>
      <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
    </div>
  </div>  
  ...   
  
 
  $(document).on('click', '.open-preloader', function () {
    $.showPreloader();
    setTimeout(function () {
        $.hidePreloader();
    }, 2000);
  });
  $(document).on('click','.open-preloader-title', function () {
    $.showPreloader('Custom Title')
    setTimeout(function () {
        $.hidePreloader();
    }, 2000);
  });  
  

Indicator

If you don't need such "big" modal window like Preloader Modal to indicate activity, you can use simple and small indicator modal:

$.showIndicator() - show indicator modal

$.hideIndicator() - hide/close modal with Indicator. Because Indicator modal has not any buttons, it should be closed by JavaScript

  
  <header class="bar bar-nav">
      <h1 class="title">indicator</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-indicator">Open Indicator</a></p>
    </div>
  </div>
  ...     
  
  
  $(document).on('click','.open-indicator', function () {
      $.showIndicator();
      setTimeout(function () {
          $.hideIndicator();
      }, 2000);
  });
  

toast

Toast is a verfy light modal, It will not disturb user and will disapear after 3 seconds

  
$.toast("Error!");

Popover

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:

  
<div class="popover">
  <!-- Popover's angle arrow -->
  <div class="popover-angle"></div>

  <!-- Popover content -->
  <div class="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

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
  
<header class="bar bar-nav">
    <h1 class="title">Popup(JavaScript)</h1>
</header>
...
<div class="content">
    <div class="content-block">
      <p><a href="#" class="open-about">Open About Popup </a></p>
      <p><a href="#" class="open-services">Open Services Popup </a></p>
    </div>
       
</div> 
<!-- About Popup -->
<div class="popup popup-about">
  <div class="content-block">
    <p>About</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
<!-- Services Popup -->
<div class="popup popup-services">
  <div class="content-block">
    <p>Services</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>  
  
$(document).on('click','.open-about', function () {
  $.popup('.popup-about');
});
 
$(document).on('click','.open-services', function () {
  $.popup('.popup-services');
});   

Popup Events

Popup has the same events as Modals, they could be useful when you need to do something in JavaScript when Popup opened/closed

Event Target Description
open Popup Element<div class="popup"> Event will be triggered when Popup starts its opening animation
opened Popup Element<div class="popup"> Event will be triggered after Popup completes its opening animation
close Popup Element<div class="popup"> Event will be triggered when Popup starts its closing animation
closed Popup Element<div class="popup"> Event will be triggered after Popup completes its closing animation
  
<header class="bar bar-nav">
    <h1 class="title">Popup Events</h1>
</header>
...
<div class="content">
  <div class="content-block">
    <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
    <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p>
    <p><a href="#" data-popup=".popup-services" class="open-popup">Open Services Popup </a></p>
  </div>
</div>
<!-- About Popup -->
<div class="popup popup-about">
  <div class="content-block">
    <p>About</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
<!-- Services Popup -->
<div class="popup popup-services">
  <div class="content-block">
    <p>Services</p>
    <p><a href="#" 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
  
<header class="bar bar-nav">
    <h1 class="title">Dynamic Popup</h1>
</header>
...
<div class="content">
  <div class="content-block">
    <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
    <p><a href="#" class="create-popup">Create Popup</a></p>
  </div>
</div>
  
$(document).on('click','.create-popup', function () {
  var popupHTML = '<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);
}); 

Calendar

Calendar is a touch optimized component that provides an easy way to handle dates.

Calendar can be created and initialized using JavaScript. We need to use related App's method:

$("#my-input").calendar();

A calendar will popup when user click the input, and the start date will be the value of input.

You can use data-toggle='date' to init calendar if you don't want to write any JS code:

<input type="text" data-toggle='date' />

Params

Let's look on list of all available parameters:

Parameter Type Default Description
Common Picker Modal Component Parameters
inputReadOnly boolean true Sets "readonly" attribute on specified input
cssClass string Additional CSS class name to be set on calendar modal
closeByOutsideClick boolean true If enabled, picker will be closed by clicking outside of picker or related input element
toolbar boolean true Enables calendar modal toolbar
toolbarTemplate string Toolbar HTML Template
Specific Calendar Parameters
value array Array with initial selected dates. Each array item represents selected date
disabled Date Range Additonal disabled dates. Parameter accepts so called Date Range (look below for details)
formatValue function (p, values) Function to format input value, should return new/formatted string value. values is array where each item represents selected date
monthNames array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'] Array with full month names
monthNamesShort array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Array with short month names
dayNames array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Array with week day names
dayNamesShort array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Array with week day short names
dateFormat string 'yyyy-mm-dd' Default date format, available expressions:
  • 'yyyy' - 4 digits year
  • 'yy' - 2 digits year
  • 'mm' - 2 digits month number, from 01 to 12
  • 'm' - month number, from 1 to 12
  • 'MM' - full month name
  • 'M' - short month name
  • 'dd' - 2 digits day number, from 01 to 31
  • 'd' - day number, from 1 to 31
  • 'DD' - full week day name
  • 'D' - short week day name
multiple boolean false Enable to allows select multiple dates/values
rangePicker boolean false Enable to enable range picker. Not compatible with multiple
direction string 'horizontal' Months layout direction, could be 'horizontal' or 'vertical'
minDate Date null Minimum allowed date
maxDate Date null Maximum allowed date
touchmove boolean true If enabled then calendar months slides follow finger during touch move
animate boolean true Enables transition between months
closeOnSelect boolean false 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

A change Event will triggered on input element when user selected date.

Use DateTimePicker if you want to select both date and time.

Inline

If you init calendar on an div or other element instead of an input element, it will auto change to inline mode.

  <div data-toggle='date' />
    

Action sheet

Action sheet can show many action buttons for user to choose.

$.actions(buttons) - create and show Action Sheet.

  • buttons - buttons in action sheet, you can put buttons in different group.

Actions

  
  <header class="bar bar-nav">
      <h1 class="title">Actions</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
      <p><a href="#" class="create-actions">please choose</a></p>
    </div>
  </div>
  
  
  $(document).on('click','.create-actions', function () {
    var buttons1 = [
      {
        text: 'title',
        label: true
      },
      {
        text: 'Tom',
        bold: true,
        color: 'danger',
        onClick: function() {
          $.alert("you choose 'Tom'");
        }
      },
      {
        text: 'Bob',
        onClick: function() {
          $.alert("you choose 'Bob'");
        }
      }
    ];
    var buttons2 = [
      {
        text: 'cancel',
        bg: 'danger'
      }
    ];
    var groups = [buttons1, buttons2];
    $.actions(groups);
  });
  

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.

picker

Picker is a powerful component that allows you to create custom overlay pickers which looks like iOS native picker.

You should init a picker on an input element before you can use it.

Picker will use the value of input as default value. The default read value will be error if you have mutli cols, because picker don't know how to split one string to multi cols.Infact, Piker will use space to split the value of input, and set the them as the value of cols. If your input value is not split with space, you should set the default value with JavaScript.

<input type="text" id='picker'/>
<script>
$("#picker").picker({
  toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-left">Button</button>\
  <button class="button button-link pull-right close-picker">OK</button>\
  <h1 class="title">Title</h1>\
  </header>',
  cols: [
    {
      textAlign: 'center',
      values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
    }
  ]
});
</script>

close picker

Add .close-picker class to any link, and click it to close the picker

You can alose call $(".picker").picker("close") or $.closeModal(".picker-modal.modal-in") to close a picker。

Params

See the examplse:

$("#picker-name").picker({
  toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-right close-picker">OK</button>\
  <h1 class="title">Please Choose</h1>\
  </header>',
  cols: [
    {
      textAlign: 'center',
      values: ['Mr', 'Ms']
      // displayValues: [.....] the value to display, if not specified, it will display the values
    },
    {
      textAlign: 'center',
      values: ['Brook', 'Churchill', 'Hill', 'Field', 'Green', 'Baby']
    }
  ]
});

Let's look on list of all available parameters:

Param Default Description
toolbarTemplate <header class="bar bar-nav"> <button class="button button-link pull-right close-picker">OK</button> <h1 class="title"></h1> </header> Toolbar HTML Template
value Array with initial values. Each array item represents value of related column. Picker will auto read value from input if not set.
rotateEffect false Enables 3D rotate effect
toolbar true Enables picker modal toolbar
inputReadOnly true Sets "readonly" attribute on specified input
cssClass undefined Additional CSS class name to be set on picker modal

Column parameters

When we configure Picker we need to pass cols parameter. It is an array where each item is object with column parameters:

Parameter Type Default Description
values array Array with string columns values
displayValues array Array with string columns values that will be displayed in Picker. If not specified, it will display values from values parameter
cssClass string Additional CSS class name to be set on column HTML container
textAlign string Text alignment of column values, could be "left", "center" or "right"
width number Column width in px. Useful if you need to fix column widths in picker with dependent columns. By default, calculated automatically
divider boolean false Defines column that should be used as a visual divider, that doesn't have any values
content string Should be specified for divider-column (divider:true) with content of the column
Callbacks
onChange function (p, value, displayValue) Callback function that will be executed when column value changed. value and displayValue represent current column value and displayValue

picker方法

You can call methods of pickers like this: $(".picker").picker("method", args1, args2...)

$("#picker-name").picker("open");
$("#picker-name").picker("close");
$("#picker-name").picker("setValue", ["2012", "12", "12"]);

All aviable methods:

Methods
myPicker.setValue(values, duration) Set new picker value. values is array where each item represents value for each column. duration - transition duration in ms
myPicker.open() Open Picker
myPicker.close() Close Picker
myPicker.destroy() Destroy Picker instance and remove all events

Datetime Picker

Datetime picker is a customed Picker. So, it'is usage is same to Picker.

datetime-picker customed onChange and cols, don't change these two param please.

datetime-picker will read the value of input as init value, but the format must be yyyy-mm-dd HH:MM, such as 2015-12-12 08:30

<input type="text" id='datetime-picker'/>
<script>
  $("#datetime-picker").datetimePicker({
    toolbarTemplate: '<header class="bar bar-nav">\
    <button class="button button-link pull-right close-picker">OK</button>\
    <h1 class="title">Choose datetime</h1>\
    </header>'
  });
</script>

If you only want to select date, use Calendar please.

List

List views are versatile and powerful user interface compontents frequently found in iOS apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.

List views have many purposes:

  • To let users navigate through hierarchically structured data
  • To present an indexed list of items
  • To display detail information and controls in visually distinct groupings
  • To present a selectable list of options
<header class="bar bar-nav">
  <h1 class="title">List view</h1>
</header>
<div class="content">
  <div class="content-block-title">With icon, title and after</div>
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Bom</div>
          <div class="item-after">12:12</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Gender</div>
          <div class="item-after">Male</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">With title and after</div>
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Bom</div>
          <div class="item-after">12:12</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Gender</div>
          <div class="item-after">Male</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">With Arrow</div>
  <div class="list-block">
    <ul>
      <li class="item-content item-link">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Bom</div>
          <div class="item-after">12:12</div>
        </div>
      </li>
      <li class="item-content item-link">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Gender</div>
          <div class="item-after">Male</div>
        </div>
      </li>
    </ul>
  </div>
</div>

Where:

    • item-content - main flex wrapper for item-media and item-inner. Requred element.

      • item-media - container for your media element like icon, image, etc. Optional element.

      • item-inner - main flex wrapper for item-title and item-after. Requred element.

        • item-title - single-line list item title. Required element.

        • item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

Add .item-link class on .item-content will make it show a right arrow。

Contacts List

Show contacts

Contacts list is a particular case of Grouped Lists with two differences:

  • list-block should have additional contacts-block class

  • page-content should have additional contacts-content class

Contacts list will auto have a iOS-like index list on the right side - it's named index list. Try it on the demo on the right side ->

The index list is a JS component, it will auto init when page init. You should init it like this if your contacts list is load by ajax:

$(".contacts-block").indexList();
<header class="bar bar-nav">
  <h1 class="title">Contacts List</h1>
</header>
<div class="content">
  <div class="list-block contacts-block">
    <div class="list-group">
      <ul>
        <li class="list-group-title">A</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person0</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person6</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Person7</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">B</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Tom</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">TOm</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Tom3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Tom4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Tom5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Tom6</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">C</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David6</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">David7</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">V</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Lily1</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Media List View

Media list view is extended case of list view indended to display more complex data like products, services, users, etc.

And of course it has a bit more complex layout:

<header class="bar bar-nav">
  <h1 class="title">Media List</h1>
</header>
<div class="content">
  <div class="content-block-title">Title</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Title</div>
              <div class="item-after">$15</div>
            </div>
            <div class="item-subtitle">Title</div>
            <div class="item-text">some text here...</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="content-block-title">Mail App</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Facebook</div>
              <div class="item-after">17:14</div>
            </div>
            <div class="item-subtitle">Title</div>
            <div class="item-text">Some text here...</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="content-block-title">Simple list</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <div class="item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Title</div>
            </div>
            <div class="item-subtitle">sub title</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">Inset</div>
  <div class="list-block media-list inset">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Title</div>
            </div>
            <div class="item-subtitle">Subtitle</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

Where:

  • item-content - main flex wrapper for item-media and item-inner. Requred element.

    • item-media - container for your media element like icon, image, etc. Optional element.

    • item-inner - Requred element.

      • item-title-row - main flex wrapper for item-title and item-after. Optional element.

        • item-title - single-line list item title. Optional element.

        • item-after - list item label. Could countain any additional HTML elements, like label text, or badge, or switch/toggle or button, etc. Optional element.

      • item-subtitle - additional single-line title. Optional element.

      • item-text - additional two-lines container for detailed description. Optional element.

Selectable List

List can be selected with checkbox or radio. You can put checkbox or radio in List, and the list item will have a selected style when user select. There is no JS at all, So you should read data from the hidden checkbox or radoi

<ul>
  <li>
    <label class="label-checkbox item-content">
      <input type="radio" name="my-radio">
      <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">Lily</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum dolor sit amet...</div>
      </div>
    </label>
  </li>
  <li>
    <label class="label-checkbox item-content">
      <input type="radio" name="my-radio">
      <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">Lucy</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum dolor sit amet...</div>
      </div>
    </label>
  </li>
</ul>

Change the type of input to "checkbox" to make multiple select.

Cards

Cards, along with List View, is a one more great way to contain and orginize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

<header class="bar bar-nav">
  <h1 class="title">Cards</h1>
</header>
<div class="content">
  <div class="content-block-title">Simple Cards</div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">This is simple card with plain text. But card could contain its own header, footer, list view, image, and any elements inside.</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Card header</div>
    <div class="card-content">
      <div class="card-content-inner">Card with header and footer. Card header is used to display card title and footer for some additional information or for custom actions.</div>
    </div>
    <div class="card-footer">Card Footer</div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>
  </div>            

  <div class="content-block-title">Styled Cards</div>

  <div class="card demo-card-header-pic">
    <div style="background-image:url(...)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
    <div class="card-content">
      <div class="card-content-inner">
        <p class="color-gray">Posted on January 21, 2015</p>
        <p>Quisque eget vestibulum nulla...</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link">Like</a>
      <a href="#" class="link">Read more</a>
    </div>
  </div>
  <div class="content-block-title">Facebook Cards</div>
   
  <div class="card facebook-card">
    <div class="card-header no-border">
      <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
      <div class="facebook-name">John Doe</div>
      <div class="facebook-date">Monday at 3:47 PM</div>
    </div>
    <div class="card-content"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%"></div>
    <div class="card-footer no-border">
      <a href="#" class="link">Like</a>
      <a href="#" class="link">Comment</a>
      <a href="#" class="link">Share</a>
    </div>
  </div>

  <div class="card facebook-card">
    <div class="card-header">
      <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
      <div class="facebook-name">John Doe</div>
      <div class="facebook-date">Monday at 2:15 PM</div>
    </div>
    <div class="card-content">
      <div class="card-content-inner">
        <p>What a nice photo i took yesterday!</p>
        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%">
        <p class="color-gray">Likes: 112    Comments: 43</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link">Like</a>
      <a href="#" class="link">Comment</a>
      <a href="#" class="link">Share</a>
    </div>
  </div>   
</div>

Pull to refresh

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;
<header class="bar bar-nav">
  <h1 class='title'>Pull to refresh</h1>
</header>
<div class="content pull-to-refresh-content" data-ptr-distance="55">
  <div class="pull-to-refresh-layer">
    <div class="preloader"></div>
    <div class="pull-to-refresh-arrow"></div>
  </div>
  <div class="card">
    <div class="card-header">card</div>
    <div class="card-content">
      <div class="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() {
        var cardHTML = '<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

infinite scroll

...
<style type="text/css">
.infinite-scroll-preloader {
  margin-top:-20px;
}
</style>

<header class="bar bar-nav">
    <h1 class="title">infinite scroll</h1>
</header>
<!-- 添加 class infinite-scroll 和 data-distaance -->
<div class="content infinite-scroll" data-distance="100">
    <div class="list-block">
        <ul class="list-container">
        </ul>
    </div>
    <!-- preloader -->
    <div class="infinite-scroll-preloader">
        <div class="preloader"></div>
    </div>
</div>
    

Note:

  • div class="page-content infinite-scroll" - the container of infinite scroll
  • data-distance - distance to bottom to trigger infinite scroll , default is 50 (px)

javacript:

    var loading = false;
    var maxItems = 100;

    var itemsPerLoad = 20;

    function addItems(number, lastIndex) {
            var html = '';
            for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
            }
            $('.list-container').append(html);

        }
    addItems(itemsPerLoad, 0);


    var lastIndex = 20;

    $(document).on('infinite', '.infinite-scroll',function() {

        // 如果正在加载,则退出
        if (loading) return;

        // 设置flag
        loading = true;

        setTimeout(function() {
            loading = false;

            if (lastIndex >= maxItems) {
                $.detachInfiniteScroll($('.infinite-scroll'));
                $('.infinite-scroll-preloader').remove();
                return;
            }

            addItems(itemsPerLoad, lastIndex);
            lastIndex = $('.list-container li').length;
        }, 1000);
    });

infinite scroll on top of page

If you want load items when scroll top of page,you should add infinite-scroll-top class to page-content.

infinite scroll on top

...
<header class="bar bar-nav">
    <h1 class="title">infinite scroll on top</h1>
</header>
<div class="content infinite-scroll-top" data-distance="100">
    <div>...</div>
</div>
    

Infinite scroll Event

Event Target Description
infinite div.content.infinite-scroll Trigger when user scroll to bottom of page. use data-distance to set distance.

API

Two methods can use:

$.attachInfiniteScroll(container) - attach infinite scroll listener on container
parameters -  HTML Element or CSS Selector.
$.detachInfiniteScroll(container) - remove infinite scroll event
parameters - HTML Element or CSS Selector.

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.
onClick undefined Callback when user click.
onClose undefined Callback when notification is closed.
time 4000 The duration of notification.

Icons

Icons with iconfont

<div class="content-padded docs-icons">
  <span class="icon icon-app"></span>
  <span class="icon icon-browser"></span>
  <span class="icon icon-card"></span>
  <span class="icon icon-cart"></span>
  <span class="icon icon-code"></span>
  <span class="icon icon-computer"></span>
  <span class="icon icon-remove"></span>
  <span class="icon icon-download"></span>
  <span class="icon icon-edit"></span>
  <span class="icon icon-emoji"></span>
  <span class="icon icon-star"></span>
  <span class="icon icon-friends"></span>
  <span class="icon icon-gift"></span>
  <span class="icon icon-phone"></span>
  <span class="icon icon-clock"></span>
  <span class="icon icon-home"></span>
  <span class="icon icon-menu"></span>
  <span class="icon icon-message"></span>
  <span class="icon icon-me"></span>
  <span class="icon icon-picture"></span>
  <span class="icon icon-share"></span>
  <span class="icon icon-settings"></span>
  <span class="icon icon-refresh"></span>
  <span class="icon icon-caret"></span>
  <span class="icon icon-down"></span>
  <span class="icon icon-up"></span>
  <span class="icon icon-right"></span>
  <span class="icon icon-left"></span>
  <span class="icon icon-check"></span>
  <span class="icon icon-search"></span>
</div>

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.

<div class="page page-current" id='router'>
  <header class="bar bar-nav">
    <h1 class='title'>Router</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <ul>
        <li><a href="/docs-demos/router2">Ajax Page</a></li>
        <li><a href="#router3">Inline Page</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="page" id='router3'>
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/docs-demos/router">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class='title'>Router</h1>
  </header>
  <div class="content">
    <div class="content-block">
      This is an Inline Page,Click <a href="#" class='back'>Back </a> to go back。
    </div>
  </div>
</div>

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.

<!-- page 1 -->
<div class="page page-current" id='router'>
  <header class="bar bar-nav">
    <h1 class='title'>Router</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <ul>
        <li><a href="/docs-demos/router2">Ajax New Page</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- page 2 -->
<div class="page" id='router2'>
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/docs-demos/router">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class='title'>Router</h1>
  </header>
  <div class="content">
    <div class="content-block">
      This is an Ajax Page,click <a href="#" class='back'>Back </a> to go back。
    </div>
  </div>
</div>

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.

<a class="button button-link button-nav pull-left back" href="/docs-demos/router">Back</a>

JS

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

$.router.loadPage("/detail");  //load ajax page
$.router.loadPage("#about");  //load inline page

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

$.router.loadPage({
  url: "/detail",
  noAnimation: true,
  replace: true
});
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:

$.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();.

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.

$(document).on("pageInit", "#page-index", function(e, pageId, $page) {});
<!--Or -->
$(document).on("pageInit", function(e, pageId, $page) {
  if(pageId == "pageIndex") {}
});

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.

Night Mode

We provide a night mod (night theme). You can add .theme-dark to body or .page or .content to enable night mode on all it's children.

You can alse add .theme-dark to .bar to make the Title Bar or Toolbar to be night mode.

The foreground color is white and background color is black, in night mode.

Night mode is still in test. Please create an Issue on github if you find any problems.

The next chapter is color theme. Color theme only chang the foreground color. You can also use color-them in .theme-dark to show different color.

Color theme

Color theme only change the primary color. Add theme-{color} to body or .page or .content to change it's color.

There are three buildin color-themes:

  • .theme-pink
  • .theme-green
  • .theme-yellow

You can click buttons in the demo on the right to change colors.

Note that the color-theme will only change the primary color, most of foreground color will not be changed.

Color theme is still in test. Please create an Issue on github if you find any problems.