flex 一个小panel

本文深入探讨了HPanel组件的使用方法,并通过一个具体的应用实例展示了如何在Flex框架下实现面板的动态交互与布局调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

-----------------------组件 HPanel----------------------------------

 

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   creationComplete="onCreationComplete()">
 <fx:Metadata>
  [Event(name="headerClick")]
 </fx:Metadata>
 <fx:Script>
  <![CDATA[
   import flash.events.Event;
   
   import spark.skins.spark.PanelSkin;
   private function onCreationComplete():void
   {
    var panelSkin:PanelSkin=skin as PanelSkin;
    if(panelSkin==null) return;
    panelSkin.addEventListener(MouseEvent.CLICK,onHeaderClick);
   }
   
   private function onHeaderClick(event:MouseEvent):void
   {
    if(event.currentTarget is PanelSkin)
    {
     var ps:PanelSkin=PanelSkin(event.currentTarget);
     if(event.localY<30)
     {
      dispatchEvent(new Event("headerClick"));
     }
    }
   }
  ]]>
 </fx:Script>
 <s:layout>
  <s:VerticalLayout paddingLeft="10" paddingTop="10"
        paddingBottom="10" paddingRight="10"/>
 </s:layout>
</s:Panel>

 

 

----------------------------应用程序------------------------------

 

 

 

<?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"
      xmlns:comp="components.*"
      width="100%" height="100%">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   private function toggleState(newState:String):void
   {
    currentState=(currentState==newState)?'':newState;
   }
   [Bindable]
   public var userInfoList:ArrayCollection = new ArrayCollection([
    {proName:"项目1", customName:"客户1",userNamePrincipal:"负责人1",type:1,state:1,beginTime:"2010-01-01",completeTime:"2010-01-01",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目2", customName:"客户2",userNamePrincipal:"负责人2",type:2,state:2,beginTime:"2010-01-02",completeTime:"2010-01-02",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目3", customName:"客户3",userNamePrincipal:"负责人3",type:3,state:3,beginTime:"2010-01-03",completeTime:"2010-01-03",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目4", customName:"客户4",userNamePrincipal:"负责人4",type:4,state:4,beginTime:"2010-01-04",completeTime:"2010-01-04",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目5", customName:"客户5",userNamePrincipal:"负责人5",type:5,state:5,beginTime:"2010-01-05",completeTime:"2010-01-05",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目6", customName:"客户6",userNamePrincipal:"负责人6",type:6,state:6,beginTime:"2010-01-06",completeTime:"2010-01-06",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目7", customName:"客户7",userNamePrincipal:"负责人7",type:7,state:7,beginTime:"2010-01-07",completeTime:"2010-01-07",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目8", customName:"客户8",userNamePrincipal:"负责人8",type:8,state:8,beginTime:"2010-01-08",completeTime:"2010-01-08",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"},
    {proName:"项目9", customName:"客户9",userNamePrincipal:"负责人9",type:9,state:9,beginTime:"2010-01-09",completeTime:"2010-01-09",atl:"20天",forecastCost:"20万",completePreStr:"预演",commision:"大大的",taskNum:"2万件"}
   ]);
  ]]>
 </fx:Script>
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <s:states>
  <s:State name="default"/>
  <s:State name="stateOne" stateGroups="[noStateTwo,noStateThree]"/>
  <s:State name="stateTwo" stateGroups="[noStateOne,noStateThree]"/>
  <s:State name="stateThree" stateGroups="[noStateOne,noStateTwo]"/>
 </s:states>
 <comp:HPanel id="stateOnePanel" title="State One Panel"
     left="10" top="10" width="200" right.stateOne="10"
     height="100" bottom.stateOne="10" excludeFrom="noStateOne"
     headerClick="toggleState('stateOne')">
  <s:Label text="你是一" fontSize="20" fontSize.stateOne="140"/>
 </comp:HPanel>
 
 <comp:HPanel id="stateTwoPanel" title="State Two Panel"
     left="10" bottom="10" top="115" top.stateTwo="10"
     width="200" right.stateTwo="10" excludeFrom="noStateTwo"
     headerClick="toggleState('stateTwo')">
  <s:Label width="100%" height="100%" fontStyle="italic"
     text="你是二"/>
 </comp:HPanel>
 <comp:HPanel id="stateThreePanel" title="State Three Pane"
     excludeFrom="noStateThree" top="10" left="220"
     left.stateThree="10" right="10" bottom="10"
     headerClick="toggleState('stateThree')">
  <s:Label fontSize="50" fontSize.stateThree="70" text="你是三"/>
  <s:Label text="--Matsuo Bashō&#13;&#13;
     The ancient pond&#13;A frog leaps in&#13;The sound of the water.
     &#13;--Donald Keene"/>
  <mx:DataGrid id="mydate" dataProvider="{userInfoList}" width="1000" fontFamily="微软雅黑" fontSize="12" y="40" editable="true"> 
   <mx:columns> 
    <mx:DataGridColumn dataField="proId" visible="false" id="proId" editable="false"/> 
    <mx:DataGridColumn headerText="项目名称" dataField="proName" editable="false"/> 
    <mx:DataGridColumn headerText="客户名称" dataField="customName" editable="false"/> 
    <mx:DataGridColumn headerText="项目负责人" dataField="userNamePrincipal" editable="false"/> 
    <mx:DataGridColumn headerText="类别" dataField="type" editable="false"/> 
    <mx:DataGridColumn headerText="状态" dataField="state" editable="false"/> 
    <mx:DataGridColumn headerText="开始日期" dataField="beginTime" editable="false"/> 
    <mx:DataGridColumn headerText="结束日期" dataField="completeTime" editable="false"/> 
    <mx:DataGridColumn headerText="实际时长" dataField="atl" editable="false"/> 
    <mx:DataGridColumn headerText="总预算" dataField="forecastCost" editable="true"/> 
    <mx:DataGridColumn headerText="项目进度" dataField="completePreStr" editorDataField="value" id="jindu" editable="true" />  
    <mx:DataGridColumn headerText="工作量" dataField="commision" editable="false"/> 
    <mx:DataGridColumn headerText="任务数量" dataField="taskNum" editable="false"/> 
   </mx:columns> 
  </mx:DataGrid> 
 </comp:HPanel>
</s:Application>

资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架,其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在一个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样式设计。它首先清除了一些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值