" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
|
Navigation group is used to navigate between two or more pages in iPhone in an animated / sliding way. The API provides with a back button which can be used to go back to the previous view. For a navigation group to exist there should be at least a root level window that would act as a container to the navigation group. The sliding animation of the navigation group can be removed by setting animation : false if required |
|
This example has a root window, one navigation group which contains three windows. Each window will contain one button to navigate to the next window.
|
//Creation of root window.
var rootWin = Titanium.UI.createWindow();
//first window to be displayed in the first load of navigation group
var firstWindow= Titanium.UI.createWindow({
backgroundColor = 'green', //background color of the window
title = 'First Window'
});
//Creating a button for the first window
var firstWindowBtn = Ti.UI.createButton( {
height : 30,
//height of the button
width : 100, //width of the button
top : 100, //margin from the top
backgroundColor :'grey',
title : 'Move to second window'
});
//button is added to the first window first
Window.add(firstWindowBtn );
//second window creation
var secondWindow = Titanium.UI.createWindow({
backgroundColor: 'red', // background color of the window
title: 'Second Window'
});
//creating a button for the second window
var secondWindowBtn= Ti.UI.createButton({
height : 30, //height of the button
width : 100, //width of the button
top : 100, //margin from top
backgroundColor :'grey',
title : 'Move to third window' });
//adding the button to the second window second
Window .add(secondWindowBtn);
//Creating third window
var thirdWindow= Titanium.UI.createWindow({
backgroundColor: 'blue', //backgroundcolor of the window
title: 'Third Window' });
//Creating a navigation Group
var nav = Titanium.UI.iPhone.createNavigationGroup({
window: firstWindow //first window is added to the nav group
});
//navigation group is added to the root window
rootWin .add(nav);
//Opening the root window
rootWin .open();
//On clicking the firstWindowBtn, it will navigate to the red window firstWindowBtn .addEventListener('click', function(){
//It will give the sliding effect while opening the second window nav.open(secondWindow, {animated : true});
});
//On clicking the secondWindowBtn, it will navigate to winBlue secondWindowBtn.addEventListener('click', function(){
//It will give the sliding effect while opening the third Window nav.open(thirdWindow , {animated : true});
});