Panel Changer

To implement multi page layout in a page component, you can use panel and panel changer components.

Panel can have header, content and so on like the page component.
It works even if the panel components is in other HTML files.
Panel changer component controls lifecycle of the panels.

Table of Contents

  1. Default selectors
  2. Manual constructor
  3. HTML Examples
  4. Options
  5. Events
  6. Methods

Default Selectors

By default, all elements with the class="ui-panel-changer" or data-role="panel-changer" attribute are displayed as panel changer components.

Panel components use the class="ui-panel" or data-role="panel"

Manual Constructor

For manual creation of panel changer, you can use constructor from tau namespace:

var elPanelChanger = document.getElementById("panelchanger"),
    panelChanger = tau.widget.PanelChanger(elPanelChanger);

HTML Examples

  • Panels in another HTML file panel.html

    <div id="panel2" class="ui-panel">
       <div class="ui-content">
          <ul class="ui-listview">
             <li class="ui-li-anchor">
                <a href="#panel3">Go Panel 3</a>
    <div id="panel3" class="ui-panel">
       <div class="ui-content">
          <ul class="ui-listview">
             <li class="ui-li-anchor">

  • Panel changer and main panel in your HTML file

    <div id="panelChanger" class="ui-panel-changer">
       <div id="mainpanel" class="ui-panel">
          <ul class="ui-listview">
             <li class="ui-li-anchor">
                <a href="./panel.html#panel2">Go Panel 2</a>


Option Input type Default value Description
data-manage-history boolean true represent whether to manage history of panels


Name Description

Triggered before the new panel component is created and initialized.


Triggered after the new panel component creation.


Triggered before the new panel is displayed.


Triggered after the new panel is displayed.


Triggered before the current panel is about to be closed.


Triggered after the current panel is hidden.


Triggered after switching from the current panel to the new panel.



Method Description
changePanel(String address, String animationType, String direction) 

Change panel method


change panel

changePanel(String address, String animationType, String direction) 


Parameter Type Description
address String path of a panel to be changed
animationType String animation type of panel changing
direction String represent panel history goes forward or backward.

Return value:

No Return Value