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):
legal mas cade o resto...??
ResponderExcluirComo eu declaro o botão??
Se você utilizar o '$.fn.toButton' basta criar um input com a class que desejar aí fica:
ResponderExcluir$( "input.minhaClass").toButton().button({
icons: { primary: "icon-estoque-incluir" }, text:false );
e no html:
input class='minhaClass' value='o que vai vir a ser o título'
caso não use o '$.fn.toButton' declare um input do tipo button...
Este artigo explica como customizar o ícone. Para criar o button basta você deve usar a API do jquery ui.
ResponderExcluirhttp://jqueryui.com/demos/button/
O comunidadeCC também ensina você a utilizar o jqueryui button sobre inputs, e permitir a utilização de ícones. No artigo tem o link "Leia Mais".
http://comunidadecc.blogspot.com/2011/10/fntobutton-jquery-ui-button-com-icones.html