UI Dialog buttons need more control / theme options

UI Dialog buttons need more control / theme options


Hi guys.
I have been build a fairly complex purchase flow (cart) using the UI
Dialog (1.6rc6 and now 1.7), and I have been struggling with the
buttons option.
First, while a theme specifies Interaction Cues for the buttons
(secondary, primary etc.), these are not configurable within the
buttons construct. This means that in the "open" callback or at some
other point post-initialization, you have to manually add the widget
css classes to the button elements.
This raises a second problem insomuch as the button elements are not
readily accessible post dialog initialization and I find myself using
some pretty ugly and brittle code to get at the buttons. I have tried
using the documented "getter" for the buttons, namely: var buttons = $
('.selector').dialog('option', 'buttons'); but this just returns a
simple object of the attributes (the two button names), and not the
elements themselves.
So I have such nastiness as this to get at the button elements (in the
dialog open callback):
open: function(e) {
var $dialog = $(e.target);
var $actionButton = $('.ui-dialog-buttonpane button:first', $
(e.target).parent());
$actionButton.addClass('ui-priority-primary');
tf.top_gifts.set_button_state($actionButton, 'enabled', false);
}
In terms of the UI Widget theming itself, again, I find myself
struggling with a very common requirement of styling the primary and
secondary buttons separately. As things stand, Interaction States and
Interaction Cues are entirely autonomous. However, it is not uncommon
to want to style your primary (action) button differently to your
secondary (cancel, back etc.) buttons. In my specific example, action
buttons throughout my application are blue, cancel/back (non-
action==secondary) buttons are grey. This setup is not currently
achievable with the UI widget theme.
Anyway, the latter States/Cues blending would be a really nice feature
to provide total control over UI elements. But the lack of access/
control to the buttons object and elements is proving to be a real
problem. While I have it working, I am not happy with the code I have
had to write to do so.
If I am fundamentally missing something, please--point me in the right
direction. Otherwise, I would love your feedback on my comments/
suggestions.