webix-hub/webix-jquery

Using Webix with jQuery

jQuery adapter for Webix UI

Before Webix 4.3 this module was part of webix.js.

Making preparations

JQuery is included by a link specified in your document's head section:

<script src="../path/library_name.js" type="text/javascript" charset="utf-8"></script>

Component initialization

$('#div ID/ .CSS selector').webix_component({config});

Let it be list:

<div id="listA"></div>
  ...
$("#listA").webix_list({
	width:320, height:600,
	template:"#votes# #rank# #title#",
	data:big_film_set
});

Related sample: JQuery List

Working with Components

You can get to any component using the same scheme and apply functions to it.

$('#div ID/ .CSS selector').webix_component().count() 

Advantages of JQuery Integration

1 . An HTML container for any component can be specified by its ID or CSS class used with it. With the webix library means HTML container can be defined by its ID only:

<div class='calendar_here'></div>
<div id='list_here'></div>
...
$("#listA").webix_calendar({config}); // div ID
$(".calendar_here").webix_calendar(); //CSS selector

2 . If you use the same CSS class for several nodes, you can create multiple instances of the same view by pointing to this CSS class during component initialization.

<div class='calendar_here'></div>
<div class='calendar_here'></div>
...
$(".calendar_here").webix_calendar();

Related sample: JQuery Calendar

3 . An HTML table can be a data source for the component initialized in the same container. Each column in the table is reflected as a template item for the component:

<tr>
	<td>1</td>
	<td>Record #102</td>
	<td>5406</td>
</tr>

Columns in template are called ##data## and are numbered starting from 0.

{
	template:"<div class='mark'>#data2# </div> #data0#. #data1#",
	...
}

Related sample: JQuery List from HTML table