我的工作將被用JavaScript編寫+ HTML5，並會利用canvas元素和Chrome的網絡音頻API的音樂編輯器/應用序（我已經有一個simple prototype working）。HTML + JavaScript的GUI諮詢
一個我不那麼肯定是如何實現這個GUI的東西。它需要有許多不同的視圖，並且我希望每個視圖都有一個不同的可點擊的「選項卡」，在給定時間前景中有一個選項卡，隱藏所有其他視圖。我只是不知道如何去實現所有這些選項卡。
它會更好實現每個標籤作爲不同的HTML層和具有按鈕控制該層上顯示出頂部？當按下Tab按鈕時，它將會更好，而不是（重新）生成HTML？
你的建議表示讚賞。
我建議檢查出JQuery UI庫。更具體地說，它提供的標籤功能，http://jqueryui.com/demos/tabs/。拇指加載數據的
簡單的規則到你的標籤。 小而簡單的，加載它。 大，複雜，按需加載。 如有疑問，請按需加載。
作爲一個不同的HTML層實現每個標籤會更好嗎？ 有按鈕控制哪個圖層顯示在頂部？ 改爲在按下按鈕時按下按鈕（重新）生成HTML：
我彎下身子朝後生成的內容和顯示/隱藏它的需求，特別是如果大多數工作在瀏覽器中完成，並有與頁面上的元素進行交互時，服務器正在進行不同步請求。 見腳註1
當顯示選項卡的內容...
假設每個選項卡的內容快速生成，可以使你的應用程序更有效率僅在請求時創建選項卡的內容第一次。這樣，如果該選項卡從未被訪問過，則不會使用任何資源。
當隱藏選項卡的內容...
當與多媒體工作，你可能需要在你隱藏的內容執行其他操作。例如，視頻不會因爲隱藏而停止播放。對於您的音頻應用程序，您可能需要停止播放當前序列。
有許多選項卡控件可用，如jQuery UI tabs（免費）和Sliding Tabs（許可但便宜）。
其他場景
標籤應該用於像文件（如瀏覽器選項卡）和/或經常使用的功能（例如其對聯繫人信息的標籤人事表格內容主要模塊，另一個是就業之間切換歷史）。其他場景可能更適合對話（模態或非模態）。
使用音頻例如，如果您有標有「節奏」的按鈕，我希望它在我的當前視圖的頂部開了一個小對話框窗口，而不是帶我去一個新的標籤。羅蘭的workstation keyboards使用這種範例。主要內容替換當前視圖，但設置/配置窗口通常會彈出在現有視圖上。
jQuery UI還具有用於此目的的對話插件。如果您的JavaScript精通並針對較新的瀏覽器，那麼編寫您自己的簡單對話框並不難。在飛行
1生成內容仍可以與交互式客戶端 - 服務器關係完全可以接受的，但它引入了額外的考慮因素，例如什麼是與所述服務器上的數據模型中的瀏覽器的同步（如果有的話），不需要的表單字段（增加請求的大小），整體頁面大小等
如果您在畫布上的工作，做你的畫布上的GUI。認真。在畫布前使用div很無聊。我嘗試了兩種，我更喜歡使用畫布。
最簡單的方法是創建一個「按鈕」類，它將拍攝一張圖像併爲您的圖像定義畫布上的可點擊區域（如果您想要像素檢測，則有一種方法可以使用離屏畫布和getpixel來檢查鼠標和東西下的顏色，這裏太長解釋）。
然後，一旦你有你的按鈕或什麼的GUI類，你可以把他們的畫布上，你不會有管理多個HTML元素。 此外，在畫布前面的一些html元素經常會有奇怪的行爲。這就是爲什麼我更喜歡直接在畫布上創建我的gui。開始時比較困難，但適當。
，並請，使其能夠將多個方形，而不必reclick（只用一個鼠標按下變量）
樂趣演示的感謝！ – kaveman 2012-04-25 19:20:13
這是一個非常酷的演示，只是fyi。花了10分鐘玩它。 +2，如果我可以的話，看起來像是在某個地方。 – 2012-04-25 20:04:49