2

ダイアログ ボックスの ui-dialog-titlebar に画像を追加することは可能ですか?.

4

5 に答える 5

7

確かにそうです。サイジングと配置の点で見栄えを良くすることは、難しい部分です. ただし、タイトルバーに画像を配置するのは次のように簡単です。

$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

編集:
ニックが以下で言ったことに基づいて構築します(乾杯)、本当にハードコアになりたい場合は、ダイアログのオープンイベント内にコードを配置します。つまり:

$(".putSelectorHere").dialog({
  open: function(event, ui) {
    $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
  }
});

関連するドキュメントをクリックしてください。

于 2010-05-10T06:56:15.303 に答える
2

使用する場合

 $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

オープンイベントで、最初にfelix.gifを削除します

$(".ui-dialog-titlebar").remove("#myNewImage");

ダイアログボックスを複数回開くと、同じ画像が複数回追加されるか、ダイアログボックスが破棄されるためです

于 2012-07-09T06:28:52.043 に答える
1

これらはすべて本当に良い答えです。小さくて重要な機能が 1 つ見落とされているように感じたので、ソリューションを投入します。

コードをイベントに「バインド」できます。私は怠け者なので、.live() コンビニエンス バインドを使用します。これにより、特殊化されたすべてのコードをどこにでも放り込むことができます。

これを使ってみてください

<script type="text/javascript">
   function initPopups()
   {
      <!-- this is a 'close' handler for all of my modal popups-->
      $('.ui-widget-overlay').live('click',function(){$('.YOURCLASS').dialog('destroy');});

      <!-- this puts the lil logo in all of the popup dialog titlebars -->
      $('.YOURCLASS').live('dialogcreate',function(){$('.ui-dialog-titlebar').append("<img id='my-img' src='THEIMG.png'/>");});
   }

  <!-- run the scripts once the doc is done loading -->
  $(document).ready(initPopups());
</script>

次に、img id を使用して関連するすべての CSS を操作し、見栄えを良くします

「createdialog」イベントと「click」イベントの両方を .live() への 1 回の呼び出しに入れると、これをクリーンアップできます。ここで API を確認してください: JQuery .live()

タイトルバーをもう少し凝ったものにしたいと思うかもしれません (それが私がここにたどり着いた方法です)。jQuery.load('FANCY-TITLEBAR.xml'); を .append() だけでなく使用することをお勧めします.append('GIANT-BLOCK-OF-MARKUP);

于 2011-03-10T20:15:05.587 に答える
1

これは、css に画像を追加するためのソリューションとして使用できます。以下は、私が自分で使用したコードの例です。

var $help = $('#dialog_help')
.dialog({
   title: 'Help',
   autoOpen: false,
   draggable: false,
   width: 200,
   position: [100,100],
   closeText: 'Close',
   dialogClass: 'dialoghelp'
});

$('.openhelp').click(function() {
    $help.dialog('open');

    return false;
});

-dialogClass: 'dialoghelp'- を追加すると、CSS でダイアログ ウィンドウを次のようにカスタマイズできるようになりました。

この方法でできることは、最初にそこにあるメインの .ui-dialog を置き換え、それをカスタム クラスに置き換えることです。

.ui-dialog .ui-dialog-titlebar { padding: 3px; position: relative; background: red;}
//original

.dialoghelp .ui-dialog-titlebar { padding: 3px; position: relative; background: red;}
//adjusted

だから、画像の追加はこれでできると思います。

于 2011-10-11T10:29:30.307 に答える
0

私は次のようなcssスタイルを使用しました：

.ui-dialog .ui-dialog-titlebar { background: transparent url(/path/to/images.gif) no-repeat top left; }

jquery-ui.cssの後に追加するスタイルシートにあります

于 2010-05-10T12:25:45.127 に答える