web界面框架的设计之二--LinkBar组件实现顶级菜单

利用LinkBar 实现菜单功能，代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="60"
	 creationComplete="topinit()" >
	 <mx:Style>
	 	.linkbarset
	 	{
	 		rollOverColor:#93a9b4;
	 	}
	 </mx:Style>
	 <mx:Metadata>
    	[Event(name="topOpEvent","MyEvent.TopEvent")]
    </mx:Metadata>
	<mx:Script>
		<![CDATA[
			import mx.collections.Sort;
			import Modules.MainPage;
			import ValueObject.User;
			import mx.events.ItemClickEvent;
			import mx.rpc.remoting.mxml.RemoteObject;
			import mx.rpc.AsyncToken;
			import mx.rpc.AbstractOperation;
			import mx.rpc.AsyncResponder;
			import mx.collections.ArrayCollection; 
			import mx.collections.Sort;
			import mx.collections.SortField;
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			import components.MenuPage;
			import MyEvent.TopEvent;
					
			public var MenuRo:RemoteObject;
			public var SessionService:RemoteObject;
			public var menuPage:MenuPage;
			
			
			[Bindable]
            [Embed(source="images/1.gif")]
            private var img1:Class;
            
            [Bindable]
            [Embed(source="images/2.gif")]
            private var img2:Class;
            
            [Bindable]
            [Embed(source="images/3.gif")]
            private var img3:Class;
            
            [Bindable]
            [Embed(source="images/4.gif")]
            private var img4:Class;
            
            [Bindable]
            [Embed(source="images/5.gif")]
            private var img5:Class;
            
            [Bindable]
            [Embed(source="images/6.gif")]
            private var img6:Class;
            
            private var imgclass:Class;
            private var array:Array = new Array();
            
            private var imgStr:Array = new Array(img1,img2,img3,img4,img5,img6);
            private var sortStr:Array = new Array(1,2,3,4,5,6);
            
            private var _user:User = new User();

			private function topinit():void
		    {
		    	MenuRo = new RemoteObject("menuService"); 
		    	
		    	var menuToken:AsyncToken ;
				var operation:AbstractOperation = MenuRo.getOperation("getMenu");
				menuToken = operation.send();
				menuToken.addResponder(new AsyncResponder(success,null));   
				
				
		    }
		    
		    //初始化顶级菜单
			private function success(result:Object,token:Object=null):void
			{
				var eve:ResultEvent = result as ResultEvent;
				if(eve.result != null)
				{					
					var arrayOr:ArrayCollection = eve.result as ArrayCollection;
					for(var i:int =0;i<arrayOr.length;i++){
						var objOr:Object = arrayOr[i];
						for(var j:int=0;j<sortStr.length;j++){
							if(sortStr[j]==objOr["sort"]){
								imgclass = imgStr[j];
							} 
						}
						array.push({data:objOr["id"],hreflink:objOr["hreflink"],img:imgclass,sort:objOr["sort"]});
					}
					var arrayCollection:ArrayCollection = new ArrayCollection(array);
					var sort:Sort = new Sort;
					
					//默认是按照升序排序的
					sort.fields = [new SortField("sort")];
					arrayCollection.sort = sort;
					topLinkBar.dataProvider=arrayCollection;
				}
			}
		    
		    public function getLeftTree(e:ItemClickEvent):void
			{
				var menuToken:AsyncToken ;
				var operation:AbstractOperation = MenuRo.getOperation("getTree");
				menuToken = operation.send(e.item.data);
				menuToken.addResponder(new AsyncResponder(treeSuccess,null));      
			}
			
			//树回调函数
			 private function treeSuccess(result:Object,token:Object=null):void
			{
				var eve:ResultEvent = result as ResultEvent;
				if(eve.result != null)
				{		
					 var returnString:String = eve.result as String;
					 var treeDate:XML = new XML(returnString);
					 var topEvent:TopEvent = new TopEvent("topOpEvent",treeDate);
				     dispatchEvent(topEvent);
				}
			} 
			
			
		]]>
	</mx:Script>
	<mx:HBox x="0" y="0" width="100%" height="100%">
		<mx:Label text="交易公示网" height="100%" width="300" fontSize="36" fontStyle="italic" textAlign="center"/>
		<mx:LinkBar width="100%" height="100%" id="topLinkBar" borderStyle="none" 
			iconField="img"  horizontalAlign="right" linkButtonStyleName="linkbarset" itemClick="getLeftTree(event)" >
		</mx:LinkBar>
		<mx:Spacer width="20" />
	</mx:HBox>
	
</mx:Canvas>

 

楼主JS挺强悍的啊。

又是一大篇的代码，有没有预览图

看清楚哦，这可不是JS，而是正宗的AS
不过我觉得楼主只是贴代码，那就没必要发到这上面来了。浪费大家的时间。

哪个是js?