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}); });