ViewSwitcher

ViewSwitcher component controls each view elements which are changing position.This component managed to animation, views position, events and get/set active view index.If you want to change the view as various animating, you should wrap views as the ViewSwitcher element thenViewSwitcher would set views position and start to manage to gesture event.
Note
This component is supported since 2.3.

Table of Contents

  1. How to Create ViewSwitcher
  2. Events
  3. Methods
    1. setActiveIndex
    2. getActiveIndex

How to Create ViewSwitcher

HTML Examples

<div id="drawerPage" class="ui-page">
   <div id="moreoptionsDrawer" class="ui-drawer">
      <div id="pageIndicator" class="ui-page-indicator"></div>
      <div id="viewSwitcher" class="ui-view-switcher">
         <div class="ui-view custom-view">
            <button class="option-button">1</button>
         </div>
         <div class="ui-view custom-view ui-view-active">
            <button class="option-button">2</button>
         </div>
         <div class="ui-view custom-view">
            <button class="option-button">3</button>
         </div>
         <div class="ui-view custom-view">
            <button class="option-button">4</button>
         </div>
         <div class="ui-view custom-view">
            <button class="option-button">5</button>
         </div>
      </div>
   </div>
</div>

Manual Constructor

(function()
{
   var viewSwitcherElement = page.querySelector("#viewSwitcher"),
       viewSwitcher = tau.widget.ViewSwitcher(viewSwitcherElement);
})();

Events

Summary

Name Description
viewchange

This event has been triggered when view was located on change location.
(User drag ViewSwitcher over the half of width.)

This event has detail information.
- index : {number} This information is active index after view animation.
viewchangestart

Triggered when view changing started.
viewchangeend

Triggered when view changing ended.

Event example

(function()
{
   var viewSwitcherElement = page.querySelector("#viewSwitcher"),
       views = document.querySelectorAll(".ui-view"),
       elPageIndicator = document.querySelector("#pageIndicator");

   pageIndicator = tau.widget.PageIndicator(elPageIndicator, {numberOfPages: 5}),
   viewSwitcherElement.addEventListener("viewchange", function(event)
   {	
      var index = event.detail.index;
      if (index < 0 || index > views.length - 1)
      {
         return;
      }
      pageIndicator.setActive(index);
   }, false);
})();

Methods

Summary

Method Description 
setActiveIndex(index)

Set the active view with index value

 
getActiveIndex()

Get the active view index
setActiveIndex

Set the active view with index value

setActiveIndex(index)

Return value:

No Return Value
getActiveIndex

Get the active view index

getActiveIndex()

Return value:

Type Description
number index of active view