FLEX 仿Google联想框效果
FLEX 仿Google联想框效果
发布时间:2016-12-28 来源:查字典编辑
摘要:首先是事件源,也就是从何而起,如下的一个输入框:复制代码代码如下:然后就是处理效果,这些内容都是从数据库得到的数据,动态的查出的。复制代码代...

首先是事件源,也就是从何而起,如下的一个输入框:

复制代码 代码如下:

<mx:FormItem label="集团客户:" width="42%">

<>

<mx:TextInput id="txtAssociation" width="235" maxChars="32" change="associate();"/>

</mx:FormItem>

然后就是处理效果,这些内容都是从数据库得到的数据,动态的查出的。

复制代码 代码如下:

import mx.collections.ArrayCollection;

import mx.events.FlexMouseEvent;

import mx.events.ListEvent;

import mx.managers.PopUpManager;

import resources.com.list.Association;

// 经过渲染的联想结果List

private var list:Association;

// 临时字符串,用于判断当keyUp事件发生时,联想框的值是否发生改变,如未改变则不联想

private var temp:String = '';

private function changeAssociation():void{

temp='';

txtAssociation.text='';

associationResult=null;

if(list != null){

PopUpManager.removePopUp(list);

list = null;

// 清空临时字符串

}

}

private function associate():void {

var str:String = txtAssociation.text;

if(str.length<2){

associationResult=null;

}

if (str != temp) {

if(str.length < 2){

if(list != null){

PopUpManager.removePopUp(list);

list = null;

// 清空临时字符串

temp = '';

}

return;

}

temp = str;

var params:Object = {};

params['areaNO'] = cbxArea.selectedItem.data;

params['netType'] = cbxNetType.selectedItem.data;

params['str'] = str;

params['handle'] = 'associate';

service4association.send(params);

}

}

private function openAssociation():void {

if(service4association.lastResult.items != null)

createAndShow(service4association.lastResult.items.item);

else if(list != null){

PopUpManager.removePopUp(list);

list = null;

// 清空临时字符串

temp = '';

}

}

private function createAndShow(dp:Object):void {

// 每次打开联想框以前, 先清理缓存

if(list != null){

// 将联想框从PopUpManager中移除

PopUpManager.removePopUp(list);

// 清空联想框实例

list = null;

}

list = new Association();

//指定数据源

list.dataProvider = dp;

//获取鼠标坐标并赋值给list

list.x = txtAssociation.x + 219;

list.y = txtAssociation.y + 205;

//大小

list.minWidth = 400;

list.maxHeight = 270;

//注册list外鼠标按下和项目单击事件

list.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, mouseDownOutsideHandler);

list.addEventListener(ListEvent.ITEM_CLICK, itemClik);

//弹出并显示list

PopUpManager.addPopUp(list, this, false);

}

private var associationResult:Object;

private function itemClik(event:ListEvent):void{

associationResult = ArrayCollection(Association(event.target).dataProvider).getItemAt(event.rowIndex);

txtAssociation.text = associationResult.label;

//Alert.show(associationResult.data);

removePopUpIDisplay(Association(event.target));

}

private function mouseDownOutsideHandler(event:MouseEvent):void{

removePopUpIDisplay(Association(event.target));

}

private function removePopUpIDisplay(obj:Association):void{

// 清空临时字符串

temp = '';

obj.removeEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, mouseDownOutsideHandler);

PopUpManager.removePopUp(obj);

}

/**--------------------------联想-------------------------------**/

还有一个类,这里也贴出来吧。呵呵,共享原则,完全可实现。

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>

<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp();" xmlns:filters="flash.filters.*"

alternatingItemColors="[#EEEEEE, white]" buttonMode="true" >

<mx:Script>

<>

</mx:Script>

<mx:itemRenderer>

<mx:Component>

<mx:HBox horizontalGap="0" paddingLeft="5">

<mx:Image source="@Embed('resources/icons/building.png')"/>

<mx:Text text="{data.prefix}" paddingLeft="5"/>

<mx:Text text="{data.str}" color="green"/>

<mx:Text text="{data.suffix}"/>

</mx:HBox>

</mx:Component>

</mx:itemRenderer>

<mx:Parallel id="showEffect" target="{this}" duration="300">

<mx:Fade />

<mx:WipeDown />

</mx:Parallel>

</mx:List>

FLEX--仿Google联想框效果--现在好多地方都用到了这样的效果,当然,现在Google下线了,不让用了,但是跟网上说的一样,想办法,它还是能出来的.呵呵,不过对于我们没有多少必要了.这里在Flex当中也是为了能够更好的实现查询效果.所以也要求做这么一个,动态查询.

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Flash教程学习
热门Flash教程学习
网页设计子分类