0

私はこのナットをクラックしようとして何週間も苦労してきたので、それが不可能なのか、コーディングチョップの欠如なのか、あるいはその両方なのかわかりません. 私はプログラマーではなく、Dojo Toolkit の初心者です。

BorderContainer レイアウトを使用するサイトがあります。ボタンを使用して、コントロールを含むドロップダウン タイプのボックスを開閉できるエフェクトを作成しようとしています。ページの読み込み時にこのドロップダウンを非表示にし、ボタンをクリックすると開く必要があります。

私の問題は、ドロップダウンを開くと、その下のコンテンツ ペインがブラウザ ウィンドウの下部から押し出されることです。ドロップダウンが開いたときにブラウザー ウィンドウの残りのスペースに収まるように、下部の ContentPane が必要です。さらに、ドロップダウンをその下のコンテンツのスクロール可能なコンテナーの外側に配置したいので、その下にネストされた BorderContainer の外側にドロップダウンを配置するように設定しました。

この課題を示すために、コードの簡略化されたバージョンを作成しました (以下のリンクを参照)。ページをロードすると、中央の ContentPane がコンテンツをスクロールすることがわかります。ただし、ボタンをクリックすると、ドロップダウン div がコンテンツの上に展開されます。次にスクロールすると、ブラウザー ウィンドウの下部にある無人地帯にあるため、ウィンドウ全体が表示されないことに気付くでしょう。ロード時にdivがdisplay:noneに設定されているため、ページのロード時にサイズが考慮されていないと思います。次に、ボタンを押して開くと、サイズが追加され、下のペインはサイズ変更または新しい要素の考慮方法を認識しません。

可視性属性を使用してみましたが、まだ閉じているときに div にギャップが残ります。約束を示す高さを制御するコードをいじりましたが、各ドロップダウン ボックスのサイズは異なるため、指定したピクセル サイズではなく、高さを「自動」に設定することをお勧めします。

画面を押し出すことなく下部ペインがスペースに収まるように、これを達成する方法を知っている人はいますか?

ページのサンプルは次のとおりです。

http://equium.com/scaffold.html

(完全な HTML ページをコード サンプルとしてここに挿入しようとすると問題が発生したので、それが望ましい処理方法である場合、また、そのコードをすべて埋め込む最良の方法を誰かが教えてくれれば幸いです。)

事前に感謝します。誰かのフィードバックを本当に感謝します。

4

4 に答える 4

2

ご覧になることをお勧めしますdojox.layout.ExpandoPane（ただし、しばらくの間、上部と左側の領域でのみ適切に機能していると思いますが、注意してください）。

また、レイアウトを少し簡素化/変更することをお勧めします。ここで例を参照してください：

http://jsfiddle.net/taFzv/

(あなたが望むものを正確に得るには、おそらく微調整が必​​要になるでしょう。)

あなたが抱えている本当の問題は、おそらく BorderContainer がビューの一部のサイズが変更されたことを認識していないことです。ExpandoPane は、アニメーションの完了後に BorderContainer に再レイアウトするように指示することで、これを処理します。

于 2011-10-02T20:47:47.130 に答える
1

IE8.0で動作します。ドロップダウンボックスが開いたら、ページからマウスを押し続けて下にドラッグするだけで、コンテンツがページ外にプッシュされたことがわかります。ブラウザがそれを検出できず、「スクロールバー」アカウントに追加できなかったようです。

于 2012-03-15T06:54:56.007 に答える
0

トップレベルのものを除いて、すべての BorderContainers を取り出すことをお勧めします。

{stuff here} div を、閉じる/開くボタンのある ContentPane の後に、mainPage BorderContainer に配置します。dojotype dijit.layout.ContentPane にして、layoutpriority を設定し、region を top に設定してください。表示を設定する代わりに、開く/閉じるボタンをクリックするときに、高さを 0/x に設定します。

ページをもう一度試してください。それでも問題が解決しない場合は、レイアウト、サイズ変更、またはその両方を呼び出して、すべての子を評価し、「中央」ペインを適切にサイズ設定する必要があることを BorderContainer に示す必要があります。dijit.byId("mainPage").layout(); のようなもの これは、BorderContainer の子の高さを変更した後、誰かが閉じる/開くボタンを押すたびに実行します。

于 2011-10-04T01:00:00.127 に答える
0

おそらく、dijit.form.DropDownButtonがニーズに合うでしょう。ボタンをクリックすると、必要なコンテンツを入力できるツールチップが表示されます。指定したとおり、ドロップダウンのツールチップはボタンをクリックしたときにのみ表示され、下にあるレイアウトをまったく混乱させません。ツールチップはページの「上」に配置されます。

于 2011-10-31T16:27:41.283 に答える