iPad UI 的 JavaScript 模拟（特别是 UIDatePicker 和 UIPicker）

Posted 2023-05-07

【中文标题】iPad UI 的 JavaScript 模拟（特别是 UIDatePicker 和 UIPicker）

【英文标题】：JavaScript Mimics of the iPad's UI (specifically, UIDatePicker and UIPicker)

【发布时间】：2011-08-03 11:58:00

【问题描述】：

有人知道在 html 和 javascript 中模仿 UIDatePicker 和更通用的 UIPicker ios 控件的方法吗？

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

【参考方案1】：

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

因此，已实现此类功能的库专门针对移动设备执行此操作，并且不能确保与旧版浏览器（例如 IE6）的兼容性。如果您只需要支持好的 Webkit 浏览器，并且不介意为此目的使用大型框架，Sencha Touch 的 Picker 就可以很好地工作 (see this page for an example)。 Sencha 不提供鼠标滚轮支持。

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

--- 编辑 ---

选择了上一个 *** 问题 (Date Picker for iPhone Web Application) 中列出的解决方案作为答案，但它仅适用于移动设备 — 可能仅适用于 iPhone。您可以查看代码并编写可以在桌面上运行的代码。

【讨论】：

我建议它更多是因为它看起来很酷并且展示了他们可以用触摸屏做什么。在我的 android 上设置一个计时器（幸运的是，它不像 iphone 那样使用这个比喻，但不幸的是确实使用了一点）比在我可以输入 3 和 0 的旧诺基亚上花费的时间要长得多比旋转到 60 元素轮的另一侧，多旋转一点，向后一点，现在慢慢地，明白了。有些应用程序确实为这些事情提供了一个数字键盘，我不能说我觉得按它比摆弄***更烦人两到三倍。

@Jon：这是一个公平的观点，尽管我个人仍然更喜欢选择日期而不是输入日期。您不必担心预期的格式（日/月顺序）或按特殊键（日期分隔符）。这是一种更加可控的体验。

日期并没有那么糟糕（较短的范围），尽管在我看来，日历选择器（用于明确输入）与文本框（用于快速输入）相结合会胜出。在手机大小，这是一个更接近的电话。为了挑选分钟，设计师的炫耀被置于我作为用户的便利之上。

【参考方案2】：

@theazureshadow 认为这对于基于鼠标的体验来说可能是个坏主意。

对于希望在触摸屏浏览器（智能手机或平板电脑、iOS 或 Android）中执行此操作的任何人，根据我的研究，这是一个很好的解决方案：http://demo.mobiscroll.com/。 （发现于this answer）

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

【参考方案3】：

我今天一直在寻找同样的东西，发现这个实现非常好：

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

有一个包含工作演示的 zip 文件，您可以使用它。我没有创建它，但我将为我正在处理的项目修改它。