Question

Greetings,

So I am trying to manually apply the jQuery CSS classes to my elements, so that users do not have a ‘flash’ as my javascript styles everything, and so users without JavaScript enabled get to see the purdyness.

So here is an example of a button. I have applied all the classes the .button() call would add, and structured my markup in the same way.

<button id="my-button" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
    <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
    <span class="ui-button-text">Doit!</span>
</button>

This looks great on its own! Of course it has no hover styles etc, but that’s expected.

Then I apply my Javascript:

$('#my-button').button();

jQuery UI doesn’t seem to be aware of the existing classes/markup, and it turns my lovely button into this:

<button id="my-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="submit" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
    <span class="ui-button-text">
        <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
        <span class="ui-button-text">Doit!</span>
    </span>
</button>

So finally my question:

How can I apply the CSS classes manually/without javascript, yet still use the javascript functions to add the interaction functionality?

edit: ok so the markup generated by .button() isn’t exactly what I posted there ^^ that was a .button( call with an icon parameter. The issue is the same though, with a simple .button() call it just wraps everything inside a <span class="ui-button-text

Answer 1

You could first clear the button and then run the .button() to recreate your ui-button

$('#my-button').html(function(){return $(this).text();}).button({ icons: {primary:'ui-icon-plus'}});

http://jsfiddle.net/MHaxd/1/