注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

有你做翅膀,孤单都是坚强

生命中总要经历曲折,或许是我们不愿意,突然到最后走不通,想重新来过,记录每件小事

 
 
 

日志

 
 
关于我
K24

曾经的生涩,曾经的懵懂,曾经的自恋,都随风去吧。。。

网易考拉推荐
 
 

making ui 之 multitags4flex  

2013-08-07 20:35:24|  分类: @flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
js 版本 tag
making ui 之 multitags4flex - K24 - 有你做翅膀,孤单都是坚强
 
flex 版本 tag

making ui 之 multitags4flex - K24 - 有你做翅膀,孤单都是坚强
 making ui 之 multitags4flex - K24 - 有你做翅膀,孤单都是坚强
 
源码

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="500" height="25" creationComplete="group1_creationCompleteHandler(event)"
xmlns:debugger="com.demonsters.debugger.*">

]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<debugger:MonsterDebuggerFlex id="monsterDebugger"/>
</fx:Declarations>

<s:TextInput id="ti" width="100%" height="99%"/>

</s:BorderContainer>


注意事项
1, 调整两个labelbutton 之间的间距, gap 设值 12
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" gap="12"/>
</s:layout>

2, 添加删除小按钮

this.label = label;
var txt2:TextField = new TextField();
txt2.x = txt.width + 3;
txt2.text = "×";
txt2.width = txt2.textWidth;
txt2.height = txt2.textHeight;
txt2.autoSize = TextFieldAutoSize.LEFT;
txt2.type = TextFieldType.DYNAMIC;
txt2.setTextFormat(new TextFormat("宋体", 12, 0xffffff));
txt2.mouseEnabled = false;


3, 点击删除小按钮之后
1>自定义一个删除事件
2>如下删除操作

private function doTxt2ClickHandler(event:MouseEvent):void{

if(event.currentTarget.width - event.currentTarget.mouseX <17 && event.currentTarget.width - event.currentTarget.mouseX > 11){

MonsterDebugger.trace(_LOC,"doTxt2ClickHandler");

var evt:TagEvent4flex = new TagEvent4flex("deleteEvent");
evt.label = label;
dispatchEvent(evt);

}
}


4, 删除小按钮需要手型, 而labelbutton上的文本不需要, 做如下处理

//txt2 对应删除小按钮

txt2.mouseEnabled = false;


//bg 对应黑色背景

bg.useHandCursor = bg.buttonMode = true;


var bg:Sprite = new Sprite();
bg.graphics.beginFill(0x333333, 1);
bg.graphics.drawRoundRect(0, 0, txt.width + txt2.width + 10, txt.height + 3, 10, 10);
bg.graphics.endFill();
bg.addChildAt(txt,0);
bg.addChildAt(txt2,1);
bg.addEventListener(MouseEvent.CLICK,doTxt2ClickHandler);

addChild(bg);
bg.useHandCursor = bg.buttonMode = true;


5, 判断鼠标落在文本上还是小删除按钮上

event.currentTarget.width - event.currentTarget.mouseX <17 && event.currentTarget.width - event.currentTarget.mouseX > 11


....
  评论这张
 
阅读(29)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017