DHTMLX Touch documentation

Form Usage Example

<!DOCTYPE html>
<html>
	<head>
		<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
		<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">		
		<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
		<style>
            html,body{
                background-color:#ffffff;
            }
			.tb_sup{
				font-size:10px;
				text-shadow: none;
				font-style:italic;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			var cities = [
				{id:1, value:"London",icon:'images/flags/gb.gif'},
				{id:2, value:"Stockholm",icon:'images/flags/se.gif'},
				{id:3, value:"Berlin",icon:'images/flags/de.gif'},
				{id:4, value:"Moscow",icon:'images/flags/ru.gif'}
			]
 
			function setWithIcon(obj){
				return "<div><div style='float:left'>"+obj.value+"</div><div style='float:right'><img src='"+obj.icon+"'/></div></div>";		
			}
			function setDate(obj){
				return setWithIcon({value:obj.value,icon:'images/calendar.png'});		
			}
 
			dhx.ready(function(){ //exec code only after document loading
 
			var config = {
				container:"groupBox",
				rows:[
					{ 	
						view:"toolbar", 
						type:"MainBar", 
						data:[
							{type:"label", label: "Backpackr <sup class='tb_sup'>mobile</sup>", align:'left'}
						]
					},
					{ 
						view:"tabbar",
						cells:[{
							view:"form",
							id:"tab_flight", 
							data:[
								{ type:"list", name: "from", label: 'from', value: 1, popup:"cities"},
								{ type:"list", name: "to", label: 'to', value: 3, popup:"cities"},
								{ type:"toggle", name: "type", options: ["Return","One way"], values: ["2", "1"]},
								{ type:"calendar", name: "depart", label: 'depart',template:setDate,width:285},
								{ type:"calendar", name: "arrive", label: 'arrive',template:setDate,width:285},
								{ type:"counter", width:200,height:200, name:"pnum", label: '<span class="pass_number">Passengers 12+</span>', step: 1, width: "auto", value: 1, min: 1, max: 20, labelWidth: 140, position: "label-left", labelAlign: "left"},
								{ type:"radio", name:"changes", labelWidth: 98, labelAlign: "left", value:"1", data:[
									{ label:"direct flights", value: "0" },
									{ label:"any flights", value: "1" },
								] }
							]}
						]}
				]};
 
			dhx.ui({
				view:"popup",
				id:"cities",
				body:{
					view:"list", 
					template: setWithIcon,
					data:cities,
					type:{
						width:160
					},
					y_count:4
				}
			}).hide();
 
			//init config
			dhx.ui(config);
		});
		</script>
</head>
	<body>
		<div style="width:320px;height:360px;border:1px solid #969696; margin:50px;">
			<div id="groupBox" style='width:100%; height:100%;'>
			</div>
		</div>
	</body>
</html>