功能测试

flex拖动式生成菜单

发布-liushuchao | 查看- | 发表时间-2009-7-28

其实很久以前我就有过用Flash动态生成xml菜单的想法,可是…(种种原因)…没实现,当时非常不甘心。

    现在有Flex了,我又想把xml菜单做一下,昨天搞了一天,终于小有成果,就来和大家分享一下,我认为代码其实写的不好,因为我是从网上七拼八凑拿来的代码,好的是一种思路,‘拖动式的思路’(暂且用这个词吧)

    代码说明:主要代码段都在Panel组件里,而在Panel里Tree的作用举足轻重,Tree的功能很强大,在内部就拖动根节点和叶节点,任意拖动节点就免去了代码实现节点们顺序的问题,我当时就被它这点折服了,还又个垃圾箱,你可以将根节点或叶节点拖到垃圾箱里,这样也免去了删除节点的麻烦,我其实就只完成了个增加节点的功能,并且还只是在最后增加节点(不过由于其天生可拖动性,我这样就完全可以了,你可以把生成的最后节点拖到想要的位置啊!!)。好了,我也不多说了,取之于网民,给之于网民,代码和大体效果下面都有,(里面又很多效果,希望你都理解!毕竟flex太强大了)Enjoy it!!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
   <![CDATA[
    import mx.collections.XMLListCollection;
   
    [Bindable]
    var companyList:XMLListCollection=new XMLListCollection();
   
    private function addFolder():void
    {
     var newNode:XML = <node label="单击此处修改" url="" isBranch="true">
           <node label="单击此处修改" url=""/>
                                 </node>;
     companyList.addItem(newNode);
    }
   
    private function addLeaf():void
    {
     var newNode:XML =<node label="单击此处修改" url=""/>
     companyList.addItem(newNode);
    }
   
   ]]>
</mx:Script>
   
<mx:Panel id="panel" width="500" height="450" layout="absolute" horizontalCenter="-1" verticalCenter="0" title="修改Lebel">
  
        <mx:Tree id="XmlTree" width="282" height="223" x="0" showRoot="false" editable="true"
            dataProvider="{companyList}" labelField="@label" dragEnabled="true" dropEnabled="true"/>
           
        <mx:Tree id="DirtyTree" width="75" height="25" x="302" showRoot="false" dropEnabled="true" y="198"/>
           
   <mx:Button x="96" y="231" label="Creater Xml"
    click="txt.text=''+XmlTree.dataProvider;menu.dataProvider=XmlTree.dataProvider;menu.labelField='@label'"/>

   <mx:TextArea id="txt" x="0" y="261" width="100%" height="127"/>
   <mx:Button x="290" y="71" label="Add Folder" click="addFolder()" width="97"/>
   <mx:Button x="290" y="118" label="Add Leaf" width="97" click="addLeaf()"/>
  
   <mx:ComboBox x="290" y="19" id="cobox"
    dataProvider="{[{label:'修改Label', data:'@label'}, {label:'修改Url', data:'@url'}]}"
    change="XmlTree.labelField=cobox.selectedItem.data;panel.title=cobox.selectedLabel">
   </mx:ComboBox>
   <mx:Label x="324" y="172" text="垃圾箱" width="35" textAlign="center"/>
  
  
</mx:Panel>

 


<mx:MenuBar   id="menu" y="97" horizontalCenter="0">
</mx:MenuBar>

</mx:Application>

转载

http://flexjs.cn/

或许你还对下面的文章感兴趣

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Flash技术 好像5号到了唉。
培训推荐 北京flex as3培训
最新文章
123
456
最近评论
访客留言
赞助商链接FLEX基础 |FLEX培训|Entries RSSCopyright flex培训 www.flexjs.cn

京公网安备110114000966号 京ICP备11015828号-1 | DESIGN BY Seanloo.cn