jquery - 送信ボタンにjqueryuiアイコンを追加する

Question

私のページの送信ボタンには次のコードがあります。htmlマークアップは次のとおりです。

<td align="Right"><input type="submit" value="Add Driver" ></td>

jqueryは次のとおりです。

$( "input[type=submit]" ).button().click(function( event ) {
event.preventDefault();
});

上記にUIアイコンを追加するにはどうすればよいですか、具体的にはui-icon-circle-plus

Answer 1

次のようにHTMLを変更できます。

<button type="submit">
    Add Driver
</button>

次に、次のようにスクリプトを更新します。

$('button[type=submit]').button({icons: {primary: 'ui-icon-circle-plus'}}).click(function (event) {
    event.preventDefault();
});

デモ： http： //jsfiddle.net/mh5Pu/

Answer 2

これはうまくいくはずです

$( "input[type=submit]" ).button({icons: {primary: "ui-icon-circle-plus"}})      .click(function( event ) {
event.preventDefault();
});

または、後で設定します。

$( "input[type=submit]" ).button( "option", "icons", { primary: "ui-icon-circle-plus", secondary: "<your_second_icon>" } );

これが実際の例です。

Answer 3

http://jqueryui.com/button/#icons（具体的にはアイコン）の例を見てください。

送信入力を使用する代わりに、ボタンを使用してみてください。

これは、ui-icon-circle-plusが付いたアイコンのみのボタンの修正バージョンです。

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"     role="button" aria-disabled="false" title="Button with icon only">
<span class="ui-button-icon-primary ui-icon ui-icon-circle-plus"></span>
<span class="ui-button-text">Button with icon only</span>
</button>