UI Button FOUC - small change proposal
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:
- <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">
- <span class="ui-button-text">
- <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
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:
- buttonText = $( "<span></span>" )
- 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?