<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <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> .tb_sup{ font-size:10px; text-shadow: none; font-style:italic; } </style> <body> <div style="width:320px;height:130px;border:1px solid #969696; margin:50px;"> <div id="groupBox" style='width:100%; height:100%;'> </div> </div> <script> dhx.ready(function(){ // dhx.ready () is analogous to 'onDocumentReady ' event - occurs when the document has been completely parsed. The callback function will be invoked even if it was written after the document has been loaded. dhx.ui({ container:"groupBox", rows:[ { view:"toolbar", type:"BigTabBar", id:"topbar", data:[ { type:"tabbar", id:'tabbar', selected: 'tab_2', unit_width:102, tabs: [ { label: 'MONDAY', key: 'tab_1'}, { label: 'TUESDAY', key: 'tab_2'}, { label: 'WEDNESDAY', key: 'tab_3'}, ]} ]}, { gravity:2, view:"tabbar", cells:[{ template:"Monday", id:"tab_1"}, { template:"Tuesday", id:"tab_2"}, { template:"Wednesday", id:"tab_3"} ]} ]}); $$("tab_2").show(); $$("topbar").attachEvent("onBeforeTabClick",function(button,id){ $$(id).show(); return true }) }); </script> </body> </html>