multiviewExample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title>Multiview</title> <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> .tb_sup{ font-size:10px; text-shadow: none; font-style:italic; } </style> <script> dhx.ready(function(){ var config={// we declare all the front-end components in the variable and then we just put it into view object container:"groupBox", rows:[// specifies layout { view:"toolbar", // in the first row we create toolbar that contains just a label type:"MainBar", // data:[// specifies toolbar's label {type:"label", label: "Backpackr <sup class='tb_sup'>mobile</sup>", align:'left'}, ] }, { // in the second row we also specify toolbar but now it will contain control 'tabbar' which we will use as a changer view:"toolbar", id:"TopToolbar", data:[// here we specify toolbar control 'tabbar' { type:"tabbar", id:'tabbar', selected: 'tab_video', tabWidth:102, tabs: [ { label: 'Games', src: 'images/tabbar/games.png', key: 'tab_games'}, { label: 'Video', src: 'images/tabbar/video.png', key: 'tab_video'}, { label: 'Music', src: 'images/tabbar/music.png', key: 'tab_music'}, ]}, ]}, { gravity:2, // dimensional parameter view:"multiview", // specifies multiview component cells:[{ view:"list", id:"tab_games", url:"xml/games.xml", datatype:"xml", //specifies content of each tab template:"#name#(#year#)", select:true, type: { width: 300 } }, { view:"list", id:"tab_video", url:"xml/video.xml", datatype:"xml", template:"#name#(#year#)", select:true, type: { width: 300 } }, { view:"list", id:"tab_music", url:"xml/music.xml", datatype:"xml", template:"#name#(#author#)", select:true, type: { width: 300 } }] } ] } dhx.ui(config);// we put the variable with components declaration into the view $$("tab_video").show(); // specifies which tab will be showed initially $$("TopToolbar").attachEvent("onBeforeTabClick",function(button,id){ //t's a function which allows us to change tabs over $$(id).show(); return true }) }); </script> <body> <div style="width:320px;height:340px;border:1px solid #969696; margin:50px;"> <div id="groupBox" style='width:100%; height:100%;'> </div> </div> </body> </html>
music.xml
<?xml version="1.0" encoding="UTF-8"?> <data> <item id="1"> <name>Let It Be</name> <author> Beatles </author> <year> 1970 </year> </item> <item id="2"> <name>What's Going On</name> <author> Marvin Gaye </author> <year> 1971 </year> </item> <item id="3"> <name>Hotel California</name> <author> Eagles </author> <year>1976</year> </item> <item id="4"> <name>Oh, Pretty Woman</name> <author> Roy Orbison </author> <year>1964</year> </item> <item id="5"> <name>Yesterday</name> <author> Beatles </author> <year>1965</year> </item> <item id="6"> <name>Wish You Were Here</name> <author> Pink Floyd </author> <year>1975</year> </item> </data>