диалоговое окно на jQuery пользовательского интерфейса иконки

можно ли Добавлять значки к кнопкам в диалоговом окне пользовательского интерфейса jQuery? Я пробовал делать это таким образом:



$("#DeleteDialog").dialog({

    resizable: false,

    height:150,

    modal: true,

    buttons: {

        'Delete': function() {

            /* Do stuff */

            $(this).dialog('close');

        },

        Cancel: function() {

            $(this).dialog('close');

        }

    },

    open: function() {

        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');

        $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');

    }

});


селекторы в открытой функции, кажется, работает нормально. Если я добавлю следующее в "открыть":



$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');


тогда я получаю кнопку удаления с красным текстом. Это не плохо, но мне бы очень хотелось, чтобы этот маленький мусорный бак был спрайтом на кнопке удаления.



Edit:



Я сделал пару настроек для принятого ответ:



var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');

btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');

btnDelete.width(btnDelete.width() + 25);


добавление верхнего поля толкает значок вниз, поэтому он выглядит так, как будто он центрирован по вертикали. Добавление 25 пикселей к ширине кнопки удерживает текст кнопки от переноса на вторую строку.

638   12  

12 ответов:

попробуйте в этой строке добавить значок корзины на кнопку Удалить. Спрайт должен быть в отдельном элементе.

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

чтобы значок не появлялся в верхней части кнопки:

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');
18  
2012-10-08 12:54:27

я попробовал это, и это работает :)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]
52  
2010-08-03 07:11:12

изначально поддерживается с jQuery UI 1.10

начиная с версии jQuery UI 1.10.0, можно чисто указать значки кнопок, не прибегая к open обработчики событий. Синтаксис:

buttons: [
    {
        text: "OK",
        icons: { primary: "ui-icon-check" }
    },
    {
        text: "Cancel",
        icons: { primary: "ui-icon-closethick" }
    }
]

также можно указать .

посмотреть его в действии.

32  
2014-05-29 18:16:38

также вы можете добавить id или другой attr к кнопке, например:

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }
8  
2011-04-22 15:11:51

эта версия работает без необходимости беспокоиться о текст кнопки

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}
6  
2010-10-28 04:55:38

вот что я использую. Присвойте идентификатор интересующей кнопке во время начального определения диалогового окна:

    buttons:
    [
        {
            id: "canxButton",
            text: "Cancel",
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () { ...

затем вы можете изменить иконку текст такой:

$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });
2  
2015-06-10 23:30:59

просто обновление, так как я столкнулся с необходимостью сделать это сам.

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

также в выбранном решении фактически отсутствует пара уже определенных классов CSS, которые бы фиксировали позиционное вопрос.

следующий код должен выполнить именно то, что было желательно в исходном вопросе, с немного большей точностью. Если вы хотите применить один и тот же значок корзины ко всем диалоговым окнам с помощью кнопки удаления, измените $('#DeleteDialog').Родительский () селектор $('.ui-dialog-buttonpane') достигнет этой цели:

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');
1  
2010-08-10 22:15:25

или если вы не хотите влиять на любые другие диалоги,

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}
1  
2010-09-10 01:59:09

назначить высоты ".интерфейс-диалог .ui-кнопка " как и следующие:

.ui-dialog .ui-button {
    height:36px;
}
.ui-icon-kl_exit {
    height:32px; 
    width:32px;
    display:block;
    background-image: url('../icons/exit32.ico');
}
1  
2012-02-09 18:51:33

Я побежал в том же вопросе. Кажется, jquery хранит текст в атрибуте под названием "текст" в самой кнопке, а не как текст внутри кнопки.

Я решил это так:

    $dialog.dialog({
        resizable:false,
        draggable:false,
        modal:true,
        open:function (event, ui) {
            $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
            //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
            $(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
        },
        buttons:[
            {
                text:"OK",
                click:function () {

                },
                "class":"add"
            },
            {
                text:"Cancel",
                click:function () {

                },
                "class":"cancel"
            }
        ]
    });
1  
2012-08-15 12:28:09

как насчет подхода на основе классов?

в своем поставить что-то вроде следующего:

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

затем, в файле, где вы создаете диалоговое окно, сделать что-то вроде этого:

$("#doStuff-dialog").dialog({
    title: "Do Some Stuff",
    modal: true,
    buttons: [
        {
            text: "Yes",
            class: "my-button-submit",
            click: function () {
                $(this).dialog("close");
            }
        },
        {
            text: "No",
            class: "my-button-cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ],
    open: function () {
        stylizeButtons($("#doStuff-dialog").parent());
    }
});

тогда вам никогда не придется полагаться на поиск текста, и он требует минимального количества кода в ваш диалог. Я использую это во всех своих приложениях, чтобы применить jQuery UI styling/icons к кнопкам, просто предоставив им класс.

1  
2012-12-12 00:10:55

по данным Dialog > buttons option документация вы можете передать объект или массив параметров; последний позволяет настроить кнопки:

кнопки

тип: объект или массив
по умолчанию:[]

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

  • объект: клавиши-это метки кнопок, а значения-обратные вызовы, когда будет нажата соответствующая кнопка.
  • массив: каждый элемент массива должен быть объектом, определяющим атрибуты, свойства и обработчики событий для установки на кнопку. В кроме того, ключ icons может использоваться для управления значками кнопки вариант, и ключ showText может использоваться для управления текстом кнопки выбор.

$(function() {
  var buttons = [];
  buttons.push({
    text: "Yes",
    // icon options
    icons: { primary: "ui-icon-check" },
    // attributes
    "class": "hawt-button",
    title: "Aye!"
  });
  buttons.push({
    text: "Yes to All",
    icons: { secondary: "ui-icon-check" }
  });
  buttons.push({
    text: "Please",
    icons: { primary: "ui-icon-notice" },
    // text options
    showText: false
  });
  buttons.push({
    text: "Cancel",
    icons: { secondary: "ui-icon-close" },
    // properties
    disabled: true
  });
  $("#dialog").dialog({
    width: "auto",
    buttons: buttons
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

.ui-button.hawt-button {
  color: hotpink;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>
1  
2018-05-30 12:51:29

Comments

    Ничего не найдено.
Click here to cancel reply.