Concerning animation, we can single out 3 components:
Carousel and grouplist have built-in default animation which you can't change. multiview also has some default staff but unlike two first components the default value can be changed.
So, this article we'll devote to multiview animation and its manipulation.
multiview has 2 main animation types:
To set the desired type - use the following:
$$('multiview_id').config.animate.type = 'flip';
to set the desired subtype:
$$('multiview_id').config.animate.subtype = 'horizontal';
We'll take an example which lets to show all animation variations.
Our actions:
Step 1. Firstly, we need to define interface.
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"}] }] }, });
Step 2. Now, we have to match available types with subtypes, i.e. when you click the desired type the appropriate subtypes should appear.
We'll implement this through toolbar redefining
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){// fires when multiview's tab is changed 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 });
Step 3. Our next step in changing multiview views.
$$("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 });