UI Button FOUC - small change proposal

UI Button FOUC - small change proposal

Hi There
I'm using the excellent ui button widget to convert my buttons.

I have only only issue with the widget itself. Due to the nature of the system i'm working with, it's not possible for me to create/instantiate the buttons immediately after they have loaded in the document, so there is quite an obvious FOUC.

To get around this, I apply the relevant UI styles to the relevant elements. This works nicely for some of the UI widgets (eg tabs), but does not work for buttons.

If I have the following base markup for a button, with all the relevant styles in place:
  1. <button id="page-save" class="sledge-button ui-button-text-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  2.         <span class="ui-button-text">
  3.                 <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
  4.                 Save   
  5.         </span>
  6. </button>

When I then instantiate a button widget on this element, the "ui-button-text" span is repeated.

Here follows my small fix for this:

jquery ui 1.8.1 : jquery.ui.button.js : line 282

change the following:

  1. buttonText = $( "<span></span>" )

to:
  1. buttonText = this.element.find('.ui-button-text').length ? this.element.find('.ui-button-text').text() : $( "<span></span>" )

I'm currently using this small fix, but I really do not want to adjust any of the base ui widgets. It would be uber rad if this was included in the button widget. What do you think?

Rich