snapshot
/
GuaranaUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
		
	<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />

	<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../lib/jquery/jquery.scrollTo.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">
		body {
			padding: 0 10px;
			font-size: 14px;
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			max-width: 640px;
		}

		p {
			margin: 30px 10px;
			font-size: 18px;
		}

		#tabs {
			padding: 10px;			
		}
	</style>

</head>

<body>

	<!--
	<div id="test" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">Testing</div>
	-->
	
	<div id="tabs">
	
		<ul>
			<li><a href="#tab1">Item 1</a></li>
			<li><a href="#tab2">Item 2</a></li>
			<li><a href="#tab3">Item 3</a></li>
			<li><a href="#tab4">Item 4</a></li>
		</ul>
		
		<div id="tab1">
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
			<p>Lorem Ipsum Dolor 1</p>
		</div>
		<div id="tab2">
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
			<p>Lorem Ipsum Dolor 2</p>
		</div>
		<div id="tab3">
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
			<p>Lorem Ipsum Dolor 3</p>
		</div>
		<div id="tab4">
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
			<p>Lorem Ipsum Dolor 4</p>
		</div>	

	</div>
	
	<script type="text/javascript" charset="utf-8">
	
		if (window.widget) {
			widget.setNavigationEnabled(false);
		}
	
		var init = function() {
			
			var tabs = new Nokia.Tabs({
				element: '#tabs',
				itemWidth: '128px',
				create: function() {
					console.log('Tabs: Create');
				},
				select: function(event, index) {
					console.log('Tabs: Select', event, index);
				}
			});
			
			/*
			 * Hide splash when its all done.
			*/
			
			Nokia.hideSplash();
			
		};
		
		/*
		 * Show splash while loading components.
		*/
			
		Nokia.showSplash('<span>loading</span>');
		
		Nokia.use('tabs', init);
	
	</script>

</body>
</html>