Search jQuery

jQuery Forum

Dialog Buttons

in Developing jQuery UI • 11 years ago

<div><div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">I'd like to propose the following options for specifying buttons on the dialog. </span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">
</span></div><div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span class="Apple-style-span" style="font-size: small;"><font class="Apple-style-span" face="arial, helvetica, sans-serif">buttons: [</font></span></span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span class="Apple-style-span" style="font-size: small;"><font class="Apple-style-span" face="arial, helvetica, sans-serif"> { id: 'button id',</font></span></span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span class="Apple-style-span" style="font-size: small;"><font class="Apple-style-span" face="arial, helvetica, sans-serif"> label: 'The Label',</font></span></span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"> click: function() { ... },</span></div><div>
<span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"> priority: 'primary | secondary | default',</span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"> position: 'left | right',</span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"> icon: 'ui-icon',</span></div><div>
<span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"> iconPosition: 'left | right'</span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span class="Apple-style-span" style="font-size: small;"><font class="Apple-style-span" face="arial, helvetica, sans-serif"> },</font></span></span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span class="Apple-style-span" style="font-size: small;"><font class="Apple-style-span" face="arial, helvetica, sans-serif"> ...</font></span></span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span class="Apple-style-span" style="font-size: small;"><font class="Apple-style-span" face="arial, helvetica, sans-serif">]</font></span></span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">
</span></div><div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">Cheers,</span></div>
<div><span class="Apple-style-span" style="border-collapse: collapse; white-space: pre-wrap; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">- Jonathan</span></div></div>

Replies(11)

rdworth

Re: Dialog Buttons

11 years ago

Interesting. I'm wondering if the next change to dialog buttons shouldn't be to have them be jQuery UI Buttons? If the buttons have ids, maybe go directly to them with the button plugin for getting and setting their button properties? instead of going through dialog, which can instead just focus on creating the button pane.<div>
</div><div>- Richard

scott.gon..

Re: Dialog Buttons

11 years ago

On Thu, Aug 27, 2009 at 7:19 PM, Richard D. Worth <span dir="ltr"><<a href="mailto:rdworth@gmail.com">rdworth@gmail.com</a>></span> wrote:

scott.gon..

Re: Dialog Buttons

11 years ago

There's an existing ticket to add this functionality: <a href="http://dev.jqueryui.com/ticket/4344">http://dev.jqueryui.com/ticket/4344</a><div>
</div><div>At this point it's really waiting on two things: 1) the button plugin, 2) deciding on an API for specifying buttons in a dialog.</div>
<div>
</div><div><div>

guest

Re: Dialog Buttons

11 years ago

<html><body bgcolor="#FFFFFF"><div>+1 on finishing the button plugin and using those in dialog so we can rake advantage of the full set of button options.</div><div>
Todd Parker<div><a href="mailto:todd@filamentgroup.com">todd@filamentgroup.com</a></div></div><div>
On Aug 27, 2009, at 7:19 PM, "Richard D. Worth" <<a href="mailto:rdworth@gmail.com">rdworth@gmail.com</a>> wrote:
</div><div></div><blockquote type="cite"><div>Interesting. I'm wondering if the next change to dialog buttons shouldn't be to have them be jQuery UI Buttons? If the buttons have ids, maybe go directly to them with the button plugin for getting and setting their button properties? instead of going through dialog, which can instead just focus on creating the button pane.<div>
</div><div>- Richard

rdworth

Re: Dialog Buttons

11 years ago

<div>Something like that. Of course that brings up the pain point of having to go to the dialog container (ui-dialog) to be able to .find the buttons.</div><div>
</div><div>- Richard</div>

jonathan...

Re: Dialog Buttons

11 years ago

<div class="gmail_quote">2009/8/27 Scott González <span dir="ltr"><<a href="mailto:scott.gonzalez@gmail.com">scott.gonzalez@gmail.com</a>></span>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
<div class="im">On Thu, Aug 27, 2009 at 7:19 PM, Richard D. Worth <span dir="ltr"><<a href="mailto:rdworth@gmail.com" target="_blank">rdworth@gmail.com</a>></span> wrote:
</div><div class="gmail_quote"><div class="im">
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Interesting. I'm wondering if the next change to dialog buttons shouldn't be to have them be jQuery UI Buttons? If the buttons have ids, maybe go directly to them with the button plugin for getting and setting their button properties? instead of going through dialog, which can instead just focus on creating the button pane.</blockquote>
<div>
</div></div><div>What are you envisioning with this?</div><div>
</div><div>$('#dialog').dialog({</div><div>   buttons: [</div><div>   $('<button></button>').button({ ... }),</div>
<div>
   $('<button></button>').button({ ... })</div><div>   ]</div><div>});</div><div>
</div><div>or:</div><div>
</div><div>$('#dialog').dialog({</div><div>   buttons: [</div><div>   '#foo',</div>
<div>   '#bar'</div><div>   ]</div><div>})</div><div>.find('#foo').button({ ... )</div><div>.end.find('#bar').button({ ... });</div><div>
</div><div>or something else?</div></div></blockquote>
<div>
</div><div>I would think that the button dialog would pass through the button options internally. So something similar to:</div><div>
</div><div>buttons: [{ ... }, { ... }]</div><div>
</div><div>and then internally as dialog iterates to create the buttons: $('<button></button>').button({options});</div>
<div>
</div><div>This would also facilitate allowing any additional attributes for buttons that would be specific to dialogs. Such as if you could specify either right or left foating.</div><div>
</div><div>- Jonathan</div>
<div> </div></div>

rdworth

Re: Dialog Buttons

11 years ago

jonathan...

Re: Dialog Buttons

11 years ago

<div>I think in this case it may make sense to go through the dialog as such:</div><div>
</div><div>$('#dialog').dialog('getbutton', 'id').button('label', 'New Label');</div><div>
</div>- Jonathan

rdworth

Re: Dialog Buttons

11 years ago

<div><div>Or</div><div>
</div><div>$('#dialog').dialog('button#id').button('label', 'New label');</div><div>
</div><div>:)</div><div>
</div><div>- Richard

maestrosgr

Re: Dialog Buttons

11 years ago

Is there a way to change the buttons (add,remove,change title, change
functionality) AFTER I init the dialog?

rdworth

Re: Dialog Buttons

11 years ago

For now, you have to replace all the buttons at once by passing a new buttons hash<div>
</div><div>$('#dialog').dialog('option', 'buttons', { ... });</div><div>
</div><div>- Richard</div><div>

Top Reply

Response title

Attachments

jQuery Forum

Dialog Buttons

Replies(11)

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Re: Dialog Buttons

Statistics

Tags

Actions

Related Posts