Intermediate

Интеграция с JQuery

Вы можете использовать Webix вместе с библиотекой JQuery.

Ресурсы для интеграции Webix и JQuery не входят в стандартный пакет библиотеки. Вы можете найти их в этом GitHub репозитории.

Чтобы использовать JQuery, вам необходимо сначала подключить его ресурсы в секции <head>...</head> вашего документа:

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

Используя JQuery, вы можете создавать любые Webix компоненты. Синтаксис немного отличается, но такая интеграция предоставляет вам новые возможности.

Инициализация компонента

Вы можете создать гибридный компонент следующим образом:

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

Для примера, давайте создадим компонент list:

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

Related sample: JQuery List

Работа с компонентами

Вы можете получить доступ к любому компоненту и применить к нему любую функцию.

Подсчитываем количество элементов

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

Преимущества интеграции с JQuery

Вы можете указать HTML контейнер для любого компонента используя ID или CSS класс этого контейнера. При работе с Webix, вы можете использовать только ID:

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

Используя одинаковые CSS классы для нескольких HTML элементов, вы можете создать несколько экземпляров одного компонента. Для этого вам нужно указать соответствующий класс при инициализации компонента.

Создаем два одинаковых календаря

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

Related sample: JQuery Calendar

3 . Вы можете использовать данные обычной HTML таблицы в компоненте данных библиотеки. Для этого нужно указать селектор таблицы при инициализации компонента.

Один ряд таблицы с тремя столбцами

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

Данные столбца доступны через #data#, а их индексация начинается с 0.

Используем данные таблицы в шаблоне List

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

Related sample: JQuery List from HTML table

Наверх