flex中toolTip汇总

Flex 2020-09-25
1.toolTip换行符 

<mx:Button id="btn1" toolTip="在工具条提示中&#13; 使用换行符"/> 

2.设定工具条提示的样式 

<mx:Style>  
    ToolTip  
    {  
        fontSize:19;  
        color:#FF6699;  
    }  
</mx:Style>

3.设定工具提示宽度  

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
<mx:Script>  
    <![CDATA[  
        import mx.controls.ToolTip;  
        public function init():void  
        {  
            ToolTip.maxWidth=100;  
        }  
        ]]>  
</mx:Script>

4. 使用工具条提示事件 
toolTipCrate 
toolTipEnd 
toolTipHide 
toolTipShow 
toolTipShown 
toolTipStart  

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
<mx:Script>  
    <![CDATA[  
        import mx.events.ToolTipEvent;  
        import flash.media.sound;  
        [Embed(source="demo.mp3")]  
        private var beepSound:Class;  
        private var myClip:Sound;  
        public function init():void  
        {  
            TooTip.maxWidth=100;  
        }  
  
        public function playSoune():void  
        {  
            myClip.play();  
        }  
  
        public function myListener(event:ToolTipEvent):void  
        {  
            playSoune();  
        }  
          
        public function init():void  
        {  
            lbl.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,myListener);  
            myClip=new beepSound();  
        }  
        ]]>  
</mx:Script>  
<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" />

5. ToolTip Manager 
ToolTip Manager 类用来管理toolTip属性,包含在mx.managers包中 
使用ToolTip Manager 延迟工具条显示的时间,在工具条上使用行为效果 
建立动态的工具条提示，使用自定义的工具条提示 

公共属性 
    currentTarget : displayObject 
当前显示工具提示的 UIComponent；如果未显示工具提示，则为 null。 ToolTipManager 
    currentToolTip : IToolTip 
当前可见的 ToolTip 对象；如果未显示 ToolTip 对象，则为 null。 ToolTipManager 
    enabled : Boolean 
如果为 true，则当用户将鼠标指针移至组件上方时，ToolTipManager 会自动显示工具提示。 ToolTipManager 
    hideDelay : Number 
自工具提示出现时起，Flex 要隐藏此提示前所需等待的时间量（以毫秒为单位）。 ToolTipManager 
    hideEffect : IAbstractEffect 
隐藏工具提示时播放的效果；如果工具提示在消失时不应显示任何效果，则为 null。 ToolTipManager 
   prototype : Object 
对类或函数对象的原型对象的引用。 Object 
    scrubDelay : Number 
在 Flex 再次等待 showDelay 持续显示工具提示之前，用户在各控件间移动鼠标时可以花费的时间（以毫秒为单位）。 ToolTipManager 
    showDelay : Number 
当用户将鼠标移至具有工具提示的组件上方时，Flex 等待 ToolTip 框出现所需的时间（以毫秒为单位）。 ToolTipManager 
    showEffect : IAbstractEffect 
显示工具提示时播放的效果；如果工具提示在显示时不应显示任何效果，则为 null。 ToolTipManager 
    toolTipClass : Class 
创建工具提示要用到的类。 


1.控制工具条的显示隐藏 
ToolTip Manager  enabled属性来定义工具条提示状态，默认为true,设定为false就表示禁用 
2.延迟工具条的提示时间 
showDelay 默认为500毫秒 当鼠标在控件之间移动时，flex等待显示工具条提示的时间长度 
hideDelay 默认值为10000毫秒 如果设定hideDelay属性值为0，flex不显示工具条提示，如果设定为Infinity,flex则一致显示工具提示 
直到下一个动作，或者鼠标离开主键 
例如： 
ToolTipManager.showDelay=0;//立即显示 
ToolTipManager.hideDelay=3000;//3s秒后隐藏 
3.在工具条上使用动画效果 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
<mx:Script>  
    <![CDATA[  
        import mx.managers.ToolTipManager;  
        import mx.events.ToolTipEvent;  
        import flash.media.sound;  
        [Embed(source="demo.mp3")]  
        private var beepSound:Class;  
        private var myClip:Sound;  
        public function init():void  
        {  
            TooTip.maxWidth=100;  
            ToolTipManager.showEffect=fadeIn;  
        }  
        ]]>  
</mx:Script>  
<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" />  
<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000" />  
<mx:Panel >  
    <mx:Button id="btn" toolTip="demoasdf" />  
</mx:Panel >

4.建立动态工具条体提示 
ToolTipManager有两种方法,即：createtoolTip()和destroyToolTip() 
建立一个工具条提示对象时,可以定义其属性,样式,事件和效果。 
cratetoolTip()方法结构 
createtoolTip(text:String,x:Number,y:Number,errorTipBorderStyle:String = null,context:iuiComponent = null):IToolTip 
[] 使用指定的文本创建 ToolTip 类的实例，然后在舞台坐标中的指定位置显示此实例。 ToolTipManager 
    destroyToolTip(toolTip:IToolTip):void 
[] 销毁由 createtoolTip() 方法创建的指定 ToolTip。 
例如： 
<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" /> 
<mx:Button id="btn1" toolTip="填写的是{lbl.text}"/> 
5.建立用户自定义的工具条提示 

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >  
  2. <mx:Script>  
  3.     <![CDATA[  
  4.         import mx.managers.ToolTipManager;  
  5.         import mx.events.ToolTip;  
  6.         public var myTip:ToolTip;  
  7.   
  8.         public function init():void  
  9.         {  
  10.             var s:String ="保存,应用,退出";  
  11.             myTip=ToolTipManager.createtoolTip(s,10,0)">10) as ToolTip;  
  12.             myTip.setStyle("backgroundColor",0)">0xFFCC00);  
  13.             myTip.width=300;  
  14.             myTip.height=40;  
  15.         }  
  16.         public funciton destroyBigTip():void  
  17.             ToolTipManager.destroyToolTip(myTip);  
  18.         ]]>  
  19. </mx:Script>  
  20.     <mx:Button id="btn" toolTip="test toolTip" rollover="init()" rollOut="destroyBigTip()"/>  
6.使用错误信息提示工具条 
As代码  

收藏代码
  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >  
  2. <mx:Script>  
  3.     <![CDATA[  
  4.         import mx.managers.ToolTipManager;  
  5.         import mx.events.ToolTip;  
  6.         public var errorTip:ToolTip;  
  7.     private function validatefun(type:String,event:Object):void  
  8.     {  
  9.         errorTip=" demo test ";  
  10.         errorTip=ToolTipManager.createtoolTip(errorTip,event.currentTarget.x,event.currentTarget.y) as ToolTip;  
  11.         errorTip.setStyle("styleName","errorTip");  
  12.     }  
  13. <mx:TextInput id="txt" enter="validatefun('demo',event)" />  

7.重写工具条皮肤 
ToolTip皮肤存在mx.skins.ToolTipBorder.as文件中 
当然需要重写的时候就可以 ToolTipBorder 类继承的类就可以了 
例如: 
Java代码  

收藏代码
    package  
  1. {  
  2.     import mx.skins.RectangularBorder;  
  3.   
  4. public class MyToolTipBorder extends RectangularBorder  
  5.         public function MyToolTipBorder()  
  6.         {  
  7.             super();  
  8.         }  
  9.           
  10.         override protected function updatedisplayList(unscaledWidth:Number,  
  11.                                                   unscaledHeight:Number):void  
  12.               
  13.          override   public function layoutBackgroundImage():void {  
  14.                   
  15.             }  
  16. }mxml中使用  
  17. <mx:Style>  
  18.     ToolTip  
  19.         borderSkin:ClassReference("MyToolTipBorder");  
  20. </mx:Style>  

自定义皮肤 参见：http://demojava.iteye.com/blog/1175446 
自定义DateGird Item ToolTip  
效果图： 

自定义ToolTip renderers.MenuToolTipRenderer as 实现接口   IMenuItemRenderer,IDataRenderer,IListItemRenderer 
Xml代码  

收藏代码
    package renderers  
  1. import flash.events.Event;  
  2. import flash.events.MouseEvent;  
  3. import flash.text.TextFieldAutoSize;  
  4. import mx.controls.Alert;  
  5. import mx.controls.LinkButton;  
  6. import mx.controls.Menu;  
  7. import mx.controls.listClasses.IListItemRenderer;  
  8. import mx.controls.menuClasses.IMenuItemRenderer;  
  9. import mx.core.EdgeMetrics;  
  10. import mx.core.IDataRenderer;  
  11. import mx.core.UIComponent;  
  12. import mx.core.UITextField;  
  13. import mx.events.FlexEvent;  
  14. public class MenuToolTipRenderer extends UIComponent implements IMenuItemRenderer, IDataRenderer, IListItemRenderer  
  15.       
  16.     private var textField:UITextField;  
  17.     private var clickText:LinkButton;  
  18.     public function get measuredTypeIconWidth():Number//类型图标（单选/复选）的宽度   
  19.         return 33;  
  20.     public function get measuredBranchIconWidth():Number//分支图标的宽度   
  21.     public function get measuredIconWidth():Number//图标的宽度  
  22.     //-------------------------------------------------------------------------  
  23.     public function MenuToolTipRenderer()  
  24.         super();  
  25.         this.addEventListener(FlexEvent.DATA_CHANGE, renderComponent);  
  26.         this.setStyle("cornerRadius", 5);  
  27.         this.maxWidth = 250;  
  28.     // Internal variable for the property value.  
  29.     private var _menu:Menu;  
  30.     public function get menu():Menu  
  31.         return _menu;  
  32.     public function set menu(value:Menu):void  
  33.         _menu = value;  
  34.     private var _data:Object;  
  35.     [Bindable("dataChange")]  
  36.     public function get data():Object {  
  37.     return _data;  
  38.     public function set data(value:Object):void {  
  39.     _data = value;  
  40.     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));  
  41.     private function get borderMetrics():EdgeMetrics  
  42.         return EdgeMetrics.EMPTY;  
  43.     private function renderComponent(event:FlexEvent):void  
  44.         if(_data != null && _data != "null")  
  45.             textField.htmlText = data.label;  
  46.             invalidateProperties();  
  47.             invalidateSize();  
  48.             invalidatedisplayList();  
  49.     private function buttonClick(event:Event):void  
  50.         mx.controls.Alert.show("button click");  
  51.     override protected function createChildren():void  
  52.         super.createChildren();  
  53.         // Create the TextField that displays the tooltip text.  
  54.         if (!textField)  
  55.             textField = new UITextField();  
  56.             textField.autoSize = TextFieldAutoSize.LEFT;  
  57.             textField.mouseEnabled = false;  
  58.             textField.multiline = true;  
  59.             textField.selectable = false;  
  60.             textField.wordWrap = true;  
  61.             textField.styleName = this;  
  62.             addChild(textField);      
  63.     override protected function measure():void  
  64.         super.measure();  
  65.         var bm:EdgeMetrics = borderMetrics;  
  66.         var leftInset:Number = bm.left + getStyle("paddingLeft");  
  67.         var topInset:Number = bm.top + getStyle("paddingTop");  
  68.         var rightInset:Number = bm.right + getStyle("paddingRight");  
  69.         var bottomInset:Number = bm.bottom + getStyle("paddingBottom");  
  70.         var widthSlop:Number = leftInset + rightInset;  
  71.         var heightSlop:Number = topInset + bottomInset;  
  72.         textField.wordWrap = false;  
  73.         if (textField.textWidth + widthSlop > this.maxWidth)  
  74.             textField.width = this.maxWidth - widthSlop;  
  75.         measuredWidth = textField.width + widthSlop;  
  76.         measuredHeight = textField.height + heightSlop;  
  77.         thisthis.parent.parent.height = this.parent.height = this.height = measuredHeight + 25;  
  78.         thisthis.parent.parent.width = this.parent.width = this.width = measuredWidth;  
  79.         createAdditionalContent(measuredWidth, measuredHeight);  
  80.     private function createAdditionalContent(measuredWidth:Number, measuredHeight:Number):void  
  81.         clickText = new LinkButton();  
  82.         clickText.label = "More Info";  
  83.         clickText.width = 70;  
  84.         clickText.height = 18;  
  85.         clickText.setStyle("fontSize", 9);  
  86.         clickText.setStyle("color", "blue");  
  87.         clickText.buttonMode = true;  
  88.         clickText.visible = true;  
  89.         clickText.y = measuredHeight;  
  90.         clickText.x = measuredWidth - clickText.width - 8;  
  91.         clickText.addEventListener(MouseEvent.CLICK, dispatchClick);  
  92.         addChild(clickText);  
  93.     private function dispatchClick(e:Event):void  
  94.         this.dispatchEvent(new Event("buttonClicked", true))  
  95. }  
  96. }  

Application.xml 
<?xml version="1.0" encoding="utf-8"?>  
  • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()"   
  •             viewSourceURL="srcview/index.html" width="600" height="300">  
  • mx:DataGrid id="dg" dataProvider="{tmpArray}" width="550"  
  •              mouSEOut="dgMouSEOut(event)" mouSEOver="dgMouSEOver(event)" mouseMove="dgMouseMove(event)"     mx:columns         mx:Array             mx:DataGridColumn headerText="Label" datafield="label" showdatatips="true" />  
  • mx:DataGridColumn headerText="Data" datafield="data" </mx:DataGridmx:Style     .menuToolTip {  
  •            backgroundAlpha: 1;  
  •            backgroundColor: #ffffcc;  
  •            useRollover: false;  
  •            borderStyle: solid;  
  •            borderThickness: 0;  
  •            borderColor: #000000;  
  •            selectionColor: #7fcdfe;  
  •            dropShadowEnabled: true;  
  •            cornerRadius: 5;  
  •            paddingLeft: 3; paddingRight: 3; paddingTop: 3; paddingBottom: 3;  
  •              
  • mx:Script     <![CDATA[ 
  •         import mx.automation.delegates.controls.ListBaseContentHolderAutomationImpl; 
  •         import mx.controls.listClasses.ListBase; 
  •         import renderers.MenuToolTipRenderer; 
  •         import mx.controls.dataGridClasses.DataGridItemRenderer; 
  •          
  •         import mx.managers.ToolTipManager; 
  •         import mx.controls.Menu; 
  •         import mx.events.MenuEvent; 
  •         import flash.geom.Point; 
  •         [Bindable] private var dgMouseX:Number = 0; 
  •         [Bindable] private var dgMouseY:Number = 0; 
  •         private var toolTipMenu:Menu; 
  •         private var toolTipTimer:Timer; 
  •         [Bindable] 
  •         public var tmpArray:Array = [{label: '<b>mary</b> had a little lamb', data: 55, link:'http://www.meutzner.com/blog'},  
  •                                      {label: 'All the kings men, and all the kings horses', data: 56,147)">                                     {label: 'baa baa black sheep, have you any wool', data: 57,147)">                                     {label: 'jack and jill went up the hill', data: 58,147)">                                     {label: 'little miss muffet, sat on a tuffet, eating her curds and whey', data: 59, link:'http://www.meutzner.com/blog'} 
  •                                     ]; 
  •         //------------------------------------------------------------------------- 
  •         public function init():void 
  •         { 
  •             ToolTipManager.enabled = false; 
  •         } 
  •         private function createMenu(data:Object):void  
  •     { 
  •     toolTipTimer.stop(); 
  •     var menuData:Array = [{label: data.label, link: data.link}]; 
  •      
  •     toolTipMenu = Menu.createMenu(this, menuData, false); 
  •     toolTipMenu.labelField="label"; 
  •     toolTipMenu.width = 250; 
  •     toolTipMenu.setStyle("fontSize", 10); 
  •     toolTipMenu.setStyle("themeColor", 0xFF9900); 
  •     toolTipMenu.itemRenderer = new ClassFactory(renderers.MenuToolTipRenderer); 
  •     toolTipMenu.data = data; 
  •     toolTipMenu.selectable = false; 
  •     toolTipMenu.setStyle("styleName", "menuToolTip"); 
  •     toolTipMenu.setStyle("openDuration", 0); 
  •  
  •     //toolTipMenu.setStyle("selectionEasingFunction", myEasingFunction); 
  •     toolTipMenu.addEventListener(MouseEvent.ROLL_OUT, hidetoolTip); 
  •     toolTipMenu.addEventListener("buttonClicked", catchButtonClick); 
  •     var pt1:Point = new Point(this.dgMouseX, this.dgMouseY); 
  •             pt1 = dg.localToGlobal(pt1); 
  •             //offset this for Now to fix slight bug where immediate mouSEOver of tooltip causes it to hide 
  •     toolTipMenu.show(pt1.x+10, pt1.y+0); 
  •     } 
  •     //------------------------------------------------------------------------- 
  •     private function hidetoolTip(event:MouseEvent):void 
  •     //trace("MENU --- " + event.relatedobject + " - " + event.target + " - " + event.currentTarget); 
  •     toolTipMenu.hide(); 
  •     private function dgMouseMove(event:MouseEvent):void 
  •     this.dgMouseX = dg.mouseX; 
  •     this.dgMouseY = dg.mouseY; 
  •     private function dgMouSEOver(event:MouseEvent):void 
  •     //trace("DATAGRID OVER --- " + event.target + " - " + event.currentTarget + " - " + event.relatedobject); 
  •     if(event.target is DataGridItemRenderer) 
  •         if(toolTipMenu != null) 
  •             if(toolTipMenu.visible && toolTipMenu.data == event.target.data)  
  •                 return; 
  •         if(!DataGridItemRenderer(event.target).styleName.showdatatips) 
  •             return; 
  •              
  •         toolTipTimer = new Timer(1000,147)">        toolTipTimer.addEventListener(TimerEvent.TIMER, function():void  
  •                                                                  {  
  •                                                                     createMenu(event.target.data); 
  •                                                                  }  
  •                                       ); 
  •         toolTipTimer.start(); 
  •     private function dgMouSEOut(event:MouseEvent):void 
  •     if(toolTipTimer) toolTipTimer.stop(); 
  •     //trace("DATAGRID OUT --- " + event.target + " - " + event.currentTarget + " - " + event.relatedobject); 
  •     if(event.relatedobject is mx.controls.listClasses.ListBaseContentHolder || event.relatedobject is MenuToolTipRenderer) 
  •         return; 
  •         if(event.relatedobject is Menu || !event.relatedobject is MenuToolTipRenderer) return; 
  •         if(toolTipMenu != null) toolTipMenu.hide(); 
  •     private function catchButtonClick(e:Event):void  
  •     mx.controls.Alert.show(e.target.data.label + " was clicked to take you to " + e.target.data.link); 
  •     ]]>  
  • mx:Application>  

    • 附件为源文件 1. 设置ToolTip风格(通过css来设置) 
       ToolTip {  
        fontFamily: "Arial";  
        fontSize: 13;  
        fontStyle: "italic";  
        color: #FF6699;  
        backgroundColor: #33CC99;  
    } 
    当然这个可以通过css来动态设置例如： 
    StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");  
    2. 错误提示errottip 

    errorTip 
    { 
    border-style:"errorTipRight"; 
    其中border-style其对应的格式决定小三角的方位,可选值：[toolTip,errorTipRight,errorTipAbove,errorTipBelow] 
    <mx:TextInput x="85" y="118" text="021-阿萨德发送" errorString="输入有误！" /> 
    如果想修改源码,改变小三角的大小或者位置的话就需要自定义border-skin 
    ToolTip 
    border-skin:ClassReference("com.MyToolTipBorder"); 
    其中 com.MyToolTipBorder其中是一个继承了RectangularBorder的类,源码参见附件， ToolTip默认的skin-class路径在sdk 
    sdks\3.0.0\frameworks\projects\framework\src\mx\skins\halo\ToolTipBorder 
    引入包的路径：import mx.skins.halo.ToolTipBorder; 
    笔者发现 ToolTipBorder 的类对于4个方向支持不是很好，其中最右边的提示，也就是小三角在右边的没有,把源码修改了下(附件中有MyToolTipBorder) 
    改变默认的错误提示的背景色设置4个方向的提示 

    3. 使用ToolTipManager动态创建自定义的tooltip; 
    使用ToolTipManager管理器类能够让你设置基本的ToolTip功能。比如显示延迟，以及控制是否显示ToolTip信息内容。 
    你可以在程序中激活和停止使用ToolTips. 
    可以使用enabled这个属性来激活或者停止使用ToolTips，如果停止使用，在鼠标移到到组件上方的时候就不会用ToolTips的框显示出来，不管那个组件是否设置了toolTip这个属性值 
    设置ToolTipManager的常用属性介绍 
    ToolTipManager.enabled = true;//鼠标移入控件自动显示工具提示 
    ToolTipManager.showDelay = 0; //flex 等待tooltip出现的时间单位毫秒默认500 
    ToolTipManager. hideDelay=3000; //flex 隐藏tooltip所需的事件等待量 单位毫秒，默认500 
    ToolTipManager.showEffect= fadeIn; //显示tooltip的特效 
    ToolTipManager. hideEffect= fadeIn; //隐藏 tooltip的特效 
    <mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/> 
    4. 使用ToolTipManager createtoolTip，destroyToolTip来动态创建自定义tooltip 
    一般自定义tooltip都是在控件的 
    MouseEvent. ROLL_OVER(rollover) 
    MouseEvent. MOUSE_OVER (mouSEOver) 
    控制自定义tooltip的显示 
    MouseEvent. ROLL_OUT (rollOut) 
    MouseEvent. MOUSE_OUT (mouSEOut) 
    控制自定义tooltip的隐藏 
    现已rollover结合ToolTipManager实现自定义tooltip 
    import mx.managers.ToolTipManager; 
  • public var myTip:ToolTip; 
  • private function showTip(event:MouseEvent,type:String):void 
  • { 
  • Tip=ToolTipManager.createtoolTip(str,event.stageX,event.stageY) as ToolTip; 
  • //根据需要动态设置tooltip的style属性 
  • myTip.move(event.stageX,event.stageY); 
  • } 
  • private function hideTip():void 
  •         ToolTipManager.destroyToolTip(myTip); 
  • 5. 实现mx.core.IToolTip接口自定义toolTip的外观(可选as实现该接口，mxml实现该接口) 
    现已mxml实现该接口为例(简单),MyPanelToolTip.mxml 
    mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"    
  •     implements="mx.core.IToolTip"    
  •     width="212"    
  •     borderThickness="2"    
  •    backgroundColor="0xCCCCCC"    
  •    dropShadowEnabled="true"    
  •    borderColor="black"    
  •    roundedBottomCorners="true"  
  •     height="90">     
  •        <![CDATA[   
  •    //注意 Panel 中的  implements="mx.core.IToolTip"   
  •    [Bindable]    
  •    private var _text:String="";   
  •    public function get text():String {   
  •    return _text ; 
  •    }   
  •    public function set text(value:String):void { 
  •         this._text=value;   
  •    ]]>>    
  • mx:Text text="{text}" percentWidth="100"/>    
  • mx:Panel使用时： 
    private function createCustomTip(title:String,body:String,event:ToolTipEvent):void 
    var pan:MyPanelToolTip = new MyPanelToolTip(); 
               pan.title = title; 
               pan.text=body; 
               event.toolTip = pan; 
    <mx:Button id="btn3" label="button" x="275.5" toolTip="demo" toolTipCreate="createCustomTip('自定义tooltip','该tooltip实现mx.core.IToolTip接口,注意是控件必须设置toolTip属性的值',event)" y="187"/> 
    6. 自定义组件(继承UIComponent)结合mouSEOver事件形式   

    • 相关文章

    css display:flex 属性
    一：display:flex布局display:flex是一种布局方式。它即可以...
    display:flex 布局详解2
    1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
    移动端开发
    移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些...
    grid布局笔记
    最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周...
    盒模型
    display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后...
    javascript – Flex禁用Safari键盘快捷键
    我在网页上运行了一个Flex应用程序,我想使用Command←组合键...