水平滑動選單

想要一口氣把很多商品圖放進網頁嗎?如果你的商品數量不會太多,這個也許是你可以考慮的方法。

水平滑動選單示意圖

水平滑動選單示意圖

我想要讓商品呈現圖片所顯示的那樣,當然,這個練習並沒有牽涉到資料庫,畢竟我們才剛開始嘛,不需要做到這麼難的練習。程式一開始,請先建立商品陣列,沒錯,我們是運用陣列來把我們要放入的商品集結在一起,還有一個網站一開始就會載入的function。

<mx:Script>
<![CDATA[
  import mx.collections.*;
  import mx.controls.Image;
  private var catalog:ArrayCollection;
  private static var cat:Array = [
    "img/d1_m.jpg", "img/d2_m.jpg",
    "img/d3_m.jpg", "img/d4_m.jpg",
    "img/d5_m.jpg", "img/d6_m.jpg",
    "img/d7_m.jpg",
  ];
  private function initCatalog(items:Array):void{
    catalog = new ArrayCollection(items);
    myList.dataProvider = catalog;
  }
]]>
</mx:Script>

cat陣列就是我們存放商品的地方,而initCatalog函式則是我們要求頁面一開始就要載入執行的程式,他在裡面,其實只是執行了dataProvider的指定而已。

<mx:HorizontalList id="myList" columnWidth="100" rowHeight="100" columnCount="3"
  itemRenderer="mx.controls.Image" creationComplete="initCatalog(cat)" height="121" width="302" x="33" y="106"/>

接著,我們就運用一行程式來讓商品內容能夠順利呈現出來,itemRenderer="mx.controls.Image"將所要顯示的內容指定為Image型態,也就是照片的模式;如果你是文字型態,那麼就把Image改成Text,這樣就會出現文字了! creationComplete="initCatalog(cat)"的意思就是當網頁完成載入時,initCatalog(cat)也會同時載入,這樣只要一打開網頁你就會看到商品內容。如果你不喜歡頁面一開始就載入,喜歡讓人家用按鈕來載入,那麼你就可以把這一行刪掉,把initCatalog(cat)改放到按鈕標籤裏面的動作裡面來執行,比如說click="initCatalog(cat)"

執行檔案,你應該就可以看到漂亮的商品選單囉!如果沒有,注意一下你有沒有把對應的圖檔放進去啊!

Advertisements

One thought on “水平滑動選單

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s