<?xml version="1.0" encoding="utf-8"?>
<!--created:Aug 27, 2010 file:BorderContainerDemo2.mxml author:Michael -->
<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"
viewSourceURL="srcview/index.html" backgroundColor="0">
<s:states>
<s:State name="normal"/>
<s:State name="b1"/>
<s:State name="b2"/>
<s:State name="b3"/>
</s:states>
<s:layout>
<s:HorizontalLayout verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function bordercontainer_clickHandler(event:MouseEvent):void
{
this.currentState=event.currentTarget.id;
}
protected function hg_creationCompleteHandler(event:FlexEvent):void
{
for (var i:int; i < this.hg.numElements; i++)
{
BorderContainer(this.hg.getElementAt(i)).addEventListener(MouseEvent.CLICK, bordercontainer_clickHandler);
}
}
]]>
</fx:Script>
<s:HGroup gap="0"
id="hg"
creationComplete="hg_creationCompleteHandler(event)">
<s:BorderContainer width="50"
width.b1="400"
height="300"
cornerRadius="5"
backgroundImage="@Embed(source='images/menu1.png')"
backgroundImageFillMode="clip"
id="b1"
resizeEffect="Resize"/>
<s:BorderContainer width="50"
width.b2="400"
height="300"
cornerRadius="5"
backgroundImage="@Embed(source='images/menu2.png')"
backgroundImageFillMode="clip"
id="b2"
resizeEffect="Resize"/>
<s:BorderContainer width="400"
width.b1="50"
width.b2="50"
height="300"
cornerRadius="5"
backgroundImage="@Embed(source='images/menu3.png')"
backgroundImageFillMode="clip"
id="b3"
resizeEffect="Resize"/>
</s:HGroup>
</s:Application>
分享到:
相关推荐
Flex提供了`Fade`、`Slide`等效果类,可以通过`Effect`对象添加到弹出窗口上。例如,使用`Slide`效果让窗口从右下角平滑滑入: ```actionscript var slideIn:Slide = new Slide(); slideIn.properties.direction = ...
slides = event.result.album.slide; } private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString, event.fault.faultCode); } ]]> url=...
slides.eq(slideIndex).show(); if (slideIndex == slides.length - 1) slideIndex = 0; else slideIndex++; setTimeout(showSlides, 3000); // 每3秒切换一次 } $('.next').click(function() { showSlides...
$images.hide().eq(slideIndex).show(); } $('#prev').on('click', function() { moveSlide('prev'); }); $('#next').on('click', function() { moveSlide('next'); }); }); ``` 以上代码中,`moveSlide`...
ElementUI提供了响应式布局的支持,通过`flex`布局或者媒体查询,我们可以确保SlideBar在不同设备上都能良好显示。 6. **事件监听与交互**:为了实现动态加载,我们需要监听用户的登录、角色切换等事件,并根据这些...
<img src="images/show.jpg" alt="幻灯片1"> <!-- 更多幻灯片... --> ``` 接下来,使用CSS来控制幻灯片的布局和样式。我们可以设置容器的宽度、高度,以及幻灯片的定位方式。例如,如果想要幻灯片水平滑动,...
Audio: Load sounds Control the playback of three different MP3 files. Feature highlight: Load images Select and view different images in this slide show. Feature highlight: ...
图片可能展示了Flexbox属性(如 `flex-direction`、`align-items` 和 `justify-content`)如何工作,帮助理解如何在Ionic中创建对齐和流式布局。 7. **组件状态管理**: 图片可能还涵盖了组件的不同状态,如激活...
动画类控制了动画的存在与否,并且示例中定义了一个名为`slide500ms`的动画,该动画可能包含了展开和收起的动画效果,这里使用了500毫秒的时长。但具体的动画效果和细节并没有在提供的内容中给出,可能需要在其他...