CODEWITHSUNDEEP
jqueryhtmljquery-uibutton
Robert Martens
Robert Martens

Reputation: 173

adding jquery ui icon to a submit button

I have the following code for a submit button my page: The html markup is:

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

and the jquery is:

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

How would I add a ui icon to the above, specifically the ui-icon-circle-plus

Upvotes: 6

Views: 15519

Answers (3)

Viktor S.
Viktor S.

Reputation: 12815

You can change your HTML like this:

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

And then update your script like this:

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

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

Upvotes: 5

Laokoon
Laokoon

Reputation: 1291

this should work

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

or you set it afterwards:

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

Here is an working example.

Upvotes: 1

Ben Inkster
Ben Inkster

Reputation: 66

Look at the examples on http://jqueryui.com/button/#icons (specifically the icons).

Instead of using a submit input, try using a button.

Here's a modified version of the icon only button with 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>

Upvotes: 1

Related Questions