Change tabs from within webview

Question

I've setup some webviews & with tabs in Appcelerator Titanium, but wondered:

How can I change tabs from within the webview html?

ie. I've split my app into 4 html pages (across 4 tabs). I have links in the html webviews which I would like to fire an event to switch tabs.

My tab items are setup as so in app.js:

var win1 = Titanium.UI.createWindow();
var tab1 = Titanium.UI.createTab({
    icon:'images/tabs/card1.png',
    title:'Card 1',
    window:win1
});

var webview1 = Titanium.UI.createWebView({url: 'index.html'});

win1.add(webview1);
win1.hideNavBar();

So in this example, i have an a href in index.html, which when clicked, i'd like to switch the app to the 3rd tab (which has a different webview).

Answer 1

You need to fire and event in the HTML file and listen for it in your application

Ti.App.fireEvent Documentation Link

Code in HTML file

<a href="/" onclick='Ti.App.fireEvent("wvClick",{new_tab:"tab_identifier"}); return    
           false;'>Switch Tab</a>

Code in js file

Ti.App.addEventListener('wvClick', function(data) 
{ 
Titanium.API.info("--> " + data.new_tab);
});