BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Anand Narayanaswamy 关注 0 他的粉丝 ,译者 孙镜涛 关注 2 他的粉丝 发布于 2013年12月17日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT