Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

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のエディタと編集結果を表示するサンプル
ツールチップも確認できる
ツールチップも確認できる

ThemeRollerからテーマをダウンロードする

 では、さっそくThemeRollerを使ってみましょう。今回は、「Gallery」からテンプレートを1つ選んで、それを編集してC1ToolTipコントロールに適用してみます。

 ① http://jqueryui.com/themeroller/ にアクセスします。

 ② 「Gallery」タブをクリックして、テンプレート「Sunny」をクリックします。サンプルコントロールがこのテーマに切り替わります。このままのデザインで良ければ「Download」ボタンをクリックしてダウンロードします。細部を修正したければ、「Edit」ボタンをクリックします。

ThemeRollerの「Gallery」ページ
ThemeRollerの「Gallery」ページ

 ③ 今回は、少し編集しますので、「Edit」ボタンをクリックします。タブが「Gallery」から「Roll Your Own」に切り替わり、編集可能な状態になります。ツールチップの設定は「Contents」になるので、このメニューを展開します。

 背景色は「Background color & texture」、枠線は「Border」、文字列は「Text」のそれぞれ色コードをクリックするとカラーピッカーが表示されますので色を選択します。色を選択すると、すぐにサンプルコントロールに反映されます。

カラーピッカーで色を選択する
カラーピッカーで色を選択する

  • ブックマーク
  • 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