LiquidGear | TabBar

Adding Buttons

To add TabBar buttons is simply one line of code:

lg.tabs.add(obj);

The obj will contain the attributes below:

btn (numeric) – The button number. Should range from 1-5. The first button is 1, the second is 2, and so on.
title (string) – The name of the button
icon (string) – The filename of the image icon (the png file). This file should be located in the Resources folder
callback (string) – The function called when the button is clicked.

Display TabBar
After you have created your tab buttons, you can now show the TabBar:

lg.tabs.show();

Example

//This will call your init function when everything is loaded
console.log('bind');
lg.bind('lg_init', initTabs);

function initTabs() {
	console.log('initTabs');
	lg.tabs.add({btn:1, title:'Home', icon:'btn1.png', callback:'onTabClick1'});
	lg.tabs.add({btn:2, title:'Files', icon:'btn2.png', callback:'onTabClick2'});
	lg.tabs.add({btn:3, title:'Favorites', icon:'btn3.png', callback:'onTabClick3'});
	lg.tabs.show();
}

function onTabClick1() {
	console.log('tab one clicked');
}

function onTabClick2() {
	console.log('tab two clicked');
}

function onTabClick3() {
	console.log('tab three clicked');
}

Navigating to Pages

Make sure the jquery.js and lg_iphone_ui.js are included in the index.html. Make sure the call back includes parenthesis, “gotoInfo()” and not “gotoInfo”. Arguments can be passed here as well. When the callback function is called, it would include a page open action.

lg.page.open('info');

This will open the page with the specified id. The pages will need to be configured using a div tag.

id – The most important is the id attribute. This is a unique name you will be using to refer to the page.
class – Set the class as “page”.
type – Set as “html”. Right now we only support html, or webViews, but will be including other views in the future.
url – Page filename
title – Page Title. This is also used as the title in the NavBar if a NavBar is used.
desc – Short description. This will also be used as the content below the title in the NavBar, if used.
callback – The function to call once the page has been opened.

<div class="page" type="html" id="info" url="info.html" title="Info" desc="Device information" callback="setInfo" navigation="true"></div>

index.html

The completed index.html would look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LiquidGear</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">
  <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/lg_iphone.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/lg_iphone_ui.js"></script>
  <script type="text/javascript">
	//This will call your init function when everything is loaded
	lg.bind('lg_init', initTabs);

	function initTabs() {
		lg.tabs.add({btn:1, title:'Home', icon:'btn1.png', callback:'gotoInfo()'});
		lg.tabs.add({btn:2, title:'Files', icon:'btn2.png', callback:'gotoContacts()'});
		lg.tabs.show();
	}

	function gotoInfo() {
		lg.page.open('info'); // I'd like someting like that...
	} 

	function gotoContacts() {
		lg.page.open('contacts'); // I'd like someting like that...
	}
	</script>
</head>

<body id="stage">
	<div class="page" type="html" id="home" url="home.html" title="LiquidGear" desc="Welcome to LG" navigation="true" selected="true"></div>
  <div class="page" type="html" id="info" url="info.html" title="Info" desc="Device information" callback="setInfo" navigation="true"></div>
</body>

</html>