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

发布于 2024-10-31 16:23:34 字数 374 浏览 3 评论 0原文

有谁知道一种方法来模仿 UIDatePicker 以及 HTML 和 HTML 中更通用的 UIPicker iOS 控件吗? JavaScript?

UIPicker UIPicker

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

Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?

UIDatePicker UIPicker

Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

分開簡單 2024-11-07 16:23:34

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

因此,实现此类功能的库专门针对移动设备,并且不确保与 IE6 等旧版浏览器的兼容性。如果您只需要支持良好的 Webkit 浏览器,并且不介意为此目的使用大型框架,Sencha Touch 的 Picker 效果很好(请参阅此页面的示例)。 Sencha 不提供鼠标滚轮支持。

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

--- 编辑 ---

之前的 StackOverflow 问题中列出的解决方案 (iPhone 的日期选择器Web 应用程序)被选为答案,但它仅适用于移动设备 — 也许仅适用于 iPhone。您可以查看代码并编写一个可以在桌面上运行的代码。

One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.

For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.

I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.

--- EDIT ---

A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.

我的痛♀有谁懂 2024-11-07 16:23:34

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

对于任何希望在触摸屏浏览器(智能手机或平板电脑、iOS 或 Android)中执行此操作的人来说,根据我的研究,这是一个很好的解决方案:http://demo.mobiscroll.com/。 (可在此答案中找到)

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

@theazureshadow has a point that this is probably a bad idea for a mouse-based experience.

For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)

If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch

無處可尋 2024-11-07 16:23:34

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

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

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

I've been looking for the same thing today and found this pretty good implementation:

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

There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文