9

我正在开发一个音乐编辑器/音序器应用程序，它将用 JavaScript+HTML5 编写，并将利用 canvas 元素和 Chrome 的 Web 音频 API（我已经有一个简单的原型工作）。

我不太确定的一件事是如何为此实现 GUI。它需要有许多不同的视图，我可能希望将每个视图放在不同的可点击“选项卡”中，在给定时间在前台显示一个选项卡，并隐藏所有其他选项卡。我只是不确定如何实现所有这些选项卡。

将每个选项卡实现为不同的 HTML 层并让按钮控制哪个层显示在顶部会更好吗？按下选项卡按钮时动态（重新）生成 HTML 会更好吗？

感谢您的建议。

4

4 回答 4

5

将每个选项卡实现为不同的 HTML 层并让按钮控制哪个层显示在顶部会更好吗？按下选项卡按钮时动态（重新）生成 HTML 会更好吗？

我倾向于生成一次内容并按需显示/隐藏它，特别是如果大部分工作是在浏览器中完成的，并且在与页面上的元素交互时没有向服务器发出同步请求。见脚注 1

显示选项卡的内容时...
假设每个选项卡的内容生成速度很快，您可以通过仅在第一次请求选项卡时为其创建内容来提高应用程序的效率。这样，如果从未访问过该选项卡，则不会使用任何资源。

隐藏选项卡的内容时...
使用多媒体时，您可能需要在隐藏内容时执行其他操作。例如，视频不会因为您隐藏它而停止播放。对于您的音频应用程序，您可能需要停止播放当前序列。

有许多选项卡控件可用，例如jQuery UI 选项卡（免费）和滑动选项卡（许可但价格低廉）。

其他场景
选项卡应该用于在主要内容块之间切换，例如文档（例如浏览器选项卡）和/或经常使用的功能（例如，具有联系信息选项卡和工作历史选项卡的人事表格）。其他场景可能更适合对话（模态或非模态）。

使用音频示例，如果您有一个标有“节奏”的按钮，我希望它会在我当前视图的顶部打开一个小对话框窗口，而不是将我带到一个新选项卡。Roland 的工作站键盘使用这种范例。主要内容替换当前视图，但设置/配置窗口通常会在现有视图顶部弹出。

jQuery UI也有一个用于此目的的对话框插件。如果您精通 JavaScript 并针对较新的浏览器，编写自己的简单对话框并不难。

1 对于交互式客户端-服务器关系，动态生成内容可能仍然是完全可以接受的，但它引入了额外的考虑，例如将浏览器中的内容与服务器上的数据模型（如果有）同步，提交不需要的表单字段（增加请求的大小）、整体页面大小等。

于 2012-04-25T19:20:54.517 回答
2

我建议查看JQuery UI库。更具体地说，它提供的选项卡功能http://jqueryui.com/demos/tabs/。

将数据加载到选项卡中的简单经验法则。小而简单，预先加载。大而复杂，按需加载。如有疑问，请按需加载。

于 2012-04-25T19:20:33.097 回答
0

如果您正在寻找复杂的 UI，我建议您查看Dojo或Ext JS。它们都为您提供了一个更接近 Java 的 Swing 框架的 UI 框架。

但是，如果您正在寻找选项卡，并且只查找选项卡，那么jQuery UI非常棒。

于 2012-04-25T21:21:15.730 回答
0

如果您在画布上工作，请在画布上制作您的 GUI。严重地。在画布前使用 div 很无聊。我都试过了，我更喜欢使用画布。

最简单的方法是创建一个“按钮”类，它将获取图像并在画布上为该图像定义一个可点击区域（如果你想要像素检测，有一种方法使用屏幕外画布和 getpixel 来检查鼠标下的颜色和东西，太长在这里解释）。

然后，一旦有了按钮或任何 gui 类，就可以将它们放在画布上，而不必管理多个 html 元素。此外，画布前的一些 html 元素通常具有奇怪的行为。这就是为什么我更喜欢直接在画布上创建我的 gui。一开始比较难，但是合适。

并且请允许放置多个方块而无需重新单击（只需使用 mouseDown 变量）

于 2012-04-25T21:35:55.293 回答