Flex 界面滚动条样式的设置

最新推荐文章于 2024-07-02 11:33:04 发布

vincent50411

最新推荐文章于 2024-07-02 11:33:04 发布

阅读量1.5k

点赞数

分类专栏： Flex

本文链接：https://blog.csdn.net/vincent50411/article/details/11138321

版权

Flex 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

该列子对滚动条箭头的样式设置，滑块没有测试过

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
   <fx:Declarations>
       
   </fx:Declarations>


   <fx:Script>
       <![CDATA[

           import mx.events.ScrollEvent;

           // Event handler function to display the scroll location
           // as you move the scroll thumb.
           private function myScroll(event:ScrollEvent):void
           {
               showPosition.text = "VScrollBar properties summary:" + '\n' +
                   "------------------------------------" + '\n' +
                   "Current scroll position: " + event.currentTarget.scrollPosition + '\n' +
                   "The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +
                   "The minimum scroll position: " + event.currentTarget.minScrollPosition ;
           }



       ]]>
   </fx:Script>

   <fx:Style>
       @namespace s "library://ns.adobe.com/flex/spark";
       @namespace mx "library://ns.adobe.com/flex/mx";
       .VScrollBarStyle {
           downArrowUpSkin: Embed(source="searchBg_content.png");
           downArrowOverSkin: Embed(source="searchBg_content.png");
           downArrowDownSkin: Embed(source="searchBg_content.png");
           upArrowUpSkin: Embed(source="searchBg_content.png");
           upArrowOverSkin: Embed(source="searchBg_content.png");
           upArrowDownSkin: Embed(source="searchBg_content.png");
           thumbDownSkin:
               Embed(source="searchBg_content.png",
               scaleGridLeft="7", scaleGridTop="5",
               scaleGridRight="8", scaleGridBottom="7");

           thumbUpSkin:
               Embed(source="searchBg_content.png",
               scaleGridLeft="7", scaleGridTop="5",
               scaleGridRight="8", scaleGridBottom="7");

           thumbOverSkin:
               Embed(source="searchBg_content.png",
               scaleGridLeft="7", scaleGridTop="5",
               scaleGridRight="8", scaleGridBottom="7");

           trackSkin:
               Embed(source="searchBg_content.png",
               scaleGridLeft="7", scaleGridTop="4",
               scaleGridRight="8", scaleGridBottom="6" );
       }
   </fx:Style>

   <mx:Panel id="panel" title="VScrollBar Control Example" height="75%" width="75%"
              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

       <mx:Label width="100%" color="blue"
                  text="Click on the scroll bar to view its properties."/>

       <mx:VScrollBar id="bar" height="100%" styleName="VScrollBarStyle"
                       minScrollPosition="0" maxScrollPosition="{panel.width - 20}"
                       lineScrollSize="50" pageScrollSize="100"
                       repeatDelay="1000" repeatInterval="500"
                       scroll="myScroll(event);"/>

       <mx:TextArea height="100%" width="100%" id="showPosition" color="blue"/>

   </mx:Panel>


</s:Application>