BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Webix 1.3リリース - 新しいスキンとHTML5ビデオを追加,チャートウィジェットをアップデート

Webix 1.3リリース - 新しいスキンとHTML5ビデオを追加,チャートウィジェットをアップデート

原文(投稿日:2013/12/14)へのリンク

Webix 1.3が新しいスキンとUI要素,いくつかの改良を加えてリリースされた。エア,コンパクト,雲,魅惑(glamour), ライト,テラス, Webなどのスキンを使って,アプリケーションのユーザインターフェースをソフトにしたり,あるいは非常に明るくするような変更が可能だ。

スキンに関連するCSSファイルは,パッケージのcodebase/skinsフォルダに配置されているので,アプリケーションにも簡単にスキンを組み込むことができる。“エア”スキンを適用するには,次のようなコードを使えばよい。

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


同じように,”クラウド”スキンを使うアプリケーションは次のようになる。

<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 video要素が追加され,マルチメディアベースのアプリ開発が可能になった。以下のように使用する。

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
    ]
});

Chartウィジェットもアップデートされた。対数スケールが使用可能になり,データ表現の選択肢が拡大されている。

この記事に星をつける

おすすめ度
スタイル

BT