8

I'm looking for a iPhone-like "picker" control that I'm able to use on the web.

Accessibility is not a concern. JavaScript will be available on all clients and the web app will be run on an environment provided to the user. If the solution could gracefully degrade to a select box though, that would be great. Flash & Silverlight are not ideal (for reasons I don't care to jump into) but similar solutions in Flash & Silverlight may be appreciated by others.

Here's an example of the control on an iPhone:

Screenshot

Community
  • 1
  • 1
sjstrutt
  • 5,625
  • 6
  • 25
  • 21
  • Can you describe how this differs from a select box? How do you scroll it? Does it need to be smooth scrolling, etc? – nickf Mar 17 '09 at 02:54
  • Accessibility may not be a concern, but is usability? I can't imagine using something like that with a mouse. Swiping with a finger is what makes that a good interface for the iPhone. I predict difficulty for mouse and keyboard users. – Rob Kennedy Mar 17 '09 at 02:57
  • @nickf Scrolling will be done via clicking (and holding) the control and dragging the mouse vertically. I was able to find a piece of code, but it only works with Mobile Safari. http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/11 – sjstrutt Mar 17 '09 at 02:59
  • @Rob Kennedy, Usability is not a concern in this case, either. This application will be used in a touchscreen environment, but not the iPhone. The solution should be treated like a mouse is being used because the touch screen driver acts as a mouse. – sjstrutt Mar 17 '09 at 03:01

3 Answers3

13

I know this question is somewhat old, but since I have an answer I could just as well give it. Other people can still be looking for it (just like I did). I created this control to use it as a plugin with jQuery. See my blog:

http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/

Marino van der Heijden
  • 528
  • 4
  • 10
0

It sounds like you're looking for something already built, which I haven't seen, but it looks like you could build one by using YUI's Carousel Control plus Animations, as this section on the carousel control page explains.

Good luck!!

carols10cents
  • 6,943
  • 7
  • 39
  • 56
  • That's not a bad suggestion. How would one apply that style to a select box though? I think the better route to go is to re-style a vertical slider like is often found in jQuery. I haven't delved into a solution met, but I'll post an update here if I ever complete one. – sjstrutt Mar 25 '09 at 03:20
0

ComponentOne may have what you're looking for. Check out the C1 Studio for iPhone at http://www.componentone.com. It's a suite of ASP.NET controls which mimic the Native look and feel of iPhone UI elements.

Tim Sullivan
  • 16,808
  • 11
  • 74
  • 120
  • Yes, Studio for iPhone has exactly what you need. Check out PickerView, which is included in the studio. http://www.componentone.com/SuperProducts/PickerViewiPhone/ – Banzor Apr 10 '10 at 02:00