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 has been DEPRECATED since Tizen 4.0 and will be deleted in future releases.
Since Tizen 4.0, please use Section Changer component instead.

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

   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

   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

 
number 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

number getActiveIndex()

Return value:

Type Description
number index of active view