Замена значка «Закрыть» для диалогового окна JQueryUI - PullRequest
Новая
       5

Замена значка «Закрыть» для диалогового окна JQueryUI

10 голосов
/ 27 октября 2011

После долгих поисков по этой теме мне не удалось найти ответ, поэтому, надеюсь, кто-нибудь сможет мне помочь с этой проблемой. У меня относительно простое диалоговое окно: 

$("#dialog-search").dialog({
    resizable: false,
    height:dimensionData.height,
    width: dimensionData.width,
    modal: true,
    title: dimensionData.title,
    position: [x,y],
    open: function() {
        $("#dialog-search .dateField").blur();
    },
    close: function(event, ui){
       callBack(event,ui);
    }
});

То, что я хочу сделать, это заменить значок X (ui-icon-close) на другой значок, предоставляемый пользовательским интерфейсом (ui-icon-minus), чтобы вместо этого щелкнуть значок минуса, диалоговое окно закрывается. Я видел сообщения о том, как скрыть значок или заменить его собственным изображением в css, но я пока не нашел способа заменить значок другим значком, чтобы выполнить ту же функцию.

Редактировать: я также хочу иметь возможность использовать ui-icon-close для другой функциональности в моем диалоговом окне, добавляя пользовательское поведение / местоположение, но это может выходить за рамки этого вопроса. Не стесняйтесь обращаться к этому, если это - связанное решение, все же.

Ответы [ 2 ]

12 голосов
/ 27 октября 2011

Попробуйте увидеть структуру диалога, и это не должно быть трудно сделать.

http://jqueryui.com/demos/dialog/#theming

Используйте событие create, чтобы изменить класс значка кнопки закрытия на класс другого значка.

http://jsfiddle.net/Quincy/kHU2M/1/

$("#dialog-search").dialog({
    create: function(event, ui) { 
      var widget = $(this).dialog("widget");
      $(".ui-dialog-titlebar-close span", widget)
          .removeClass("ui-icon-closethick")
          .addClass("ui-icon-minusthick");
   }
});
8 голосов
/ 04 марта 2013

Старый вопрос, но, возможно, я помогу кому-нибудь. После CSS сделал трюк для меня, полностью пользовательский Close пользовательский интерфейс кнопки. Не очень элегантно :), но у меня отлично работает. 

.ui-icon-closethick {
    background-image: url(images/my-10px-image.png) !important;
    background-position: left top !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
    width: 10px !important;
    height: 10px !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
    padding: 0 !important;
}

Моя пользовательская кнопка закрытия показана ниже:

...