ヘッダーと本文を含むウィジェットの RPC 生成リストがあります。ヘッダーのみを表示して、それらを垂直に表示したいと思います。ユーザーがヘッダーをクリックすると、対応する本文が下にスライドして表示され、他の開いている本文はスライドして表示されなくなります。
アコーディオン効果は StackPanel で実現できます。ただし、CellList と AsyncDataProvider によって提供されるリモート データへのページングとアクセスの容易さも必要です。この2 つは GWT 2.5 で一緒に利用できるようですが、残念ながらまだリリースされていません。
私が持っていた別のアイデアは、CellList を使用し、各セルで相対位置を使用してアコーディオン効果を得るというものでした。ロジックは実装するのに十分単純ですが、セル リストからセルを取得してそのstyle
属性をいじるのは、汚いハックのように思えます。
これを行うより良い方法はありますか?
フォローアップ: (これが別の質問であるかどうかはわかりません。) CellListの構造は次のようになります。
<div __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true" class="GJOQRHCBPB GJOQRHCBMK">
<div onclick="" __idx="0" class="GJOQRHCBLB" style="outline:none;" tabindex="0">
<!-- my cell html -->
</div>
<div onclick="" __idx="1" class="GJOQRHCBLB" style="outline:none;" tabindex="1"> <!-- ... -->
<div onclick="" __idx="2" class="GJOQRHCBLB" style="outline:none;" tabindex="2"> <!-- ... -->
<!-- ... -->
</div></div>
セルのスタイル設定は簡単で、ページに正しく表示されます。ただし、セルのスタイリングは親 div に影響を与えず ( を使用__idx
)、元の長さ全体を伸ばします。これは、セル リストが「あるべき」場所の下をクリックすると、選択イベントが発生することを意味します。これは、div に直接アクセスしてスタイルを設定できれば修正できますが__idx
、恐ろしく汚いハックだと思います。これを行うより良い方法はありますか?