<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"> <style type="text/css" media="screen"> .content{ width:100%;height:100%;background-color:#565656; } </style> <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> </head> <body> <script type="text/javascript" charset="utf-8"> function img(obj){ return '<div class="content"><img src="'+obj.src+'" width="462px" height="275px" border="0" style="margin:8px 8px 15px 8px" ondragstart="return false"/></div>' } dhx.ui({ view:"window", //defines window width:480, body:{ // the body content consists of multiview with images and toolbar with a control for changing these images rows:[{ view:"multiview", id:"MainTab", height:292, cells:[{ template:img, data:{src:"img1.jpg"}, id:"area1" }, { template:img, data:{src:"img2.jpg"}, id:"area2" }] }, { view:"toolbar", id:"BottomBar", type:"SubBar", data:[ { type:"segmented", align:"center", selected: "area1", segment: [ { label: 'Area 1', key: 'area1'}, { label: 'Area 2', key: 'area2'}] }] } ]}, head:{ //the header of the window contains controls for type and subtype selections view:"toolbar", type:"MainBar", id:"HeadBar", data:[ //control for type selection { align:"center", type:"segmented", id:"animation_type_btn", segment:[{key:"slide", label:"Slide" }, {key:"flip", label:"Flip"}] }, // control for subtype selection { align:"center", type:"segmented", id:"animation_subtype_btn",segment:[{key:"together", label:"Together"},// we fill 'segment' with initial data. Then, the appropriate control's buttons will be assigned in concordance with 'option' variable (see step 2) {key:"in", label:"In"}, {key:"out", label:"Out"}] }] } }); var options = {// contains animation type variations. slide: [ {key:"together", label:"Together"}, {key:"in", label:"In"}, {key:"out", label:"Out"} ], flip: [ {key:"horizontal", label:"Horizontal"}, {key:"vertical", label:"Vertical"} ] }; $$('HeadBar').attachEvent("onAfterTabClick",function(id, key){ if (id != "animation_type_btn") return;// exits the function if we didn't change the type var subtype_btn = $$("HeadBar").item("animation_subtype_btn");// gets a value of the currently selected subtype subtype_btn.segment = options[key]; // assigns the appropriate subtypes to 'segment' parameter subtype_btn.selected = options[key][0][key];// makes the chosen subtype selected $$("HeadBar").refresh("animation_subtype_btn");// redefines the top toolbar }); $$("BottomBar").attachEvent("onBeforeTabClick",function(button,id){ $$('MainTab').config.animate.type = $$("HeadBar").item('animation_type_btn').selected;// applies the specified animation type $$('MainTab').config.animate.subtype = $$("HeadBar").item('animation_subtype_btn').selected;// applies the specified animation subtype $$(id).show();// shows the appropriate view return true }); </script> </body> </html>