See also general rules of markup initialization that are described in separate article.
Initialization from HTML is a nice feature for those who work in HTML mainly. By the way, a similar technology is used within JQuery Mobile framework.
Below the peculiarities of initialization for different Webix components are listed.
HTML Toolbar, List and Form
<body>
<div data-view="rows">
<div>
My header
</div>
<div data-view="toolbar" data-role="elements">
<div data-view="button" data-width="150">Button</div>
Press the button to run App
</div>
<div data-view="cols">
<div data-view="list" data-url="data/data.json" data-select="true">
Package: #Package# (#Version#)
</div>
<div data-view="list" data-width="320">
#id#: #value#
<ul data-role="datasource">
<li id="9998">Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div>
My footer
</div>
</div>
</body>
Related sample: HTML initialization
If window are inited from the markup, it should be set on the same level as other layout components.
<div data-view="rows">
<!--layout config>-->
</div>
<div data-view="window" data-id="win1">
<div data-view="head">Test header</div>
<div data-view="body">
<div data-view="template">Cell 1.2</div>
</div>
</div>
In addition, window show function should be called as it won't appear by itself:
webix.markup.init();
$$("win1").show({ x:100, y:100});
Related sample: HTML initialization : Window
If menu is initialized from markup it's vital to remember that its submenus are popups in essence. So they should be as well inited like windows:
<div data-view="submenu" data-id="submenu1">
<ul data-view="data">
<li data-id="1.1" data-submenu="submenu3">Item 1.1</li>
<li data-id="1.2">Item 1.2</li>
</ul>
</div>
And then they should be included into the main menu (or other submenus) with the help of their submenu property (submenu ID should be specified):
<div data-view="menu" data-height="50">
<ul data-view="data">
<div data-view="menu">
<ul data-view="data">
<li data-id="1" data-submenu="submenu1">Item 1</li>
<li data-id="2" data-submenu="submenu2">Item 2</li>
</ul>
</div>
<li data-id="3">Item 3</li>
</ul>
</div>
Any level of nesting is possible.
Related sample: HTML initialization::Menu
Back to top