将jQuery UI图标添加到提交按钮

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？

- Robert Martens

Answer 1

你可以这样更改你的HTML代码：

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

接着按照以下方式更新您的脚本：

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

Demo: http://jsfiddle.net/mh5Pu/

- Viktor S.

---

我在fiddle上没有看到任何图标，只有一个文本按钮。 - user3934058

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>" } );

这里有一个工作示例。

- Laokoon

---

看这里：http://jsfiddle.net/Kfubw/你的HTML语法也有错误：正确的HTML应该是：<td align="Right"><input type="submit" value="Add Driver" /></td> - Laokoon

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>

- Ben Inkster