Your opinion matters! Please fill in the InfoQ Survey!

Webix 1.3 Adds New Skins, HTML5 Video Element and Updated Charts Widget

| by Anand Narayanaswamy  Followers on Dec 14, 2013. Estimated reading time: 1 minute |

A note to our readers: As per your request we have developed a set of features that allow you to reduce the noise, while not losing sight of anything that is important. Get email and web notifications by choosing the topics you are interested in.

Webix 1.3 has been released with the addition of new skins, UI elements and several improvements. It includes skins such as air, compact, clouds, glamour, light, metro, terrace and web which enables you to modify the user interface of applications so that it looks either soft or very bright.

You can easily integrate the skins into your application since all the related CSS files for skins reside in the codebase/skins folder of the package. In order to apply Air skin the following code should be used.

<script src="../codebase/webix.js"></script>  
<link href="../codebase/webix.css" rel="stylesheet" type="text/css">

Similarly, the application of Clouds skin will look like

<script src="../codebase/webix.js"></script>
<link href="../codebase/skins/clouds.css" rel="stylesheet" type="text/css">

The Webix official documentation examines the usage of all the new skins in detail. Webix 1.3 includes a new HTML5 video element with support for MP4, WebM and Ogg that enables you to build multimedia based apps and the usage will look like as shown below

    src: ["data/movie.ogv","data/movie.mp4"]

The latest release also provides improved Carousel which provides various navigation types and improved usability. It is primiarily designed to present components in one view with the ability to switch between them by clicking on the dedicated buttons or sliding on touch devices. The usage of carousel looks like as shown below

        { view:"template" },
        { view:"chart" },
        { view:"datatable" },
        { rows:[...]} //layout

Webix 1.3 also includes Charts widget that has been updated to use a logarithmic scale which enhances the opportunities for data representation.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you