ThemeRollerを使ったツールチップのデザイン
作成したツールチップは、デフォルトのテーマを使ってデザインしました。今度は、ツールチップをカスタムデザインに変更します。
CSSを1から書いても良いのですが、せっかくThemeRollerが使用できるので、これを使ったツールチップのデザイン方法を採用してみます。
ThemeRollerの概要
ThemeRollerは、独自のjQuery UIテーマを作成して、Webアプリケーションのコントロールのスキンを生成するWebアプリケーションです。適用できるコントロールはjQueryによって作成されたコントロールで、「ComponentOne Studio for ASP.NET Wijmo 2012J」のコントロールすべてに適用できます。
ThemeRollerでは、簡単なインターフェースとWYSIWYGプレビューにより、グラフィックエディタを開くためにかかる時間よりも短時間に、すべてのWijmoコントロールおよびその他のThemeRoller互換コントロールのスキンを生成できます。
ThemeRollerページには、「Roll Your Own」という一つ一つの項目をデザインするページと、「Gallery」というテンプレート群を持ったページに分かれます。
どちらもGUIのエディタ機能を持ち、フォントや色を自由に変更できます。
変更結果はすぐに右のサンプルに反映され、サンプルはコントロールごとに表示されますので、デザイン結果を確認することができます。
ThemeRollerからテーマをダウンロードする
では、さっそくThemeRollerを使ってみましょう。今回は、「Gallery」からテンプレートを1つ選んで、それを編集してC1ToolTipコントロールに適用してみます。
① http://jqueryui.com/themeroller/ にアクセスします。
② 「Gallery」タブをクリックして、テンプレート「Sunny」をクリックします。サンプルコントロールがこのテーマに切り替わります。このままのデザインで良ければ「Download」ボタンをクリックしてダウンロードします。細部を修正したければ、「Edit」ボタンをクリックします。
③ 今回は、少し編集しますので、「Edit」ボタンをクリックします。タブが「Gallery」から「Roll Your Own」に切り替わり、編集可能な状態になります。ツールチップの設定は「Contents」になるので、このメニューを展開します。
背景色は「Background color & texture」、枠線は「Border」、文字列は「Text」のそれぞれ色コードをクリックするとカラーピッカーが表示されますので色を選択します。色を選択すると、すぐにサンプルコントロールに反映されます。
