2

Web サイトのさまざまなダイアログに jQuery UI ダイアログを使用しています。ここで、さまざまなダイアログにさまざまなスタイルを使用する簡単な方法があるかどうか疑問に思いましたか?

たとえば、「本当に削除してください...」などのアラートは、他のメッセージとは異なるスタイルにする必要があります...

現在、ダイアログで使用されるクラスがあります。

<div id="dialog-confirm" title="Title of dialog">Text of dialog</div>

ただし、実際のスタイルは に適用され.ui-widget-header、ソース テキストのどこにも見つからないため、jQuery がこれをある時点で置き換えると思いますが、これは本当ですか?

編集: docs.jquery.com から:

Sample markup with jQuery UI CSS Framework classes

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>
Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>.

さまざまなダイアログにさまざまなスタイルを持たせるための最良の方法は何ですか?

4

2 に答える 2

2

また、jQuery サイトから直接:

$( ".selector" ).dialog({ dialogClass: "alert" });

それは言う

テーマを追加するために、指定したクラス名がダイアログに追加されます。

于 2012-07-23T20:53:40.540 に答える
0 
         <div id="dialog-confirm" title="Title of dialog" style="//put your styling here" >Text of dialog</div>

そのようなインライン スタイリングは、すべての css シートを上書きします

ダイアログごとに異なる DIV を使用できます。

          <div id="dialog-confirm0" title="Title of dialog" style=" put your styling here>Text of dialog</div> 
          <div id="dialog-confirm1" title="Title of dialog" style=" put your styling here>Text of dialog</div> 
          <div id="dialog-confirm2" title="Title of dialog" style=" put your styling here>Text of dialog</div>

使用する

                $( "#dialog-confirm0" ).dialog({
        height: 140,
        modal: true
         });

次に、別の場所で を使用できます

                $( "#dialog-confirm1" ).dialog({
        height: 140,
        modal: true
         });

css クラスでそれを行いたい場合は、jQuery を使用して DIV に別のクラスを追加し、!important を追加して jQuery UI からのスタイリングをオーバーライドできます。

元。

                background-color: #454545 !important;
                color: #000 !important;
于 2012-07-23T20:50:58.840 に答える