Navigation

The navigation component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation, you can move to the target page.

Table of Contents

1. Default Selector
2. HTML Examples
3. Methods

Default Selector

Make the navigation component with the class="ui-navigation" or data-role="navigation" attribute. For semantic understanding, use the nav element.

<div class="ui-page">
   <div class="ui-header" data-position="fixed">
      <h1>title</h1>
      <nav class="ui-navigation" id="navigation"></nav>
   </div>
   <div class="ui-content"></div>
</div>

HTML Examples

HTML Example with PanelChanger

<div id="panelPage" class="ui-page">
   <div class="ui-header" data-position="fixed">
      <h1>Navigation</h1>
      <nav id="navigation" class="ui-navigation">
      </nav>
   </div>
   <div class="ui-content">
      <div id="panelChanger" class="ui-panel-changer">
         <div id="mainpanel" class="ui-panel">
            <a href="#panel2">Go Panel 2</a>
         </div>
      </div>
   </div>
   <script src="./panel.js"></script>
</div>

<!-- in 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>
         </li>
      </ul>
   </div>
</div>
<div id="panel3" class="ui-panel">
   <div class="ui-content">
      <ul class="ui-listview">
         <li class="ui-li-anchor">
            <a>Panel3</a>
         </li>
      </ul>
   </div>
</div>

JS Example with PanelChanger

<!-- in panel.js -->
(function() {
   var page = document.querySelector("#panelPage"),
      panelChanger = page.querySelector("#panelChanger"),
      panelChangerComponent,
      navigation = page.querySelector("#navigation"),
      navigationComponent,
      navigated = false;

   page.addEventListener("pagebeforeshow", function(){
      var activePanel = page.querySelector(".ui-panel-active");
      panelChangerComponent = tau.widget.PanelChanger(panelChanger);
      navigationComponent = tau.widget.Navigation(navigation);
      navigationComponent.push(activePanel.id);
   });
   panelChanger.addEventListener("panelchange", function(event) {
      var toPanel = event.detail.toPanel,
         direction = event.detail.direction,
         id = toPanel.id;

      if (id) {
         if (direction === "forward") {
            navigationComponent.push(id);
         } else {
            if (navigated === false) {
               navigationComponent.pop();
            } else {
               navigated = false;
            }
         }
      } else {
         console.warn("You should insert id value in the each panels")
      }
   });
   navigation.addEventListener("navigate", function(event) {
      var id = event.detail.id;
      navigated = true;
      panelChangerComponent.changePanel("#" + id, "slide-reverse", "back");
   });
})();
    

Methods

Summary

create ( ) 

push ( String targetId ) 

pop ( ) 

create :DEPRECATED since 2.4

Initiates the making of the navigation.

create ( ) 

push

Adds the given navigation item.

push ( String targetId ) 

Parameters:

Parameter	Type	Required / optional	Description
targetId	String	Required	Element ID to be added

Code example:

<div class="ui-header" data-position="fixed">
   <h1>Navigation</h1>
   <nav id="navigation" class="ui-navigation">
   </nav>
</div>
<div class="ui-content">
   <div id="panelChanger" class="ui-panel-changer">
      <div id="mainpanel" class="ui-panel" style="background-color:#ffff4f">
         <a href="./panel.html#panel2">Go Panel 2</a>
      </div>
   </div>
</div>
<script>
   var navigation = page.querySelector("#navigation"),
      activePanel = page.querySelector(".ui-panel-active"),
      navigationComponent = tau.widget.Navigation(navigation);
      navigationComponent.push(activePanel.id);
</script>

pop

Pops the last child of the navigation.

pop ( ) 

Code example:

<div class="ui-header" data-position="fixed">
   <h1>Navigation</h1>
   <nav id="navigation" class="ui-navigation">
   </nav>
</div>
<script>
   var navigation = page.querySelector("#navigation"),
      navigationComponent = tau.widget.Navigation(navigation);
   
   navigationComponent.pop();
</script>