Animation Usage Example

<!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>