Как я могу поставить значки на кнопку ввода jquery UI?

Question

Основываясь на документации по кнопке пользовательского интерфейса jquery, я попробовал следующее:

<jquery>$("#test").button({ icons: { primary:'ui-icon-gear' } });</jquery>
<input id="test" type="submit" value="test"></input>

Однако значок не отображается на кнопке. Если я изменю <input> на <span>, это сработает; но мне нужны значки на кнопке отправки формы. Размещение <span> вокруг кнопки также не помогает (тогда у меня есть кнопка внутри кнопки).

Я также попробовал решение, описанное в в этом вопросе о стековом потоке , но диапазон .prepend не влияет на мою страницу. Есть идеи?

Answer 1

вы можете привязать событие клика к вашему диапазону, чем это похоже на кнопку ... например:

<form id="myForm" ...>
...
    <span onclick="document.myform.submit()" class="jqueryUI" id="myButton">Butotnvalue</span>
...
</form>

лучший способ - наверняка связать его в функции загрузчика jQuery; -)

$('#myButton').bind('click', function(){
    $('#myForm').submit();
});

Answer 2

Попробуйте вместо этого

$("#test input").each( function() {
   $(this).button({ icons: { primary: 'ui-icon-gear' } });
});

Мне нравится помещать свою иконку в список и превращать ее в нечто более забавное, например:

$("#test input").each( function() {
   $(this).button({ icons: { primary: $(this).attr('icon') } });
});

И ваш ввод:

<input id="test" type="submit" value="test" icon='ui-icon-gear'>