Adicionando ícones customizados a buttons do jquery ui

Na última versão do jquery ui, os desenvolvedores ficaram encantados com a adição do jquery.ui.button. Botões bonitos, no padrão do restante da página, com fácil criação.

Mas os ícones disponibilizados pelo jquery.ui nem sempre atendem as necessidades do designer. Como fazer então se você quer criar um botão para dar entrada no estoque.

Que tal criar um botão com uma caixa, e uma seta entrando na caixa?




Mas existem uma variedades de botões criados no sistema, todos no padrão do jquery.ui.button. Não é interessante colocar apenas esse em um padrão diferente.

Para criar um botão com o ícone acima, no padrão do jquery.ui.button devemos fazer como indicado abaixo.

 $( "input.buttonEstoqueIncluir").toButton().button({
     icons: {
          primary: "icon-estoque-incluir"
     },
     text:false
});

onde "icon-estoque-incluir" é uma nova classe de ícone, que estamos a criar.

$.fn.toButton permite adicionar ícones em inputs. Leia mais.

No css devemos adicionar o código abaixo.

span.icon-estoque-incluir {
    position: absolute;
    text-align: left;
    background: transparent url(../images/icones/incluirNoEstoque.png) no-repeat center right !important;
}

Temos esse resultado (Botão da esquerda):