JavaScript的UI模仿(特别是UIDatePicker和UIPicker)

时间:2011-04-12 00:28:56

标签: javascript html ipad uidatepicker jquery-ui-datepicker

有没有人知道一种模仿UIDatePicker的方法,以及HTML和HTML中更普遍的UIPicker iOS控件。的JavaScript?

UIDatePicker UIPicker

有谁知道这样的解决方案?我见过其他iPhone / iPad控件的JavaScript模仿,比如UIPopoverController。我真的希望能够提供这种输入日期的方式(与jQuery UI的datepicker等解决方案相比)。看起来在鼠标滚轮和iPad上都很容易使用。那么,有什么建议吗?

3 个答案:

答案 0 :(得分:2)

存在所有这些奇怪的小部件的一个原因是因为在触摸屏上打字很烦人。您可能不希望在桌面上使用这种小部件,原因与很少人喜欢用鼠标绘制图片的原因相同:使用鼠标控制的控件与使用鼠标获得的控件实际上并不相同触摸屏。

出于这个原因,已经实现了这样的功能的库专门用于移动设备,并且不能确保与IE6等旧浏览器的兼容性。如果您只需要支持优秀的Webkit浏览器,并且您不介意为此目的使用大型框架,那么Sencha Touch的Picker运行良好(see this page for an example)。 Sencha's不提供鼠标轮支持。

我不知道是否有人在大型框架之外实现了一个,但环顾四周不会有什么坏处。

---编辑---

之前的StackOverflow问题(Date Picker for iPhone Web Application)中列出的解决方案被选为答案,但它仅适用于移动设备 - 可能只适用于iPhone。您可以查看代码并编写一个可在桌面上运行的代码。

答案 1 :(得分:1)

@theazureshadow指出,对于基于鼠标的体验来说这可能是一个坏主意。

对于希望在触摸屏浏览器(智能手机或平板电脑,iOS或Android)中进行此操作的人,以及我的研究,这是一个很好的解决方案:http://demo.mobiscroll.com/。 (见this answer

如果您只针对iOS(iPad和iPhone),则此代码具有更好的原生iOS感觉:http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

答案 2 :(得分:1)

我今天一直在寻找同样的东西,并发现了这个非常好的实现:

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

有一个zip文件,其中包含您可以使用的工作演示。我没有创建这个,但是我要修改它以用于我正在进行的项目。