SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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」のそれぞれ色コードをクリックするとカラーピッカーが表示されますので色を選択します。色を選択すると、すぐにサンプルコントロールに反映されます。

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

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7125 2013/05/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング