Flex中利用CSS定制HSlider或是VSlider控件样式的例子

By Minidxer | September 8, 2008

接下来的例子演示了Flex中如何利用CSS，定制HSlider或是VSlider控件的样式。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         @font-face{
  9.             src: url("./fonts/arial.ttf");
  10.             fontFamily: "ArialEmbedded";
  11.         }
  12.  
  13.         .MyLabel {
  14.             fontFamily: ArialEmbedded;
  15.             fontSize: 15;
  16.             fontWeight: normal;
  17.         }
  18.  
  19.         .MyDataTip {
  20.             backgroundAlpha: 1.0;
  21.             backgroundColor: haloBlue;
  22.             color: white;
  23.             cornerRadius: 10;
  24.             fontWeight: bold;
  25.             letterSpacing: 1;
  26.         }
  27.  
  28.         .MySlider {
  29.             dataTipOffset: 0;
  30.             dataTipPrecision: 0;
  31.             dataTipPlacement: left;
  32.             dataTipStyleName: MyDataTip;
  33.             showTrackHighlight: true;
  34.             labelStyleName: MyLabel;
  35.         }
  36.     </mx:Style>
  37.  
  38.     <mx:Array id="labelArr">
  39.         <mx:Number>-10</mx:Number>
  40.         <mx:Number>0</mx:Number>
  41.         <mx:Number>10</mx:Number>
  42.         <mx:Number>20</mx:Number>
  43.     </mx:Array>
  44.  
  45.     <mx:HSlider id="slider"
  46.             minimum="-10"
  47.             maximum="20"
  48.             labels="{labelArr}"
  49.             snapInterval="1"
  50.             tickInterval="10"
  51.             styleName="MySlider" />
  52.  
  53. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads