Java與Flex學習筆記（12）—-用CSS控制頁面樣式

      以前對於Flex網頁布局還不是很明白，基本上沒有什麼修飾。但是做完了一個仿“115網盤”的頁面後，對頁面控制有了一個基本的瞭解，現總結一下。

     本人一開始接觸的就是Flex4，據說Flex3的css布局很脊椎，也不知道是不是這樣。但是Flex4的網頁布局很牛X，再配上各種事件，可以實現需要寫很多JavaScript/Ajax代碼才能實現的效果。

     好了，言歸正傳。

      在Flex4中使用css控制樣式，既可以直接在mxml檔案中寫樣式，也可以建立一個css檔案在這個檔案裡寫樣式，更重要的是這樣便於管理。

       如果直接在mxml中寫樣式的話，我們可以直接在想要控制的控制項裡直接寫css元素，比如：left,right,top等。如果要控制的元素非常多的話，這樣是不便於管理的建議寫在一個css檔案裡。

       好了，現在好好說說利用css檔案控制樣式。

      首先建立一個css檔案，這個很簡單，就不多說了。

      建立了一個css檔案後需要將此檔案引用到被控制的mxml檔案裡，具體如下所示：

 

      <fx:Style source="css檔案路徑" />

 

      在css檔案裡獲得想要控制的對象可以通過在被控制對象裡設定id來進行，如控制如下canvas需要設定id：

 

       <mx:Canvas  width="98"height="110" id="disk_canvas"   />

 

      在css檔案裡通過“#”擷取，如：

      #disk_canvas{

             focusColor:#D6E0ED;

             top:89;

      }

     我們也可以像在html設定類來進行，即設定styleName屬性，如：

      <mx:Canvas  width="98"height="110" styleName="disk_canvas"   />

      在css檔案裡通過如下所示的“.”來進行設定：

     .disk_canvas{

          focusColor:#D6E0ED;

          top:89;

       }

    然後mxml檔案中用到和這一樣的樣式時，只需要寫上此styleName就可以了。

    總體上就是這樣，但是上述不是很適合在“動態”的狀態下設計樣式，我們可以通過“setStyle”來設定樣式：

 

     id.setStyle(“css屬性”,”css值”);

     如當滑鼠通過左側的“網盤”時，中間的圖片切換如下所示：

       當滑鼠經過“訊息”時中間的圖片切換如下所示：

       不仔細看看，還是挺像的哈！這就是通過事件進行切換的，(*^__^*) …

       上述方法很合適在事件中動態設定樣式。

       設定樣式就是這麼簡單。在html頁面中我們是通過“div+css”控制樣式，但是在flex中我們可以通過“canvas+css”控制樣式。使用過多的Hbox,Vbox等會影響效能，但是canvas是一個比較小的容器，可以滿足大部分的需求。

        好了，就總結這麼多了。

     

        原創文章，轉載請註明出處：http://www.dianfusoft.com/