私は、JavaScript + HTML5 で記述され、canvas 要素と Chrome の Web Audio API を利用する音楽エディター/シーケンサー アプリに取り組んでいます (既に簡単なプロトタイプが動作しています)。
よくわからないことの 1 つは、このために GUI を実装する方法です。多くの異なるビューが必要になります。おそらく、各ビューを別のクリック可能な「タブ」に配置し、特定の時間に 1 つのタブを前面に表示し、他のすべてのタブを非表示にしたいと考えています。これらすべてのタブを実装する方法がわかりません。
各タブを異なる HTML レイヤーとして実装し、ボタンでどのレイヤーを一番上に表示するかを制御する方がよいでしょうか? タブボタンが押されたときにその場で HTML を (再) 生成するほうがよいでしょうか?
あなたのアドバイスをいただければ幸いです。
各タブを異なる HTML レイヤーとして実装し、ボタンでどのレイヤーを一番上に表示するかを制御する方がよいでしょうか? タブボタンが押されたときにその場で HTML を (再) 生成するほうがよいでしょうか?
特に作業の大部分がブラウザーで行われ、ページ上の要素とやり取りするときにサーバーに対して同期要求が行われない場合は、コンテンツを一度生成し、オンデマンドで表示/非表示にすることに傾倒します。脚注 1 を参照
タブのコンテンツを表示するとき...
各タブのコンテンツが迅速に生成されると仮定すると、最初に要求されたときにのみタブのコンテンツを作成することで、アプリケーションをより効率的にすることができます。このように、タブがアクセスされない場合、リソースは使用されません。
タブのコンテンツ
を非表示にする場合... マルチメディアを使用する場合、コンテンツを非表示にするときに追加のアクションを実行する必要がある場合があります。たとえば、ビデオを非表示にしたからといって、ビデオの再生が停止することはありません。オーディオ アプリケーションでは、現在のシーケンスの再生を停止する必要がある場合があります。
jQuery UI タブ(無料) やSliding Tabs (ライセンスはあるが安価)など、多くのタブ コントロールが利用可能です。
その他のシナリオ
タブは、ドキュメントなどの主要なコンテンツ ブロック (ブラウザー タブなど) や定期的に使用される機能 (連絡先情報用のタブと職歴用のタブがある人事フォームなど) を切り替えるために使用する必要があります。他のシナリオは、ダイアログ (モーダルまたは非モーダル) に適している場合があります。
オーディオの例を使用すると、「tempo」というラベルの付いたボタンがある場合、新しいタブに移動するのではなく、現在のビューの上に小さなダイアログ ウィンドウが開くと思います。Roland のワークステーション キーボードは、このパラダイムを使用しています。主要なコンテンツは現在のビューを置き換えますが、設定/構成ウィンドウは通常、既存のビューの上にポップアップします。
jQuery UIには、この目的のためのダイアログ プラグインもあります。JavaScript に精通していて、新しいブラウザーをターゲットにしている場合は、独自の単純なダイアログを作成するのはそれほど難しくありません。
1 オンザフライでコンテンツを生成することは、インタラクティブなクライアント/サーバー関係では依然として完全に受け入れられるかもしれませんが、ブラウザーにあるものとサーバー上のデータ モデル (存在する場合) との同期、不要なフォーム フィールド (リクエストのサイズの増加)、全体的なページ サイズなど。
JQuery UIライブラリを確認することをお勧めします。より具体的には、それが提供するタブ機能http://jqueryui.com/demos/tabs/です。
タブにデータをロードするための簡単な経験則。小さくてシンプル、前に積み込みます。大きく複雑で、オンデマンドでロードします。疑わしい場合は、オンデマンドでロードしてください。
キャンバスで作業している場合は、キャンバスで GUI を実行します。真剣に。キャンバスの前で div を使用するのは退屈です。私は両方を試しましたが、キャンバスを使用する方が好きです。
最も簡単な方法は、画像を取得し、この画像のキャンバス上でクリック可能なゾーンを定義する「ボタン」クラスを作成することです (ピクセル検出が必要な場合は、オフスクリーン キャンバスと getpixel を使用してマウスの下の色を確認する方法があります)。など、ここで説明するには長すぎます)。
次に、ボタンまたは任意の gui クラスを取得したら、それらをキャンバスに配置でき、複数の html 要素を管理する必要はありません。また、キャンバスの前にある一部の html 要素は、しばしば奇妙な動作をします。そのため、キャンバス上で直接 GUI を作成することを好みます。最初は難しいが、適切です。
再クリックせずに複数の正方形を配置できるようにしてください (mouseDown 変数を使用するだけです)。