You have possibility to define borders that will edge the components or decline the borders at all.
The type of the border is specified by the attribute DHTMLX_SKIN. Put it into <head> tag:
<head> <script type="text/javascript" charset="utf-8"> DHTMLX_SKIN = "debug"; // specifies a type of the border </script> <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>
There are 2 border types:
All touch variations have layout-level controlling and specially developed to let you perform smooth components transition.
debug | touch | ||
---|---|---|---|
wide | head | clean | |
![]() | ![]() | ![]() | ![]() |
You can specify an individual border for a element, regardless of its nesting, in the range of the selected mode.
As 'debug' mode doesn't have any variants, the feature is applicable just for 'touch' mode.
To set border - use the parameter - type (e.g. type:“wide”)
Please note, borders are the layout feature, i.e. borders can be applied just for layout and its inheritors (specify them before layout blocks: 'cols' or 'rows').
dhx.ui({ container:"box", type:"clean", rows:[{ view:"toolbar", id:"topbar"}, {type:"head", cols:[{ rows:[{ width: 90, template:"I panel"}] }, {type:"wide", rows:[{ width: 90, template:"II panel"}, {type:"head", cols:[{ width: 90, template:"III panel"}, {type:"wide", rows:[{ width: 90, template:"IV panel"}, {width: 90, template:"V panel"}, {width: 90, template:"VI panel" } ]}, {type: "clean", rows:[{width: 90, template:"VII panel" }, {width: 90, template:"VIII panel"} ]} ]} ]} ]} ]} )