Max*_* C. 9 html javascript user-interface html5 tabs
我正在开发一个用JavaScript + HTML5编写的音乐编辑器/音序器应用程序,它将使用canvas元素和Chrome的Web Audio API(我已经有一个简单的原型工作).
我不太确定的一件事是如何为此实现GUI.它需要有许多不同的视图,我想将每个视图放在一个不同的可点击"选项卡"中,在给定时间前景中有一个选项卡,其他所有隐藏.我只是不确定如何实现所有这些选项卡.
将每个标签实现为不同的HTML图层并使用按钮控制哪个图层显示在顶部会更好吗？当按下标签按钮时,是否更好地(重新)生成HTML？
您的建议表示赞赏.
将每个标签实现为不同的HTML图层并使用按钮控制哪个图层显示在顶部会更好吗？当按下标签按钮时,是否更好地(重新)生成HTML？
我倾向于生成一次内容并按需显示/隐藏它,特别是如果大多数工作是在浏览器中完成的,并且在与页面上的元素交互时没有向服务器发出同步请求.见脚注1
显示选项卡的内容时...
假设每个选项卡的内容生成速度很快,只需在第一次请求选项卡时创建选项卡的内容,就可以提高应用程序的效率.这样,如果从不访问该选项卡,则不使用任何资源.
隐藏选项卡的内容时...
使用多媒体时,您可能需要在隐藏内容时执行其他操作.例如,视频不会因为您隐藏而停止播放.对于音频应用程序,您可能需要停止播放当前序列.
有许多选项卡控件可用,例如jQuery UI选项卡(免费)和滑动选项卡(许可但价格便宜).
其他方案
标签应该用于在主要内容块之间切换,例如文档(例如浏览器标签)和/或常规使用的功能(例如,具有用于联系信息的标签和用于雇用历史的另一个的人员表格).其他场景可能更适合对话(模态或非模态).
使用音频示例,如果你有一个标有"tempo"的按钮,我希望它在我当前视图的顶部打开一个小对话窗口,而不是带我到一个新标签.Roland的工作站键盘使用这种模式.主要内容替换当前视图,但设置/配置窗口通常会弹出现有视图的顶部.
jQuery UI还有一个用于此目的的对话框插件.如果您精通JavaScript并针对较新的浏览器,那么编写自己的简单对话框并不困难.
1动态生成内容仍然可以通过交互式客户端 - 服务器关系完全接受,但它引入了其他注意事项,例如浏览器中的内容与服务器上的数据模型(如果有)的同步,提交不需要的表单字段(增加请求的大小),整体页面大小等.
我建议查看JQuery UI库。更具体地说，它提供的选项卡功能，http://jqueryui.com/demos/tabs/。
将数据加载到选项卡中的简单经验法则。小而简单，预先加载。大而复杂，按需加载。如有疑问，请按需加载。