Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

カラフルなツールチップを持つASP.NETアプリケーションの作成

C1ToolTipコントロールを使ったWebアプリケーションの作成 その2

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/05/17 14:00
目次

アニメーション効果

 次のプロパティを使って、ツールチップの表示・非表示にアニメーション効果を設定できます。設定値はEasing列挙体のメンバです。

プロパティ 説明
Animation ツールチップを表示または非表示にするアニメーションを定義します。
showAnimation/hideAnimationが指定されていない場合、このプロパティが機能します。
HideAnimation ツールチップを非表示にするアニメーションを定義します。
ShowAnimation ツールチップを表示するアニメーションを定義します。
CalloutAnimation ツールチップ位置を移動するアニメーションを定義します。
Easing列挙体のメンバ
メンバ名
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コントロールに適用されます。

ThemeRollerで選んだテンプレートをさらに編集して使うこともできる
ThemeRollerで選んだテンプレートをさらに編集して使うこともできる

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5