JQuery UI Dialog_jquery のスタイル設定の問題の簡単な分析

最近JQUERY UI Dialogプラグインを使っていてとても強力だと感じていますが、スタイルの設定が面倒で2日間調べてやっと完成しました。

プラグインを実行するには以下の環境が必要です

jquery.ui.all.css はスタートアップスタイルの CSS です。Firefox で開いて表示します。フローティングレイヤーのタイトルは次のとおりです。

ワンストップ ソリューションすべての人にチップ

実際には、これはスパンなので、このクラス ui-dialog-title に従って、公式 Web サイトの CSS ディレクトリに移動して jquery.ui.dialog.css ファイルを見つけ、classui-dialog-title を見つけます。 CSS スタイル。

.ui-dialog .ui-dialog-title { font: 62.5% "Trebuchet MS" , sans-serif;font-weight:bold;float: left; margin: .1em 16px .1em 0;

この CSS を変更して、必要なフローティング レイヤーのヘッダー スタイルを実現します。

ヘッダーの背景設定:

.ui-widget-header { ボーダー: 1px ソリッド #aaaaaa; 背景: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% 繰り返し-x;太字; }

背景画像を削除して背景色として設定できます

.ui-widget-header { ボーダー: 1px ソリッド #aaaaaa; カラー: #222222; }

×と右下のアイコン設定について：

icon.ui-icon { 幅: 16px; 高さ: 16px; 背景画像: url(images/ui-icons_222222_256x240.png);