Note |
---|
This component is supported since 2.3. |
<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>
(function() { var viewSwitcherElement = page.querySelector("#viewSwitcher"), viewSwitcher = tau.widget.ViewSwitcher(viewSwitcherElement); })();
Name | Description |
---|---|
viewchange | This event has been triggered when view was located on change location.
This event has detail information. |
viewchangestart | Triggered when view changing started. |
viewchangeend | Triggered when view changing ended. |
(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); })();
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 ValuegetActiveIndex
Get the active view index
getActiveIndex ( )
Return value:
Type | Description |
---|---|
number | index of active view |