Search jQuery

jQuery Forum

scott.gon..

button plugin review

in Developing jQuery UI • 11 years ago

The merge of button, toggleButton and radioButton is complete. It would be great to have a sanity check if people can play around with the plugin and make sure everything is working as expected.

Replies(8)

guest

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Looks great, but if you toggle the radio or check buttons on, then hit the "toggle widget" button to go back to the basic experience (form elements), when you toggle back to the button-ized version, these buttons don't reflect the proper state of their checkboxes or radios (they all look de-selected). <div>
</div><div>Looks like you need to jiggle the handle to make the buttons sync up with the checked state.<div>
</div><div><a href="http://jquery-ui.googlecode.com/svn/branches/dev/tests/visual/button/default.html#">http://jquery-ui.googlecode.com/svn/branches/dev/tests/visual/button/default.html#</a>
<div>
</div><div>_t
<div>
<span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><div style="font-family: Lucida Grande; font-size: 12px; "><div class="AppleMailSignature" id="A9122718-BF83-48D7-A0E5-26C15F6CC4F2"><div style="font-family: Lucida Grande; font-size: 12px; "> </div><div style="font-family: Lucida Grande; font-size: 12px; ">todd.parker .: . filament group inc. </div><div style="font-family: Lucida Grande; font-size: 12px; ">102 south street #3 boston, ma 02111 </div><div style="font-family: Lucida Grande; font-size: 12px; "> </div><div style="font-family: Lucida Grande; font-size: 12px; ">email + todd@filamentgroup.com </div><div style="font-family: Lucida Grande; font-size: 12px; ">phone + 617.482.7120 </div><div style="font-family: Lucida Grande; font-size: 12px; ">fax + 617.687.0212</div><div style="font-family: Lucida Grande; font-size: 12px; ">web + filamentgroup.com</div></div></div> 
</div>
<div><div>On Dec 30, 2009, at 4:50 PM | December 30, 2009, Scott González wrote:</div> The merge of button, toggleButton and radioButton is complete. It would be great to have a sanity check if people can play around with the plugin and make sure everything is working as expected.
<div> </div>

guest

Re: button plugin review

11 years ago

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">More of a demo nit, but can you add .2em to the toolbar style:<div>
</div><div><div ruleid="#toolbar/42" role="presentation" class="cssRule insertInto "><div role="listitem" class="cssHead focusRow ">#toolbar {</div><div role="group" class=" "><div role="listbox" class="cssPropertyListBox "><div role="option" class="cssProp editGroup focusRow ">margin-top:2em;</div><div role="option" class="cssProp editGroup focusRow ">padding:0.2em;</div></div></div><div role="presentation" class="editable insertBefore ">}</div></div><div><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><div style="font-family: Lucida Grande; font-size: 12px; "><div class="AppleMailSignature" id="A9122718-BF83-48D7-A0E5-26C15F6CC4F2"><div style="font-family: Lucida Grande; font-size: 12px; "> </div><div style="font-family: Lucida Grande; font-size: 12px; ">todd.parker .: . filament group inc. </div><div style="font-family: Lucida Grande; font-size: 12px; ">102 south street #3 boston, ma 02111 </div><div style="font-family: Lucida Grande; font-size: 12px; "> </div><div style="font-family: Lucida Grande; font-size: 12px; ">email + <a href="mailto:todd@filamentgroup.com">todd@filamentgroup.com</a> </div><div style="font-family: Lucida Grande; font-size: 12px; ">phone + 617.482.7120 </div><div style="font-family: Lucida Grande; font-size: 12px; ">fax + 617.687.0212</div><div style="font-family: Lucida Grande; font-size: 12px; ">web + <a href="http://filamentgroup.com">filamentgroup.com</a></div></div></div> 
</div>
<div><div>On Dec 30, 2009, at 4:50 PM | December 30, 2009, Scott González wrote:</div> The merge of button, toggleButton and radioButton is complete. It would be great to have a sanity check if people can play around with the plugin and make sure everything is working as expected.
<div> </div>

joern.zae..

Re: button plugin review

11 years ago

Already fixed :-)
Jörn

guest

Re: button plugin review

11 years ago

<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Perfect, looks great now. Thanks!
<div>
<span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Arial; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><span class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Lucida Grande; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><div style="font-family: Lucida Grande; font-size: 12px; "><div class="AppleMailSignature" id="A9122718-BF83-48D7-A0E5-26C15F6CC4F2"><div style="font-family: Lucida Grande; font-size: 12px; "> </div><div style="font-family: Lucida Grande; font-size: 12px; ">todd.parker .: . filament group inc. </div><div style="font-family: Lucida Grande; font-size: 12px; ">102 south street #3 boston, ma 02111 </div><div style="font-family: Lucida Grande; font-size: 12px; "> </div><div style="font-family: Lucida Grande; font-size: 12px; ">email + <a href="mailto:todd@filamentgroup.com">todd@filamentgroup.com</a> </div><div style="font-family: Lucida Grande; font-size: 12px; ">phone + 617.482.7120 </div><div style="font-family: Lucida Grande; font-size: 12px; ">fax + 617.687.0212</div><div style="font-family: Lucida Grande; font-size: 12px; ">web + <a href="http://filamentgroup.com">filamentgroup.com</a></div></div></div> 
</div>
<div><div>On Dec 30, 2009, at 5:17 PM | December 30, 2009, Jörn Zaefferer wrote:</div> Already fixed :-)
Jörn

scott.gon..

Re: button plugin review

11 years ago

After talking to Jörn about handling radio buttons, I'd like to change the button plugin to not auto-init other radios with the same name. Radio buttons would still work properly visually, but if you want all radio buttons of the same name to become buttons, you'd either have to call .button() on all of them or call .buttons() on a container. This makes it much simpler for us to handle dynamic pages where radio options may be added and removed.

scott.gon..

Re: button plugin review

11 years ago

I'd like to add an option to the buttons plugin called autoInit which would take a selector of elements to automatically turn into buttons. The default would be ':button, :submit, :reset, :checkbox, :radio, a'.