Как добавить иконки кнопок jQuery UI для ввода кнопок?

Можно ли использовать иконки кнопок jQuery UI с элементами <input type="submit">?

В примере документации используются элементы <button>, но в нем явно не указано, работают ли значки с кнопками ввода. Я хотел бы добавить значки в элементы управления ASP.NET Button, которые отображаются как <input type="submit">.

Вот что я пробовал:

$("input.add").button({ icons: { primary: "ui-icon-circle-plus" } });

Кнопка оформлена правильно, за исключением отсутствующего значка. Я что-то пропустил?

Ответ 1

Вы делаете это правильно. Кажется, что он не работает на входных элементах. Беглый взгляд на исходный код JQuery UI Button показывает, что он добавляет <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> к элементу, получающему значок, но это не похоже на входные элементы.

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

if ( this.type === "input" ) {
  if ( this.options.label ) {
    this.element.val( this.options.label );
  }
  return;
}

В основном это означает, что код должен выйти до того, как диапазон будет добавлен/добавлен в элементы ввода. Так что это по дизайну.

Ответ 2

Как заявляет Брэдли Маунтфорд, элементы отправки не оформлены значками по дизайну (почему это дизайн, я понятия не имею).

Измените свой asp: Button на asp: LinkButton, и все в мире. Да, это действительно так просто.

Ответ 3

Моя проблема была перезаписана стилями, поэтому это решение помогло мне:

$('input.add').each(function(){
          $(this).replaceWith('<button  class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } });

Ответ 4

Я ищу это решение, и я нашел свой, который отлично работает

Javascript

$(function () {

    //botoes de login

    $("#btnLogin").button({
            icons: { primary: "ui-icon-key" }
        }).hide().after('<button>').next().button({
            icons:
            {
                primary: 'ui-icon-key'
            },
            label: $("#btnLogin").val()
        }).click(function (event) {
            event.preventDefault();
            $(this).prev().click();
        });
    $("#close").button({ icons: { primary: "ui-icon-close" } });
});

webform

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />