I'm a passionate web developer and systems architect. I work as an independent consultant specializing in EPiServer and search.
About web development with ASP.NET and EPiServer, fatherhood and other adventures in my digital jungle
Recently me and my colleague Johan Ahlin have been on the hunt for jQuery plugins that enable styling of HTML elements that are normally hard to style, such as dropdowns. The most recent example was a slider where the visitor is able to select a value on a scale by dragging a handle. This clearly maps to an ordinary list of radio buttons. We have found a lot of slider plugins but almost all of them expects the values that the user can select between with the slider as javascript parameters. Similarly for dropdown plugins most expects to find the values for the dropdown in an unordered list element. In my humble but ranting opinion its obvious that the source for the values should be a regular dropdown.
So, my question is this: there is a lot of talk about progressive enhancement among UI developers, but where is it? It might mean slightly more code to make a dropdown plugin that transforms a SELECT element instead of a UL element but doing so means that the function will work for visitors that don’t have javascript and for the visually impaired. Doing so also means that the markup is semantically correct and that the server code developers are able to ignore the UI code and just render, and save input from, ordinary HTML elements.
Anyhow, here are two great plugins that we have found for dropdowns and sliders that actually does progressive enhancement. Kudos to their developers!
jQuery UI Slider by Wilfred Nas
Stylish Select Box by Scott Darby
PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.
This blog is built with EPiServer Community, EPiServer CMS, ASP.NET MVC and a bunch of other great products. The source code is available for download at the projects page, where you also can read more about this site and my other projects.
read more
Comments
Bohdan Ganicky 2 years ago
Hi, you should really check out work of Filament Group guys.
Select replacement:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
Slider from select:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
Joel Abrahamsson 2 years ago
Looks like a great tip Bohdan, thanks!