我正在开发一个用JavaScript + HTML5编写的音乐编辑器/音序器应用程序，它将使用canvas元素和Chrome的Web Audio API（我已经有simple prototype working）。
我不太确定的一件事是如何为此实现GUI。它需要有许多不同的视图，我想将每个视图放在一个不同的可点击“选项卡”中，在给定时间前景中有一个选项卡，其他所有隐藏。我只是不确定如何实现所有这些标签。
将每个标签实施为不同的HTML图层并使用按钮控制哪个图层显示在顶部会更好吗？当按下标签按钮时，是否更好地（重新）生成HTML？
感谢您的建议。
答案 0 :(得分：5)
将每个标签实施为不同的HTML图层会更好吗？ 有按钮控制哪一层显示在顶部？会更好吗？ 而是在选项卡按钮的时候（重新）生成HTML 按下了吗？
我倾向于生成一次内容并按需显示/隐藏它，特别是如果大部分工作在浏览器中完成，并且在与页面上的元素交互时没有向服务器发出同步请求。 >见脚注1
显示标签的内容时......
假设每个选项卡的内容生成速度很快，只需在第一次请求时为选项卡创建内容，就可以提高应用程序的效率。这样，如果从不访问该选项卡，则不使用任何资源。
隐藏标签内容时......
使用多媒体时，您可能需要在隐藏内容时执行其他操作。例如，视频不会因为您隐藏而停止播放。对于音频应用程序，您可能需要停止播放当前序列。
有许多标签控件可用，例如jQuery UI tabs（免费）和Sliding Tabs（许可但价格便宜）。
其他情景
标签应该用于在主要内容块之间切换，例如文档（例如浏览器标签）和/或常规使用的功能（例如，具有用于联系信息的标签和用于雇用历史的另一个标签的人员表格）。其他场景可能更适合对话（模态或非模态）。
使用音频示例，如果你有一个标有“tempo”的按钮，我希望它在我当前视图的顶部打开一个小对话窗口而不是带我到一个新标签。罗兰的workstation keyboards使用了这个范例。主要内容替换当前视图，但设置/配置窗口通常会弹出现有视图。
jQuery UI也有一个用于此目的的对话框插件。如果您精通JavaScript并针对较新的浏览器，那么编写自己的简单对话框并不难。
1通过交互式客户端 - 服务器关系，动态生成内容仍然可以完全接受，但它引入了其他注意事项，例如浏览器中的内容与服务器上的数据模型同步（如果任何），提交不需要的表单字段（增加请求的大小），整体页面大小等
答案 1 :(得分：2)
我建议您查看JQuery UI库。更具体地说，它提供的标签功能http://jqueryui.com/demos/tabs/。
将数据加载到标签中的简单经验法则。 小而简单，预先加载。 大而复杂，按需加载。 如有疑问，请按需加载。
答案 2 :(得分：0)
答案 3 :(得分：0)
如果您正在使用画布，请在画布上执行GUI。认真。在画布前使用div很无聊。我试过了两个，我更喜欢使用画布。
最简单的方法是创建一个“按钮”类，它将拍摄图像并在画布上为此图像定义可点击区域（如果您想要像素检测，有一种方法可以使用屏幕外画布和getpixel来检查颜色在鼠标和东西之下，这里解释的时间太久了。）
然后，一旦你有你的按钮或任何gui类，你可以把它们放在你的画布上，你将不必管理多个html元素。 此外，画布前面的一些html元素通常具有奇怪的行为。这就是为什么我更喜欢直接在画布上创建我的gui。在开始时更难但正确。
并且请，可以放置多个正方形而无需重新点击（只需使用mouseDown变量）