The navigation bar 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 bar, you can move to the target page.
Note |
---|
This component is supported since Tizen 2.3. |
Make the navigation component with the data-role="navigation"
attribute. For semantic understanding, use the nav
element.
<div data-role="page"> <div data-role="header" data-position="fixed"> <h1>title</h1> <nav data-role="navigation" id="navigation"></nav> </div> <div data-role="content"></div> </div>
To create a navigation bar, an array containing the navigation history is required. Each value of the array must have an identifiable value, such as a name. In the following example, the array is named as "historyArraytoUse".
The navigation bar component only provides the creation of the visual navigation bar, no functional navigation. You must separately implement the navigational function in the application using other methods, such as history.go()
.
Declare the navigation in the HTML code using the data-role
attribute:
<div data-role="page" id="navigation-bar"> <!--Declare navigation in header--> <div data-role="header" data-position="fixed"> <h1>Navigation bar</h1> <nav data-role="navigation" id="navigation"> </nav> </div> <!--You can include several pages where to move--> <div data-role="content"> <ul data-role="listview"> <li><a href="navigation1.html">Move to Navigation1</a></li> <li><a href="navigation2.html">Move to Navigation2</a></li> </ul> </div> </div>
Make a history array and create the navigation bar in the JavaScript code:
var historyMaker = function(event) { // Store the browsing history in navigationHistory array var iteration = window.navigationHistory.length, i = 0, targetId = event.target.id; if (!iteration) { navigationHistory.push({pageId : targetId}); } else { for (i = 0; i < iteration; i++) { if (targetId === navigationHistory[i].pageId) { navigationHistory.splice(i + 1, iteration - i - 1); break; } } if (i >= iteration) { navigationHistory.push({pageId : targetId}); } } }, historyDrawer = function(event) { var navi = document.getElementById("navigation"), naviWidget = tau.widget.Navigation(navi); if (document.getElementsByClassName("ui-navigation-ul")[0].childElementCount) { tau.warn("Create method should be called only once in a page"); } else { // Create navigation component with navigationHistory naviWidget.create(navigationHistory); } }, historyMove = function(event) { var selectedIndex = event.originalEvent.detail, barLength = navigationHistory.length; // Clear unnecessary array of history out navigationHistory.splice(selectedIndex + 1, barLength - selectedIndex ); history.go(- (barLength - selectedIndex) + 1); }; window.navigationHistory = window.navigationHistory || []; // When page is created and shown, following this event handler need to bind only once $(document).one("pagebeforeshow", historyMaker); $(document).one("pageshow", historyDrawer); $("nav").one("navigate", historyMove);
Method | Description |
---|---|
create ( Array navigationHistory ) |
Initiates the making of the navigation bar. |
create
Initiates the making of the navigation bar.
create ( Array navigationHistory)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
navigationHistory | Array | Required |
Return value:
No return value