Как добавить изображение в ui-dialog-titlebar в JQuery? - PullRequest
Новая
       18

Как добавить изображение в ui-dialog-titlebar в JQuery?

2 голосов
/ 10 мая 2010

Можно ли добавить изображение к заголовку окна пользовательского интерфейса в диалоговое окно?.

Ответы [ 5 ]

7 голосов
/ 10 мая 2010

Конечно. Сделать его красивым с точки зрения размеров и выравнивания будет сложной задачей. Но поместить изображение в заголовок страницы так же просто, как: 

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

Edit:
Основываясь на том, что Ник сказал ниже (ура), если вы хотите быть действительно хардкорным, вы поместите код в событие открытия диалога, то есть: 

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

Нажмите для просмотра соответствующих документов.

2 голосов
/ 09 июля 2012

если вы используете 

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

на открытом мероприятии затем сначала удалите felix.gif 

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

потому что, если вы открываете диалоговое окно более одного раза, оно добавляет одно и то же изображение более одного раза или уничтожает диалоговое окно

1 голос
/ 11 октября 2011

Это может быть использовано для добавления изображений в 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-диалог, который там изначально находится, заменить его на пользовательский класс. 

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

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

Итак, я представляю, что добавить изображение можно через это.

1 голос
/ 10 марта 2011

Это все действительно хорошие ответы. Я чувствовал, что одна маленькая и важная функция была упущена, поэтому я бросаю в своем решении.

вы можете «привязать» код к событию. Я ленив, поэтому я использую удобную привязку .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, чтобы он выглядел хорошо

Это можно убрать, если вы поместите события и «createialog», и «щелчок» в один вызов .live (). Проверьте API здесь: JQuery .live ()

Скорее всего, вы захотите сделать что-то более изощренное с вашим заголовком (вот как я здесь оказался). Я бы предложил использовать jQuery .load('FANCY-TITLEBAR.xml'); вместе с .append () вместо просто .append('GIANT-BLOCK-OF-MARKUP);

0 голосов
/ 10 мая 2010

Я использовал стиль CSS, как это: 

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

Это в таблице стилей, которую я добавляю после jquery-ui.css

...