Checkbox

Page history last edited by Todd Parker 11 mos ago

 

type: widget

release: 0.0

priority: high || medium || low

status: in planning || in development || complete

documentation: url || N/A

demo: url || N/A

 


 

1 - Description:

 

This is a custom checkbox for situations where a standard checkbox does not fit the visual design system. Ideally, these should employ progressive enhancement and be created and works as a proxy to a standard checkbox. All standard checkbox behavior and accessibility features should be included in this widget. If we replace a standard widget, it should never lose features.

 


 

2 - Visual Design:

 

 


 

 

3 - Functional Specifications/Requirements:

 

(Detailed descrition of how the script will be structured: defaults, options, architecture, extensibility, etc.)

 


 

4 - Markup & Style:

 

     4.1 Initial markup examples

 

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

 

     4.2 Recommended transformed HTML markup

 

     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

 

     4.3 Accessibility recommendation

 

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

 

     4.4 CSS & Theme

 

    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

 


 

5 - Latest version of plugin:

 

(Link to the latest version in the jQuery UI trunk here)

 


 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 


 

 

 

 

Comments (5)

profile picture

tronics said

at 3:43 pm on Apr 29, 2009

If I could vote here for features to be added to themeroller, this one together with all standard HTML form replacements would be of highest priority. :)

profile picture

jeremylea said

at 12:12 pm on Jun 26, 2009

I believe my checkbox plugin, http://plugins.jquery.com/project/ui-checkbox, meets all the requirements for this... Although it could do with some testing and code cleanup.

profile picture

Jonathan Gotti said

at 12:46 pm on Jun 26, 2009

Hi just have a quick look at your plugin.
First it look nice in firefox3 at least. but not under ie6, where it become really difficult to see where are the inputs.
Your plugin make huge use of browser detection and imho should be avoid if possible.
I see that you add extra span arround the original input but leave the original input in place, i think that to achieve a consistent look whatever browser is used you perhaps should simply replace the native input element with a proxy (your span element may do the job) and delegates events to the native element and vice-versa so toggling the visual enhanced checkbox would toggle the hidden native element and changing the state of the original element should be reflected in the enhanced visible element.
Anyway thanks for your job, hope you will enhance it and i'll can use it soon to enhanced my forms to a full ui-theme available form :)

profile picture

scottjehl said

at 8:40 am on Jul 2, 2009

Hi all,
Over at Filament Group, we just put out an article with a greatly simplified approach to this checkbox plugin (and for radio inputs as well). We think this approach should really be considered for UI, especially given the simplicity and native accessibility it affords.
It's not themeroller-ready yet, though it could be made so with minimal effort.

You can check it out here:
http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

Please leave any feedback on the article, and we'll commit a UI-framework based version to UI labs shortly.
Thanks!

profile picture

sompylasar said

at 3:42 pm on Aug 22, 2009

I've recently created checkbox & radiobutton for my job and decided to follow the jQuery UI & Themeroller specs. Please, have a look:
http://maninblack.info/_proj/jquery-ui-checkbox-radiobutton/demos/checkbox-radiobutton/

You don't have permission to comment on this page.