アニメーション効果
次のプロパティを使って、ツールチップの表示・非表示にアニメーション効果を設定できます。設定値はEasing列挙体のメンバです。
| プロパティ | 説明 |
|---|---|
| Animation |
ツールチップを表示または非表示にするアニメーションを定義します。 showAnimation／hideAnimationが指定されていない場合、このプロパティが機能します。 |
| HideAnimation | ツールチップを非表示にするアニメーションを定義します。 |
| ShowAnimation | ツールチップを表示するアニメーションを定義します。 |
| CalloutAnimation | ツールチップ位置を移動するアニメーションを定義します。 |
| メンバ名 | 値 |
|---|---|
| EaseOutElastic | 1 |
| EaseInElastic | 2 |
| EaseInOutElastic | 3 |
| EaseOutBounce | 4 |
| EaseInBounce | 5 |
| EaseInOutBounce | 6 |
| EaseOutExpo | 7 |
| EaseInExpo | 8 |
| EaseInOutExpo | 9 |
| EaseOutQuad | 10 |
| EaseInQuad | 11 |
| EaseInOutQuad | 12 |
| EaseOutSine | 13 |
| EaseInSine | 14 |
| EaseInOutSine | 15 |
| EaseOutCirc | 16 |
| EaseInCirc | 17 |
| EaseInOutCirc | 18 |
| EaseOutCubic | 19 |
| EaseInCubic | 20 |
| EaseInOutCubic | 21 |
| EaseOutQuint | 22 |
| EaseInQuint | 23 |
| EaseInOutQuint | 24 |
| EaseOutBack | 25 |
| EaseInBack | 26 |
| EaseInOutBack | 27 |
| EaseOutQuart | 28 |
| EaseInQuart | 29 |
| EaseInOutQuart | 30 |
| EaseLinear | 31 |
組み込みテーマ
ツールチップのデザイン用に、Arctic、Aristo、Cobalt、Midnight、Rocket、Sterling、Metro、Metro Grayの8種類の組み込みテーマを使用できます。
これらのテーマは、C1ToolTipコントロールのThemeプロパティにあるリストから選択することができます。
CSSとThemeRollerによるデザイン
組み込みテーマ以外に、独自にCSSを使ってツールチップをデザインすることができます。
また、ThemeRollerからテーマをダウンロードして、このデザインをC1ToolTipコントロールに適用させることが可能です。
ThemeRollerは、独自のjQuery UIテーマを作成して、Webアプリケーションのコントロールのスキンを生成するWebアプリケーションです。その簡単なインターフェースとWYSIWYGプレビューにより、グラフィックエディタを開くためにかかる時間よりも短時間に、すべてのWijmoコントロールおよびその他のThemeRoller互換コントロールのスキンを生成できます。
1から作成することもできますし、Galleryと呼ばれるテンプレートを選んで使うこともできます。
また、選んだテンプレートをさらに編集して使うこともできます。独自のエディターを装備しているので、インタラクティブにデザインできます。
独自にCSSを作成する場合は、以下のCSSセレクタで指定します。
| CSSセレクタ | 説明 |
|---|---|
| wijmo-wijtooltip | このスタイルをC1ToolTipコントロールに適用します。 |
| wijmo-wijtooltip-arrow-bc | このスタイルをC1ToolTipのBottomCornerの矢印に適用します。 |
| wijmo-wijtooltip-arrow-bl | このスタイルをC1ToolTipのBottomLeftの矢印に適用します。 |
| wijmo-wijtooltip-arrow-lb | このスタイルをC1ToolTipのLowerBottomの矢印に適用します。 |
| wijmo-wijtooltip-arrow-lc | このスタイルをC1ToolTipのLowerCornerの矢印に適用します。 |
| wijmo-wijtooltip-arrow-rb | このスタイルをC1ToolTipのRightBottomの矢印に適用します。 |
| wijmo-wijtooltip-arrow-rc | このスタイルをC1ToolTipのRightCornerの矢印に適用します。 |
| wijmo-wijtooltip-arrow-rt | このスタイルをC1ToolTipのRightTopの矢印に適用します。 |
| wijmo-wijtooltip-arrow-tl | このスタイルをC1ToolTipのTopLeftの矢印に適用します。 |
| wijmo-wijtooltip-arrow-tc | このスタイルをC1ToolTipのTopCornerの矢印に適用します。 |
| wijmo-wijtooltip-close | このスタイルを閉じたC1ToolTipに適用します。 |
| wijmo-wijtooltip-container | このスタイルをC1ToolTipのコンテナに適用します。 |
| wijmo-wijtooltip-pointer | このスタイルをC1ToolTipのポインタに適用します。 |
| wijmo-wijtooltip-pointer-inner | このスタイルをC1ToolTipの内側のポインタに適用します。 |
| wijmo-wijtooltip-title | このスタイルをC1ToolTipのタイトルに適用します。 |
独自のCSSも、ThemeRollerで作成したCSSも、いずれもCSSファイルをプロジェクトに保存し、ThemeプロパティにそのCSSファイルへのパスを設定すれば、C1ToolTipコントロールに適用されます。
