Webix 1.3 增加了新的皮肤和 HTML5 视频元素,同时更新了图表部件

  • Anand Narayanaswamy
  • 孙镜涛

2013 年 12 月 16 日

话题:HTML5语言 & 开发

Webix 1.3已经发布,新版本增加了新的皮肤和 UI 元素,同时还做了一些改进。它包含的皮肤有:air、compact、clouds、glamour、light、metro、terrace 和 web,你能够通过它们修改应用程序的用户界面,让应用程序看起来或者非常柔和、或者非常亮丽。

你能够容易地将皮肤集成到自己的应用程序中,因为所有与皮肤相关的 CSS 文件都存放在包的 codebase/skins 文件夹中。如果你想应用 Air 皮肤那么可以使用下面的代码:

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

相似地,给应用程序应用 Clouds 皮肤的代码会是这样:

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

Webix 官方文档详细地介绍了所有这些新皮肤的使用。Webix 1.3 还包含一个新的支持 MP4、WebM 和 Ogg 的HTML5 视频元素,你能够通过它构建多媒体应用。它的使用方式如下所示:

webix.ui({
    view:"video",
    id:"video1", 
    container:"video_div"
    src: ["data/movie.ogv","data/movie.mp4"]
}); 

最新版本还改进了 Carousel,提供各种导航类型并且改善了可用性。设计该控件的主要目的是为了能够在一个视图中呈现多个组件,同时可以通过单击专用按钮或者通过触摸设备上的滑动在这些组件之间切换。使用 Carousel 的代码可能会是这样:

webix.ui({
    view:"carousel",
    id:"carousel",
    cols:[
        { view:"template" },
        { view:"chart" },
        { view:"datatable" },
        { rows:[...]} //layout
    ]
});

在 Webix 1.3 中图表(Charts)部件已经被更新为使用对数刻度,这提高了数据展现的机会。

查看英文原文Webix 1.3 Adds New Skins, HTML5 Video Element and Updated Charts Widget

HTML5语言 & 开发