• 分类

  • 重置

FLEX 仿Google联想框效果

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

    复制代码 代码如下:

    <mx:FormItem label=”集团客户:” width=”42%”>
    <!–change1–>
    <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>
            <!–[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当中也是为了能够更好的实现查询效果.所以也要求做这么一个,动态查询.

发表评论

发表评论