snapshot
/
GuaranaUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../themes/nokia/base/base.css" type="text/css" media="screen">
		<link rel="stylesheet" href="../themes/nokia/base/button.css" type="text/css" media="screen">
		<link rel="stylesheet" href="../themes/nokia/base/optiongroup.css" type="text/css" media="screen">
		<link rel="stylesheet" href="../themes/nokia/base/checkbox.css" type="text/css" media="screen">
		
		<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;
			}

			#optiongroup {
				clear: both;
			}
			
			#container {
				max-width: 640px;
				padding: 10px;
			}
			
			/*
			 * Custom CSS
			 */
			
			/* State Default */
			.nokia-button .ui-state-default, .nokia-optiongroup .ui-state-default {
				background: blue;
				color: white;
			}
			
			.nokia-button .nokia-border-state-default b, .nokia-optiongroup .nokia-border-state-default b {
				background: blue;
			}
			
			/* State Active */
			.nokia-button .ui-state-active, .nokia-optiongroup .ui-state-active {
				background: red;
			}
			
			.nokia-button .nokia-border-state-active b, .nokia-optiongroup .nokia-border-state-active b {
				background: red;
			}
			
			/* State Hover */
			.nokia-button .ui-state-hover {
				background: green;
			}
			
			.nokia-button .nokia-border-state-hover b {
				background: green;
			}
			
			/* State Disabled */
			.nokia-button .ui-state-disabled {
				opacity: .35;
				filter:Alpha(Opacity=35);
				background-image: none;
			}
			
			.nokia-button .nokia-border-state-disabled b {
				opacity: .35;
				filter:Alpha(Opacity=35);
				background-image: none;
			}
			
			/* State HighLight */
			.nokia-button .ui-state-highlight {
				background: yellow;
				color: black;
			}
			
			.nokia-button .nokia-border-state-highlight b {
				background: yellow;
			}
			
		</style>

	</head>

	<body>
		
		<div id="container">

			<span id="button01" class="btn"></span>
	
			<span id="button02" class="btn"></span>
	
			<span id="button03" class="btn"></span>
			
			<span id="button04" class="btn"></span>
			
			<div id="optiongroup"></div>

			<input type="checkbox" name="check1" value="" id="check1" />
		
		</div>
		
		<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../src/core.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/dom.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/widget.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../src/button.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/optionbox.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/checkbox.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/optiongroup.js" type="text/javascript" charset="utf-8"></script>

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

			window.onload = function() {

				// creating a new instance of Nokia.SampleWidget that inherits from Nokia.Widget
				var btn1 = new Nokia.Button({
					element: '#button01',
					disabled: false,
					keeppressed: false,
					label: 'Button 01'
				});

				var btn2 = new Nokia.Button({
					element: '#button02',
					disabled: true,
					label: 'Disabled'
				});

				var btn3 = new Nokia.Button({
					element: '#button03',
					disabled: false,
					keeppressed: true,
					label: 'Button 03',
					pressed: true,
					width: 90,
					press: function() {
						this.setLabel('Pressed');
						btn1.disable();
						btn1.setLabel('Disabled');
					},
					unpress: function() {
						this.setLabel('Unpressed');
						btn1.enable();
						btn1.setLabel('Enabled');
					}
				});
				
				var btn4 = new Nokia.Button({
					element: '#button04',
					disabled: false,
					label: 'Unfocused',
					width: 90,
					focus: function() {
						this.setLabel('Focused');
					},
					unfocus: function() {
						this.setLabel('Unfocused');
					}
				});
				
				var check1 = new Nokia.CheckBox({
					element: '#check1',
					label: 'testing checkbox 1',
					wrapper: 'div'
				});
				
				var optionGroup = new Nokia.OptionGroup({
					element: '#optiongroup',
					title: 'Option Group'
				});
		
				optionGroup.addItem(check1);
			};

		</script>

	</body>
</html>