是否有 Javascript UI 框架或工具包来帮助创建模拟用户界面?

软件推荐 javascript 用户界面
2021-10-14 03:56:18

还记得我们有带指针、拨动开关、旋转拨号盘、发光摇杆和按钮的仪表吗?我正在尝试使用我正在开发的基于 Web 的控制面板重新创建它,但我遇到了一些困难。

我找到了很多关于如何模拟一个包含所有需要的图形的模拟仪表的例子,但是我没有找到任何可以帮助我创建其他控制元素的东西。我还研究了古老的 jQuery UI 库,但还没有找到任何具有模拟主题的东西。它有很多滑块和选择器之类的东西,但都是现代的。

这是我开始思考的事情之一,我不可能是唯一一个想要构建这样的东西的人,所以我希望有一个存在的库,并与制作所需的图形和样式一起分发一切正常。

必备功能

  • 为模拟风格的控制元素和仪表提供工作所需的所有图形和风格
  • 兼容 IE 10+、最新和以前版本的 Chrome 和 Firefox
  • 至少有稀疏的文档

很高兴拥有

  • 在任何OSI 批准的软件许可下发布
  • 更好的浏览器兼容性(IE 9+)、Opera Mini 等
  • 在移动设备上不是白痴
  • 轻微的足迹

语境

通过在“模拟控制台”上进行谷歌图像搜索,可以找到我想要实现的最佳物理示例。其中很多都与声音有关,但它们显示了我想要获得的旧风格感觉。我想在这里包含一些来自该结果的图像,但我不想侵犯任何人的版权。

我正在做一些事情,让我可以从很多地方关注很多事情,我正在努力让它变得更有趣。这些东西很适合通过经典风格的“VU”仪表进行可视化,并且可以在一定程度上控制按钮和旋钮非常有意义的地方。

我已经多次看到使用 Flash 完成此操作(想想 .. Enigma模拟器),但我似乎无法找到一个纯 Javascript 解决方案,我觉得必须有一个,但我只是没有找到它。

注意:我发现(并且正在使用)jQuery Analogue Meter我希望的是一个更完整的套件,它具有匹配的按钮/开关/摇杆等。

1个回答

有 YUI 拨号控制:http: //yuilibrary.com/yui/docs/dial/

和滑块控件:http: //yuilibrary.com/yui/docs/slider/

你可能可以从那开始。他们都有几种不同的皮肤可以从 YUI 获得(例如:http: //yuilibrary.com/yui/docs/slider/#skins)。

按钮控件:http: //yuilibrary.com/yui/docs/button/可以用作切换开关或按钮,但我不确定他们是否已经有皮肤。如果没有,我的建议是使用这些,并在许可许可下从网络上提取一堆图像,并使用它们为按钮设置皮肤。我知道 YUI 可以很容易地使用 CSS 来为他们的控件设置皮肤。

查看http://yuilibrary.com/yui/docs/button/cssbutton.html上的图标按钮,了解如何执行此操作的示例。

我不确定你会怎么处理带灯的摇杆。我的猜测是它与按钮非常相似。

对于仪表控制,可能是他们在这里完成的一堆进度条:http: //yui.github.io/yui2/docs/yui_2.9.0_full/examples/progressbar/pb_vumer.html但我会使用来自同一作者的 YUI3 版本:http: //satyam.com.ar/yui/3.0.0/progressbar/

对于针,你想要的是谷歌的仪表图表:https ://developers.google.com/chart/interactive/docs/gallery/gauge

我认为 YUI 没有等价物。

我喜欢 YUI 控件最好的部分是它们都可以访问,所以你可以拥有一个很棒的 UI,它仍然适用于有屏幕阅读器的人,或者键盘用户。

最后,如果您确实为其余控件构建了皮肤,那么将它们提交回 YUI 会很棒。

希望这可以帮助。