Flex中如何对HSlider控件进行自定义的例子

By Minidxer | September 8, 2008

接下来的例子演示了Flex中如何通过个性化几个属性和样式，对HSlider控件进行自定义。

让我们先来看一下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="horizontal"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Style>
  9.         .MyDataTip {
  10.             backgroundAlpha: 1.0;
  11.             backgroundColor: haloBlue;
  12.             color: white;
  13.             fontWeight: bold;
  14.         }
  15.     </mx:Style>
  16.  
  17.     <mx:Script>
  18.         <![CDATA[
  19.             private function init():void {
  20.                 slider.labels = [slider.minimum, slider.maximum];
  21.             }
  22.         ]]>
  23.     </mx:Script>
  24.  
  25.     <mx:ApplicationControlBar dock="true">
  26.         <mx:Form>
  27.             <mx:FormItem label="allowTrackClick:">
  28.                 <mx:CheckBox id="allowTrackClickCh" selected="true" />
  29.             </mx:FormItem>
  30.             <mx:FormItem label="invertThumbDirection:">
  31.                 <mx:CheckBox id="invertThumbDirectionCh" />
  32.             </mx:FormItem>
  33.             <mx:FormItem label="showTrackHighlight:">
  34.                 <mx:CheckBox id="showTrackHighlightCh"
  35.                         selected="true" />
  36.             </mx:FormItem>
  37.             <mx:FormItem label="showDataTip:">
  38.                 <mx:CheckBox id="showDataTipCh"
  39.                         selected="true" />
  40.             </mx:FormItem>
  41.             <mx:FormItem label="dataTipPlacement:">
  42.                 <mx:ComboBox id="dataTipPlacementCB"
  43.                         selectedIndex="2">
  44.                     <mx:dataProvider>
  45.                         <mx:Array>
  46.                             <mx:Object label="left" />
  47.                             <mx:Object label="right" />
  48.                             <mx:Object label="top" />
  49.                             <mx:Object label="bottom" />
  50.                         </mx:Array>
  51.                     </mx:dataProvider>
  52.                 </mx:ComboBox>
  53.             </mx:FormItem>
  54.             <mx:FormItem label="dataTipPrecision:">
  55.                 <mx:NumericStepper id="dataTipPrecisionNS"
  56.                         minimum="0"
  57.                         maximum="3"
  58.                         value="2" />
  59.             </mx:FormItem>
  60.         </mx:Form>
  61.     </mx:ApplicationControlBar>
  62.  
  63.     <mx:HSlider id="slider"
  64.             invertThumbDirection="{invertThumbDirectionCh.selected}"
  65.             minimum="-10"
  66.             maximum="20"
  67.             tickInterval="5"
  68.             liveDragging="true"
  69.             showDataTip="{showDataTipCh.selected}"
  70.             showTrackHighlight="{showTrackHighlightCh.selected}"
  71.             dataTipPlacement="{dataTipPlacementCB.selectedItem.label}"
  72.             allowTrackClick="{allowTrackClickCh.selected}"
  73.             dataTipPrecision="{dataTipPrecisionNS.value}"
  74.             dataTipStyleName="MyDataTip" />
  75.  
  76. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

Related Post

2 comments | Add One

  1. hali - 09/23/2008 at 11:15 am

    朋友我想知道，你怎么把google的广告放到文章中间的阿，我也用了Myblog，但是我的新闻在上方阿

  2. hali - 09/23/2008 at 11:15 am

    朋友我想知道，你怎么把google的广告放到文章中间的阿，我也用了Myblog，但是我的新闻在上方阿，请回复我的邮件

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads