<!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(){ //executes 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:"multiview", cells:[{ view:"form", id:"tab_flight", data:[ { type:"list", id: "from", label: 'from', value: 1, popup:"cities"}, { type:"list", id: "to", label: 'to', value: 3, popup:"cities"}, { type:"toggle", id: "type", options: ["Return","One way"], values: ["2", "1"]}, { type:"calendar", id: "depart", label: 'depart',template:setDate,width:285}, { type:"calendar", id: "arrive", label: 'arrive',template:setDate,width:285}, { type:"counter", width:200,height:200, id:"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", id:"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>