4

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

2 Answers 2

4

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/

2
  • That seems really really obvious now :/ Thanks!
    – elwyn
    Apr 12, 2011 at 9:28
  • 1
    It also seems like a lot of work. Surely jQuery UI should be updated to handle this scenario and not add the extra <span> elements? This is what I would expect in any case. Jun 14, 2011 at 14:47
3

I believe this is a known issue ( Button: support pre-rendered markup ), and as you and I both would expect, the extra <span> elements will hopefully one day not actually be generated :)

2
  • 1
    Though, that bug was opened a year ago... go up vote it! It's currently at 0 votes (it was at -1 before I voted for it, which is kinda disappointing). Jun 14, 2011 at 14:57
  • @elwyn thank you too for confirming that it wasn't just me :D and for voting :) Jun 17, 2011 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.