web-dev-qa-db-ja.com

jQuery UIダイアログの背景色を変更するにはどうすればよいですか？

jQuery UI Dialogの背景色を変更する方法を見つけるのに苦労しています。

タイトルバーを変更/削除する方法はたくさんありますが、曲がった角を含む背景全体は参照していません。

これが私の試みです：

http://jsfiddle.net/dEvKb/11/

問題は。ui-widget-contentがダイアログ内の正方形の領域にのみ適用され、曲がった角は含まれません。

私はクラス。ui-corner-allクラスを見つけました。それは背景全体を着色しますが、ダイアログの半分だけが着色されることを期待しています。 （これはjsfiddleで見ることができます）

誰かがこれを以前にやったことがありますか？

javascriptjquerydialogstyles
14
Meow

このように使えます

http://jsfiddle.net/dEvKb/15/

Use！importantを使用して、すべてのクラスの背景に設定する必要があります。

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}

21
sinanakyazici

Cssクラスを使用します。

  • ui-dialog
    • 全体のメインコンテナ
  • ui-dialog-title
    • タイトルが実際に表示される場所です
  • ui-dialog-titlebar
    • ダイアログのタイトルが存在する場合の領域
  • ui-dialog-content
    • Divが実際に読み込まれる領域
  • ui-resizable-handle
    • これらのdivはダイアログのサイズを変更するために使用されますが、通常は設定に応じて非表示になります
  • ui-dialog-buttonpane
    • ここにボタンが存在する場合に移動します
  • ui-dialog-buttonset
    • ここにボタンが実際に表示されます

また、選択した所定の回答とは異なり、注意してください使用する必要はありません!important。

直接呼び出しが必要な場合は、すべてを設定してダイアログを作成します。 ChromeまたはFF（読みやすいクロム）でページをロードします。次にダイアログを開き、変更する要素を選択します。 ブラウザの開発者ツールでCSSを確認します 。jqueryuiがcss呼び出しを行うために使用するexact行を確認できます。その行を独自のCSSにコピーして、後で読み込まれ、ダイアログが表示されることを確認してください新しい上書きを取得します。

19
SpYk3HH

このクラスをCSSで使用する

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #ff0000;
    overflow: auto;
    zoom: 1;
}
3
Deepakmahajan

JQueryでこのリンクを使用して独自のカスタムCSSを作成することもできることに注意してください

http://jqueryui.com/themeroller/

jQueryを使用すると、カスタムCSSを作成できます。ギャラリーから目的のテーマを選択して編集ボタンを押してください。ダイアログボックスのほとんどすべてと角の丸い部分を変更できます。

次に、jQueryパック全体をダウンロードする必要があります。cssタグにcss/custom-cssフォルダーを置くだけで、基本的にすべてソートされます。

上記の方法は変更できるので当てはまりますが、CSSでそのようなクラスなどを探す必要があります。jQueryはそれを簡単な方法で実行してくれます。それも試してみてください。

私が基本的に行うことは、2〜3つのカスタムスタイルシートを作成し、それらを読み込んで遊んで、最後にWebサイト用に1つを選択し、残りを破棄することです。

これがお役に立てば幸いです...

2
Kevin

特定のダイアログをターゲットにしたい場合は、次の方法で行うことができます。

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});
2
zach

簡潔な答え

your_stylesheet.css

.ui-widget-content { background: yellow; }

スタイルシートがJQuery UIスタイルシートの後に含まれていることを確認してください。

your_webpage.html

    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

長い答え

オーバーライドするクラスとスタイルを決定するには、ツールチップを調べる必要があります。ツールチップを表示：

$("#selector_for_item_with_tooltip").tooltip('open')

ツールチップを右クリックし、「検査」を選択します。気になる属性が見つかるまで[スタイル]タブを下にスクロールします（background-color）。

tooltip css styles

値をクリックして新しい値を入力し、希望する効果があることを確認できます。

change css style in browser

形式を上書きするために使用する必要がある形式を確認するには、右上にあるfilename：line＃をクリックして、属性を定義する.cssファイルに移動します（jquery-ui.css:802）

jquery-ui css background style

フォーマットは

.ui-widget-content
{
    background: yellow;
}

君の .cssファイルは同じスタイルを使用し、このスタイルの後に含める必要があります（上記の「短い回答」を参照）。

人々は時々誤って!importantこの要件を回避するためのcssサフィックスですが、他のあらゆる種類の頭痛の種になります。

0
Stefan