源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

FLEX 仿Google联想框效果

  • 时间:2021-12-14 04:09 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:FLEX 仿Google联想框效果
首先是事件源,也就是从何而起,如下的一个输入框:
[u]复制代码[/u] 代码如下:
<mx:FormItem label="集团客户:" width="42%"> <!--change1--> <mx:TextInput id="txtAssociation" width="235" maxChars="32" change="associate();"/> </mx:FormItem>
然后就是处理效果,这些内容都是从数据库得到的数据,动态的查出的。
[u]复制代码[/u] 代码如下:
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);             }             /**--------------------------联想-------------------------------**/
还有一个类,这里也贴出来吧。呵呵,共享原则,完全可实现。
[u]复制代码[/u] 代码如下:
<?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>         <!--[CDATA[             private function initApp():void{                 showEffect.play();             }         ]]-->     </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当中也是为了能够更好的实现查询效果.所以也要求做这么一个,动态查询.
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部