style asp button to look like Jquery button with Jquery-ui

Question

I don't want to call .button() on my asp:button, I just want to add some classes from the JqueryUI if possible.

I was thinking just adding the class ui-button to the asp:button

<asp:button class="ui-button" runat="server" id="TrackRequestSearch" Text="Search" 
        onclick="TrackRequestSearch_Click"></asp:button>

but this does not work.

Any ideas?

A suitable alternitive would be to use a regular html button and somehow fire the server side on click method, but i'm not sure that can be done easily... — kralco626
– kralco626, Commented Apr 20, 2011 at 11:29

Karthik · Accepted Answer · 2011-04-20 11:33:15Z

1

Add CSS style ui-state-default ui-corner-all ui-button-text-only to your button.

answered Apr 20, 2011 at 11:33

Karthik

5223 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naveed Ahmad · Accepted Answer · 2011-04-20 11:34:25Z

1

ui-button won't give it a button look exactly. Take a look at what ui-button contains:

.ui-button {
display: inline-block;
position: relative;
padding: 0;
margin-right: .1em;
text-decoration: none !important;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible;
}

In order to make a jQuery styled button you must add the following to it:

ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only

Also load the following CSS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css

answered Apr 20, 2011 at 11:34

Naveed Ahmad

3,1751 gold badge17 silver badges18 bronze badges

5 Comments

kralco626 Over a year ago

what class is being added on hover?

Naveed Ahmad Over a year ago

It's .ui-state-hover and .ui-state-focus

kralco626 Over a year ago

so that would be:

$("#TrackRequestSearch").hover(function () { $(this).addClass("ui-state-hover").addClass("ui-state-focus"); }, function () { $(this).removeClass("ui-state-hover").removeClass("ui-state-focus"); });

and how about the style for the click?

Naveed Ahmad Over a year ago

Yes, that's how it should be.

kralco626 Over a year ago

do you know what the css classes are for the click style?

kempsam · Accepted Answer · 2011-04-20 11:45:46Z

1

Use CssClass instead of just class

answered Apr 20, 2011 at 11:45

kempsam

562 bronze badges

Comments

kralco626 · Accepted Answer · 2011-04-20 11:31:07Z

0

    <asp:button class="ui-button-text-icon ui-button ui-widget 
    ui-state-default ui-corner-all ui-button-text-only" 
    runat="server" id="TrackRequestSearch" Text="Search" 
onclick="TrackRequestSearch_Click"></asp:button>

answered Apr 20, 2011 at 11:31

kralco626

8,69641 gold badges116 silver badges171 bronze badges

2 Comments

kralco626 Over a year ago

This doesn't add in the hover style a button has however; so the hover must be an event that is added rather than a css class.

kralco626 Over a year ago

Or the style when the button is clicked for that matter

Joe Johnston · Accepted Answer · 2013-07-26 15:54:45Z

0

Add the following script(s)

$(":submit").addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'); // All buttons

or

$('#<%= button1.ClientID %>').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only'); // My specific button

Tip of the hat to Naveed above for the true classes needed.

answered Jul 26, 2013 at 15:54

Joe Johnston

2,9762 gold badges33 silver badges58 bronze badges

Collectives™ on Stack Overflow

style asp button to look like Jquery button with Jquery-ui

5 Answers 5

Comments

5 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related