snapshot
/
GuaranaUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!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="../../../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">
		#accordion {
			font-size: 18px;
		}

	</style>

</head>

<body>

<div id="accordion">
	<a href="javascript:void(0);">Section 1</a>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in.
		</p>
	</div>
	<a href="javascript:void(0);">Section 2</a>
	<div>
		<p>
			<div id="accordion2">
				<a href="javascript:void(0);">Section 1</a>
				<div>
					<p>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
					ut neque. Vivamus nisi metus, molestie vel, gravida in.
					</p>
				</div>
				<a href="javascript:void(0);">Section 2</a>
				<div>
					<p>
					Sed non urna. Donec et ante. Phasellus eu ligula.
					</p>
				</div>
				<a href="javascript:void(0);">Section 3</a>
				<div>
					<p>
					Nam enim risus, molestie et, porta ac, aliquam ac, risus.
					</p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
				<a href="javascript:void(0);">Section 4</a>
				<div>
					<p>
					Cras dictum. Pellentesque habitant morbi tristique senectus et netus
					et malesuada fames ac turpis egestas.
					</p>
					<p>
					Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
					</p>
				</div>
			</div>
		</p>
	</div>
	<a href="javascript:void(0);">Section 3</a>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<a href="javascript:void(0);">Section 4</a>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		</p>
	</div>
</div>

<script type="text/javascript" charset="utf-8">

	if (window.widget) {
		widget.setNavigationEnabled(false);
	}
	
	var init = function() {
		
		var accordion = new Nokia.Accordion({
			element: '#accordion',
			collapsible: true,
			multiple: false,
			closed: true,
			toggle: function(event, header, content) {
				console.log('Accordion: Toggle', event, header, content, this.element);
			},
			create: function() {
				console.log('Accordion: Start');
			},
			open: function(event, header, content) {
				console.log('Accordion: Open', event, header, content, this.element);
			},
			close: function(event, header, content) {
				console.log('Accordion: Close', event, header, content, this.element);
			}
		});

		var accordion2 = new Nokia.Accordion({
			element: '#accordion2'
		});
		
		/*
		 * Hide splash when its all done.
		*/
		
		Nokia.hideSplash();
		
	};
	
	/*
	 * Show splash while loading components.
	*/
	
	Nokia.showSplash('<span>loading</span>');

	Nokia.use('accordion', init);

</script>

</body>
</html>