来自孤鸿的文章
http://chengyun.iteye.com/blog/239404
2008-09-08
在flex里让LinkButton变成一个开关按钮
来自:http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/
其实flex里面的LinkButton有个toggle属性,把它设为true, 这个LinkButton就是一个开关按钮的。问题比较麻烦的是不仅要让这个LinkButton的行为,还要让它具有LinkButton的外观。比如这个LinkButton的selected=true时,它的外观应当像选中状态,比如显示一个蓝色矩形。反之,它的外观就像未选中状态,比如只显示文字。这是用户所期望的。
怎样改变LinkButton的外观呢?请看如下的代码:
skins/ToggleLinkButtonSkin.as
ToggleLinkButtonSkin类扩展了LinkButtonSkin类,在里面增加了几种状态。
Java代码
/**
* http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/
*/
package {
import mx.skins.halo.LinkButtonSkin;
public class ToggleLinkButtonSkin extends LinkButtonSkin {
public function ToggleLinkButtonSkin() {
super();
}
override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w, h);
var cornerRadius:Number = getStyle("cornerRadius");
var rollOverColor:uint = getStyle("rollOverColor");
var selectionColor:uint = getStyle("selectionColor");
graphics.clear();
switch (name) {
case "upSkin":
// 画一个不可见矩形,作为用户的点击区域
drawRoundRect(
0, 0, w, h, cornerRadius,
0, 0);
break;
//增加了selectedUpSkin和selectedOverSkin两种状态,实际上和原来的overSkin一样
case "selectedUpSkin":
case "selectedOverSkin":
case "overSkin":
drawRoundRect(
0, 0, w, h, cornerRadius,
rollOverColor, 1);
break;
//增加了selectedDownSkin状态,实际上和原来的downSkin是一样的外观
case "selectedDownSkin":
case "downSkin":
drawRoundRect(
0, 0, w, h, cornerRadius,
selectionColor, 1);
break;
//增加了selectedDisabledSkin状态,实际上和原来的disabledSkin一样
case "selectedDisabledSkin":
case "disabledSkin":
// Draw invisible shape so we have a hit area.
drawRoundRect(
0, 0, w, h, cornerRadius,
0, 0);
break;
}
}
}
}
如何使用ToggleLinkButtonSkin呢?
main.mxml:
Java代码
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/06/creating-a-toggleable-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_toggle_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="toggle:">
<mx:CheckBox id="toggleCheckBox" />
</mx:FormItem>
<mx:FormItem label="selected:">
<mx:CheckBox id="selectedCheckBox"
selected="{linkButton.selected}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:LinkButton id="linkButton"
label="LinkButton"
toggle="{toggleCheckBox.selected}"
selected="{selectedCheckBox.selected}"
skin="skins.ToggleLinkButtonSkin"
/>
</mx:Application>
分享到:
相关推荐
flex linkbutton选中变色,这个是比较容易理解,是在一些网上代码的基础上更改的
flex中html样式的LinkButton
这是我自己写的一个flex组件,使用简单,在使用的时候,只需要在页面载入里,新建组件对象就OK,另外还有一个方法监听控件返回的的页数,可以实现分面。flex会生成linkButton,并且可以按需要控件显示的数量。如有不...
关于linkbutton的用法,linkbutton的样式和用法是我们的一个很好的出路
Easyui的panel面板,在panel的面板中动态添加Linkbuton按钮的编辑方法,下面把实现思路及代码记录到脚本之家平台,供大家参考
LinkButton实现图片文字Button效果
Flex4视频教程_03-05Button,LinkButton,CheckBox的使用.rar )
Flex中没有设置LinkButton的背景色的属性,可以直接通过调用样式方法画出LinkButton的背景色
IE10中LinkButton没作用解决文件,把文件拉到项目中即可!
1、flex 是开发swf方法的一种 2、flexBuilder基于eclipse的IDE集成Design、debug动态help 4j:ant脚本 3、flex framework visual components Manager classes RPC/Messaging/Data Service c Utilities 4、MxML ...
这次做了一个项目测试的时候郁闷了好一阵,在开发的时候没有问题,但是一传到服务器上IE10下LinkButton就没有作用了,调试后发现少了_doPostBack,后来找了好久找到了解决方案,在网站的根目录下App_Browsers文件夹...
解决IE10和IE11点击LinkButton没反应的问题,由于Microsoft .Net Framework 4.0下ASP.NET在IE10以上版本访问LinkButton时不能触发doPostBack事件,在分页或者控件使用LinkButton的时候点击无反应或提示doPostBack...
使用方法如下: <![CDATA[ import mx.core.FlexSprite; import mx.effects.easing.Bounce;... <mx:LinkButton x="477" y="53" id="btnFlexSpy" label="LinkButton" click="debug()"/> </mx:Application>
在web项目的过程中,特别是开发ASP.NET应用程序,经常会用到数据显示空间GridView控件,然后需要每行的结尾放置一个button或linkbutton来对当前行进行操作。如下图,添加一个删除按钮,当点击按钮时删除所在行的记录...
Button控件可分为button控件、LinkButton控件、ImageButton控件三类,而LinkButton控件则在页面上显示为一个超级链接,下面与大家分享下其具体应用
1.加载方式 2.属性列表 3.方法列表
flex、flash builder注册表单、LinkButton、AnimateColor
在该示例中,该列包含一个显示购物车的 Button 控件。 VBC#C++F#JScript 复制不支持该语言或没有可用的代码示例。 VBC#C++F#JScript 复制 CommandName="AddToCart" CommandArgument="((GridViewRow) ...