Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 ④ フォントを変更したい場合は「Font Setting」メニューを、コーナーのラウンドを変更したい場合は「Corner Radius」メニューを使用します。ここでは、背景色、枠線、テキストの色を変更しました。

 ⑤ 編集が終わったら、「Download theme」ボタンをクリックします。「Download Builder」というページに移動しますので、ページ下部にある「Download」ボタンをクリックします。

 作成したテーマは、「jquery-ui-1.10.3.custom.zip」というファイル名でダウンロードされますので、これを適当なフォルダに入れます(ダウンロードファイル名は常に同じなので、複数のテーマを使う場合は適当にリネームしてダウンロードしてください)。

「Download theme」ボタンをクリック
「Download theme」ボタンをクリック
「Download Builder」ページ下部にある「Download」ボタンをクリック
「Download Builder」ページ下部にある「Download」ボタンをクリック

ダウンロードしたテーマを使う

 テーマをダウンロードしたら、解凍してプロジェクトに組み込み、C1ToolTipコントロールに適用します。

 ① プロジェクトを一度閉じ、プロジェクトの中にテーマ用のフォルダを作成します。ここでは、「App_Themes\テーマ1」というフォルダを作成しました。

 ② この中に、ダウンロードしたテーマを解凍して格納します。

プロジェクトの中にテーマ用のフォルダを作成しダウンロードしたテーマを解凍して格納する
プロジェクトの中にテーマ用のフォルダを作成しダウンロードしたテーマを解凍して格納する

 ③ 「CSS」フォルダを開くと、「custom-theme」というフォルダの中に「jquery-ui-1.10.3.custom.css」というファイルが格納されています。このファイル名を、フォルダ名のパス名と共にC1ToolTipコントロールのThemeプロパティに設定します。

 プロジェクトを開き、C1ToolTipコントロールのThemeプロパティに、次のCSSファイル名を設定します。

  • App_Themes\テーマ1\css\custom-theme\jquery-ui-1.10.3.custom.css

 なお、C1ToolTipコントロールのThemeプロパティは、どれか1つ設定するとすべてのC1ToolTipコントロールに適用されます。

ThemeプロパティにCSSファイル名を設定すると、ダウンロードしたテーマが適用される
ThemeプロパティにCSSファイル名を設定すると、ダウンロードしたテーマが適用される

まとめ

 ツールチップは、単に補足情報や操作説明を表示するだけでも十分その役割を果たしますが、カラフルなデザインやアニメーション効果を工夫すると、使って楽しいWebページに仕上げることが可能です。

 C1ToolTipコントロールでは、ツールチップのデザインにCSSやThemeRollerでデザインを変えることができるので、より視覚効果の高いWebページを完成させることが可能です。



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