このトピックでは、igDialog™ コントロールの CSS クラスを紹介します。
このトピックは、以下のセクションで構成されます。
このセクションでは、igDialog CSS クラスを説明します。操作説明に従って、すべてのスタイルをオーバーライドして、カスタム igDialog コントロール レイアウトを作成できます。
以下に、igDialog コントロールの特長である CSS クラスの目的と機能をまとめました。
メイン/トップ要素に適用するクラス。
ui-igdialog
ui-dialog
ui-widget
ui-widget-content
ui-corner-all
ヘッダーに適用するクラス。
ui-igdialog-header
ui-dialog-titlebar
ui-widget-header
ui-corner-top
ui-helper-clearfix
フォーカス状態のヘッダーに適用するクラス。
ui-igdialog-header-focus
ui-state-focus
最小化状態のヘッダーに適用するクラス。
ui-corner-bottom
ヘッダー テキストに適用するクラス。
ui-igdialog-headertext
ui-dialog-title
"image" オプションを設定したときにヘッダーのイメージを表す SPAN に適用される追加のクラス。
ui-igdialog-headerimage
ダイアログが最小化状態のときにヘッダー テキストに適用するクラス。
ui-igdialog-headertext-minimized
ヘッダーにあるボタンに適用するクラス。
ui-igdialog-headerbutton
ui-corner-all
ui-state-default
マウス ポインターを合わせたときにヘッダーのボタンに適用するクラス。
ui-igdialog-headerbutton-hover
ui-state-hover
ヘッダーの閉じるボタンに適用するクラス。
ui-igdialog-buttonclose
ヘッダーの最小化ボタンに適用するクラス。
ui-igdialog-buttonminimize
ヘッダーの最大化ボタンに適用するクラス。
ui-igdialog-buttonmaximize
ヘッダーのピン留めボタンに適用するクラス。
ui-igdialog-buttonpin
閉じるボタンのアイコンに適用するクラス。
ui-igdialog-close-icon
ui-icon ui-icon-close
最小化ボタンのアイコンに適用するクラス。
ui-igdialog-minimize-icon
ui-icon
ui-icon-minus
最大化ボタンのアイコンに適用するクラス。
ui-igdialog-maximize-icon
ui-icon
ui-icon-extlink
元に戻すボタンのアイコンに適用するクラス。
ui-igdialog-restore-icon
ui-icon
ui-icon-copy
ピン留めボタンのアイコンに適用するクラス。
ui-igdialog-pin-icon
ui-icon
ui-icon-pin-s
ピン留め解除ボタンのアイコンに適用するクラス。
ui-igdialog-unpin-icon
ui-icon
ui-icon-pin-w
フッターに適用するクラス。
ui-igdialog-footer
ui-widget-header
ui-corner-bottom
ui-helper-clearfix
サイズ変更時にダイアログに適用するクラス。
ui-igdialog-resizing
ドラッグ時にダイアログに適用するクラス。
ui-igdialog-dragging
最大化やピン留めなどダイアログが移動不可状態のときにヘッダーに適用するクラス。
ui-igdialog-unmovable
ダイアログがモーダル状態のときにシェル要素に適用するクラス。
ui-igdialog-overlay
ui-widget-overlay
ダイアログのコンテンツ領域に適用するクラス。
ui-igdialog-content
ui-widget-contentui-dialog-content
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igDialog コントロールのプロパティを紹介します。igDialog コントロールのメソッドを紹介します。igDialog コントロールのイベントを紹介します。オンラインで表示: GitHub