ДОСТУПНА НОВАЯ ВЕРСИЯ! Webix 11 Подробнее Обновления в Core, SpreadSheet, File Manager и Report Manager и многое другое

WEBIX JAVASCRIPT LIBRARY BLOG

Новости, релизы, помощь и советы по разработке web UI, новейшие тенденции и know-how практики по JavaScript программированию. Создавайте web интерфейсы быстрее и качественнее.

Подписывайтесь:

Пишите для нас: guest posts guidelines.

Редактор кода Ace для Webix UI

Ace — это удобный JavaScript редактор кода. Он сочетает в себе функции и возможности таких популярных редакторов, как Sublime, Vim и TextMate. Cloud9 IDE использует Ace в качестве основного редактора. Кроме того, Ace является преемником проекта Mozilla Skywriter (Bespin).

Теперь Ace можно использовать с Webix.

Использование Webix с редактором кода Ace

Анимация в Webix UI

Библиотека Webix предлагает множество вариантов создания пользовательского интерфейса, при этом анимация используется минимально. Мы запросто можем это исправить. Давайте посмотрим, как можно добавить симпатичные анимационные эффекты для различных контролов Webix.

Carousel, MultiView, TabView

TabView — это один из тех двух компонентов библиотеки, которые имеют встроенную анимацию. Когда вы переключаетесь между табами, смена активного таба происходит с анимацией. Для ее настройки вы можете использовать свойство animate.

Code of demo

Использование сторонних библиотек с Webix

Библиотека Webix предлагает множество готовых виджетов. Но даже это разнообразие меркнет перед обилием различных библиотек, созданных Open Source сообществом. В этой статье я расскажу, как любую стороннюю библиотеку можно превратить в Webix виджет.

Konva.js

В качестве примера я буду использовать Javascript библиотеку Konva.

Чекбоксы в DataTable. Малоизвестные техники

Возможно, вы уже знаете, что внутри контрола DataTable могут быть не только текстовые данные, но и чекбоксы. Они используются как для отображения состояния данных, так и для редактирования.

Основные чекбоксы

Минимальный код для инициализации DataTable с чекбоксами выглядит следующим образом:

webix.ui({
  view:"datatable",
  columns:[
    { id:"status", header:"Is Active", width:80, css:"center",
        template:"{common.checkbox()}"},
    { id:"value", header:"Records", fillspace:1 },
  ],
  data: [
    { status:0, value:"Record A"},
    { status:1, value:"Record B"},
    { status:0, value:"Record C"}
  ]
});

Результатом работы данного кода является симпатичный JavaScript grid, представленный на картинке ниже. Строка “{common.checkbox()}” в темплейте преобразуется в чекбокс контрол.

Basic Webix Checkboxes

 

Демо

File Manager — новый виджет для управления файлами

В настоящее время, в связи с широким использованием веб-приложений, потребность в виджетах, которые позволяют работать с иерархическими данными, стала первоочередной. Веб файл-менеджер — это отличное решение для управления данными такого типа в современном веб-браузере.

Сегодня мы рады представить вам новый Webix виджет, созданный для удобной организации ваших данных в интернете — File Manager. Это JavaScript и HTML5 компонент, который позволяет управлять иерархическими данными, а именно файлами и папками, в вашем приложении.

Webix File Manager виджет

1 2 3 4