Wijmo UI for the Web
ウィジェットとオプションディレクティブ

全て展開全て展開
すべて折りたたむすべて折りたたむ
ここでは、AngularJS とともに使用するすべての Wijmo ウィジェットおよびオプションに適用可能な、いくつかの概念について説明します。

ウィジェットの作成

個々のウィジェットには、接頭辞「wij-」で始まる 1 つのディレクティブがあります。このディレクティブは、通常ウィジェットを作成する場合のように、HTML 要素と jQuery スクリプトを組み合わせて使用する代わりに、HTML 要素と同様に使用します。それぞれのウィジェット名は、wij 接頭辞とウィジェット名をダッシュ(-)でつなげたものです。たとえば、wij-gridwij-barchartwij-radialgauge などのウィジェット名があります。次に、Calendar ウィジェットの作成に使用するマークアップの例を示します。

マークアップ
コードのコピー
<wij-calendar></wij-calendar>

 オプションの設定

各オプション名は、キャメルケース表記による単語間をダッシュでつなげて表記します。たとえば、seriesListseries-list に、maskFormatmask-formatとなります。

子オプションの場合は、要素をネストできます。単純なオプションであれば、メイン要素の属性として使用できます。以下に、いくつかの例を示します。

スクリプトバージョン
コードのコピー
$("#calendar1").wijcalendar(
    {
        easing: "easeOutExpo"
    }
);

Angular マークアップ
コードのコピー
<wij-calendar easing="easeOutExpo"></wij-calendar>
スクリプトバージョン
コードのコピー
axis:{
    x:{text:"Auto Makers"},
    y:{text:"Percent Increase in Sales", annoFormatString:"p0"}
}

Angular マークアップ
コードのコピー
<axis>
    <x text="Auto Makers"></x> 
    <y text="Percent Increase in Sales" anno-format-string="p0"></y> 
</axis>

関連トピック

 

 


Copyright © GrapeCity inc. All rights reserved.