スタイル設定とテーマ設定 (igDialog)

トピックの概要

このトピックは、さまざまなアプローチによる igDialog™ のスタイル設定を紹介します。

このトピックを理解するために、以下のトピックを参照することをお勧めします。

このトピックは、以下のセクションで構成されます。

以下の表は、スタイル変更が可能な igDialog コントロールの構成可能な要素を示しています。このメソッドについては、表の下にある解説も参照してください。

構成可能な要素	詳細	関連トピックまたはセクション
コントロールプロパティによる `igDialog` のスタイル設定	`igDialog` がその外観を変更するよう構成する必要があるプロパティ。	*igDialog* のヘッダーとフッター
CSS クラスによる `igDialog` のスタイルとテーマの設定	基本的な `igDialog` クラスをオーバーライドし、ダイアログに合わせて独自のテーマを作成します。	*CSS クラス参照 (igDialog)*
jQuery Theme Switcher を使用した `igDialog` のスタイル設定	`igDialog` コントロールを簡単にカスタマイズするには、jQuery Theme Switcher を使用します。	jQuery Theme Switcher を使用したスタイル設定

jQuery Theme Switcher を使用すると、igDialog コントロールのスタイルを簡単に設定できます。これは、igDialog CSS クラスの命名が jQuery UI CSS Framework の命名規則に従っているためです。

以下のコードは、jQuery Theme Switcher を初期化する方法を示します。igDialog に追加構成する必要はありません。Theme Switcher により自動的に CSS ルールが置き換えられます。

$("#themeSwitcher").themeswitcher();

<div id="themeSwitcher"></div>

以下のスクリーンショットは、Blitzer テーマでスタイル設定された igDialog を示します。