如何創建Picnik的動態菜單？

Picnik的左側菜單：如何創建Picnik的動態菜單？

http://www.picnik.com/app#/create/shapes

基本特點：

手風琴狀的部件（但多個可以選擇項）
每個堆棧多個子堆疊
全菜單調整大小取決於選擇了多少堆棧並且如果需要也顯示滾動條

那麼我該如何去創建這樣的菜單呢？任何指針啓動？

謝謝！

來源

2010-02-02 Yeti

你可能會嘗試VBox，可摺疊面板和列表的組合（http://hasseg.org/blog/?p=113）這應該會給你所有你需要的工具。

我對它的願景：（因爲我喜歡與管道和破折號圖）

VBOX------------------------- 
|       | 
| Collapsing Panel-------- | 
| |      | | 
| | Tile List---------- | | 
| | |     | | | 
| | | Tile   | | | 
| | | Tile   | | | 
| | ------------------ | | 
| ----------------------- | 
|       | 
| Collapsing Panel-------- | 
| |      | | 
| | Tile List---------- | | 
| | |     | | | 
| | | Tile   | | | 
| | | Tile   | | | 
| | ------------------ | | 
| ----------------------- | 
|       | 
| Collapsing Panel-------- | 
| |      | | 
| | Tile List---------- | | 
| | |     | | | 
| | | Tile   | | | 
| | | Tile   | | | 
| | ------------------ | | 
| ----------------------- | 
----------------------------

來源

2010-02-02 20:28:41 invertedSpear

很喜歡你管和破折號繪圖;）你的結構就是我跟去。我要使用WindowShade - http://flexlib.googlecode.com/svn/trunk/docs/flexlib/containers/WindowShade.html。它的作用類似於可摺疊面板。下一個問題是調整大小。比方說，我添加一個項目到最裏面的瓷磚，然後該瓷磚應該擴大到「適合」新項目。這是因爲整個菜單隻有一個滾動條。那麼，如何找到瓷磚的確切高度，並「適合」所有項目而不是顯示滾動條？ – Yeti 2010-02-03 06:03:14

很酷的繪畫:)。 Lost_in_code，動畫好運。我懷疑picnik使用了Flex效果。我會使用TweenMax。他們可能有3個工作小組，3個星期才能完成這些效果，如果點擊過快，他們仍然無法工作。 invertedSpear的結構運作良好。 – 2010-02-03 11:33:00

@Lost_in_code - 我個人不太在意瓷磚太多的問題，但是在處理UI組件時，通常取決於你如何構建菜單，使用AS或MXML。用AS，我會測量你添加到瓷磚的項目，並且當你設置所有祖先組件的高度時，這樣「tile.addChild（item）; tile.height + = item.height; tileList.height + = item.height; windowShade.height + = item.height;「可能有更好的方法來自動化，但它應該工作。 – invertedSpear 2010-02-03 15:08:03

如何創建Picnik的動態菜單？

回答

相關問題