snapshot
/
GuaranaUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/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">
			body {
				font-size: 14px;
				padding: 15px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

			p {
				margin: 30px 10px;
			}

			#library, #entertainment, #health, #romance {
				width: 330px;
			}
		</style>

	</head>

	<body>

		<h1>Nokia.TransitionList - Sample</h1>

		<br/><br/>

		<div id="library"></div>
		<div id="entertainment"></div>
		<div id="health"></div>
		<div id="romance"></div>
		<div id="professional"></div>
		<div id="politics"></div>

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

			var init = function() {
				
				window.bookStore = new Nokia.TransitionList({
					element: '#library',
					title: 'Book Store',
					visible: true,
					create: function() {
						console.log("create");
					},
					show: function(openerTransitionList) {
						console.log("show", openerTransitionList);
					},
					hide: function() {
						console.log("hide list1.");
					},
					addItem: function(event, item) {
						console.log("addItem", item);
					},
					removeItem: function(event, item) {
						console.log("removeItem", item);
					}
				});

				window.entertainment = new Nokia.TransitionList({
					title: 'Entertainment',
					element: '#entertainment'
				});

				window.health = new Nokia.TransitionList({
					title: 'Health',
					element: '#health'
				});

				window.romance = new Nokia.TransitionList({
					title: 'Romance',
					element: '#romance'
				});

				window.professional = new Nokia.TransitionList({
					title: 'Professional & Technical',
					element: '#professional'
				});

				window.politics = new Nokia.TransitionList({
					title: 'Politics',
					element: '#politics'
				});

				bookStore.addItem(
					new Nokia.TransitionListItem({
						label: 'Entertainment',
						linkedList: window.entertainment,
						click: function() {}
					})
				);

				bookStore.addItem(
					new Nokia.TransitionListItem({
						label: 'Romance',
						linkedList: window.romance,
						click: function() {}
					})
				);

				bookStore.addItem(
					new Nokia.TransitionListItem({
						label: 'Health, Mind & Body',
						linkedList: window.health,
						click: function() {}
					})
				);

				var createLibrarySection = function(transitionList, linkedListMain) {
					transitionList.addItem(
						new Nokia.TransitionListItem({
							label: 'Back to list',
							icon: 'ui-icon-triangle-1-w',
							linkedList: linkedListMain,
							click: function() {}
						})
					);

					transitionList.addItem(
						new Nokia.TransitionListItem({
							label: 'Book 1',
							click: function() {
								alert('Book 1');
							}
						})
					);

					transitionList.addItem(
						new Nokia.TransitionListItem({
							label: 'Book 2',
							click: function() {
								alert('Book 2');
							}
						})
					);

					transitionList.addItem(
						new Nokia.TransitionListItem({
							label: 'Book 3',
							click: function() {
								alert('Book 3');
							}
						})
					);

					transitionList.addItem(
						new Nokia.TransitionListItem({
							label: 'Book 4',
							click: function() {
								alert('Book 4');
							}
						})
					);

					transitionList.addItem(
						new Nokia.TransitionListItem({
							label: 'Book 5',
							click: function() {
								alert('Book 5');
							}
						})
					);
				};

				createLibrarySection(window.entertainment, window.bookStore);
				createLibrarySection(window.health, window.bookStore);
				createLibrarySection(window.romance, window.bookStore);
				createLibrarySection(window.professional, window.bookStore);
				createLibrarySection(window.politics, window.bookStore);
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();

			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('transitionlist', init);

		</script>

	</body>
</html>