`

上下,左右浮动,横头

VB 
阅读更多

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:flexlib="http://code.google.com/p/flexlib/"
		   xmlns:mx="http://www.adobe.com/2006/mxml"
		   xmlns:views="STICK.*"
		   width="100%"
		   height="100%"
		   top="0"
		   bottom="0"
		   left="0"
		   right="0"
		   initialize="initApp();"
		   >
	
	<mx:Style>
		.right{
			horizontalDividerCursor:Embed(source="assets/report/right.gif");
		}
		
		.left{
			horizontalDividerCursor:Embed(source="assets/report/left.gif");
		}
		
    	.butt {
			fontFamily: 宋体;
			fontSize: 13;
		}
		
		 .accordion { 
        	fontSize:14px;  
        	font-weight: normal;
        	fontFamily: 宋体;
    	}

		.ssdd { 
        	top:0;
		   	bottom:0;
		   	left:0;
		   	right:0;
    	}
    	
    	
    	.vaccordion
		{
			backgroundColor: #FFFFFF;
			borderStyle: "solid";
			
			paddingBottom: -1;
			paddingLeft: -1;
			paddingRight: -1;
			paddingTop: -1;
			verticalGap: -1;
			horizontalGap: -1;
			textAlign: "left";
		}
		
		/*
		//------------------------------
		//  AccordionHeader
		//------------------------------
		*/
		
		.accordionHeader
		{
		/*	selectedFillColors: #FFFFFF, #FFFFFF; */ /* overrides the calculated fillcolors */
			
		/*	disabledIcon: null; */
			disabledSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	downIcon: null; */
			downSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			horizontalGap: 5;
		/*	overIcon: null; */
			overSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			paddingTop: 5;
			paddingBottom: 5;
		/*	selectedDisabledIcon: null; */
			selectedDisabledSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	selectedDownIcon: null; */
			selectedDownSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	selectedOverIcon: null; */
			selectedOverSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
		/*	selectedUpIcon: null; */
			selectedUpSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			
		/*	upIcon: null; */
			upSkin: ClassReference("mx.skins.halo.AccordionHeaderSkin");
			
			fontFamily: 宋体; 
			fontWeight:normal;
			fontSize:12;
			fontSharpness:-200;
			fontThickness:-100;
			fontGridFitType: none;
			
			
		}
		.lvbox{
			fontFamily: 宋体; 
			fontWeight:normal;
			fontSize:12;
			fontSharpness:-200;
			fontThickness:-100;
			fontGridFitType: none;
		}
    	
    </mx:Style>


	<mx:Script>
		<![CDATA[
			import mx.events.DividerEvent;
			import mx.events.FlexEvent;
			import mx.events.ChildExistenceChangedEvent;
			import flexlib.containers.SuperTabNavigator;
			import mx.core.Container;
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			private var selectedView:SuperTabNavigator=null;
			

			import flexlib.controls.SuperTabBar;
			import flexlib.events.TabReorderEvent;
			import mx.controls.Label;
			import mx.containers.VBox;
			import mx.containers.Canvas;
			import flexlib.controls.tabBarClasses.SuperTab;

			import mx.containers.Panel;

			[Embed(source="assets/document.png")]
			private var document_icon:Class;

			[Embed(source="assets/home.png")]
			private var home_icon:Class;


			private function initTabs():void
			{
				addTab("Home", nav, "This tab can't be closed", home_icon);

//				for (var i:int=0; i < 3; i++)
//				{
//					addTab("Tab " + (i + 1), nav);
//				}



				callLater(initNonClosableTab);
			}

			private function initNonClosableTab():void
			{
				nav.setClosePolicyForTab(0, SuperTab.CLOSE_NEVER);
			}

			private function addTab(lbl:String, navigator:SuperTabNavigator, contentString:String=null, icon:Class=null):void
			{
				for (var i:int=0; i < nav.numChildren; i++)
				{
					var vb:VBox=navigator.getChildAt(i) as VBox;
					trace(vb.label);
					if (vb.label == lbl)
					{
						nav.selectedIndex=i;
						return;
					}
				}

				if (lbl == "")
					lbl="(Untitled)";

				var curNum:Number=nav.numChildren + 1;

				var child:VBox=new VBox();

				child.setStyle("closable", true);
				//child.setStyle("closable", true);
				child.styleName ="ssdd";
				child.label=lbl;

				if (icon)
				{
					child.icon=icon;
				}
//				else
//				{
//					child.icon=document_icon;
//				}

				//var label:Label=new Label();
				//label.text=contentString == null ? "Content for: " + lbl : contentString;

				//	var aaaa:Array = navigator.getChildAt(;


				if (contentString == 'u1')
				{
					child.addChild(u1);
					u1.visible=true;
				}
				if (contentString == 'u2')
				{
					child.addChild(u2);
					u2.visible=true;
				}
				if (contentString == 'u3')
				{
					child.addChild(u3);
					u3.visible=true;
				}
				if (contentString == 'u4')
				{
					child.addChild(u4);
					u4.visible=true;
				}
				if (contentString == 'u5')
				{
					child.addChild(u5);
					u5.visible=true;
				}
				if (contentString == 'u6')
				{
					child.addChild(u6);
					u6.visible=true;
				}
				if (contentString == 'u7')
				{
					child.addChild(u7);
					u7.visible=true;
				}
				
				if (contentString == 'u8')
				{
					child.addChild(u8);
					u8.visible=true;
				}
				navigator.addChild(child);

				nav.selectedIndex=nav.numChildren - 1;
//				navigator.addEventListener(ChildExistenceChangedEvent.CHILD_ADD,addOK);


			}


			/* The following two functions are a bit of a hack to try to get the
			 * tab navigator to refresh the display and resize all the tabs. When
			 * you change stuff like tabWidth (which is a style) then the tab
			 * navigator has a hard time re-laying out the tabs. Adding and
			 * removing a child can sometimes trigger it to re-layout the tabs.
			 * I don't know, but just don't change tabWdith or horizontalGap or whatever
			 * else at runtime, OK? Pick some values and stick with them.
			 */
			private function invalidateLater():void
			{
				var child:Canvas=new Canvas();
				nav.addChild(child);
				nav.removeChild(child);
				callLater(invalidateNav);


			}

			private function invalidateNav():void
			{
				nav.invalidateDisplayList();

			}

			private function tabsReordered(event:TabReorderEvent):void
			{
				var tabBar:SuperTabBar=event.currentTarget as SuperTabBar;
				tabBar.setChildIndex(tabBar.getChildAt(event.oldIndex), event.newIndex);

			}


			private function initApp():void
			{
				initTabs();
			}

			private function open(e:Event):void
			{
				if (e.target.id == "tab1")
				{
					//selectedView = viewStack.getChildByName("u1") as Container  as SuperTabNavigator;
					addTab("用户信息", nav, 'u1')
						//nav.selectedChild=nav.getChildByName("tab1") as Container;
						//viewStack.selectedChild = u1;
				}
				if (e.target.id == "tab2")
				{
					//selectedView = viewStack.getChildByName("tab2") as Container;
					addTab("区域维护", nav, 'u2')
						//viewStack.selectedChild = u2;
				}
				if (e.target.id == "tab3")
				{
					//selectedView = viewStack.getChildByName("tab3") as Container;
					addTab("分项信息", nav, 'u3')
						//viewStack.selectedChild = u3;
				}
				if (e.target.id == "tab4")
				{
					//selectedView = viewStack.getChildByName("tab4") as Container;
					addTab("耗能设备", nav, 'u4')
						//viewStack.selectedChild = u4;
				}
				if (e.target.id == "tab5")
				{
					//selectedView = viewStack.getChildByName("tab5") as Container;
					addTab("权限设置", nav, 'u5')
						//viewStack.selectedChild = u5;
				}
				if (e.target.id == "tab6")
				{
					//selectedView = viewStack.getChildByName("tab6") as Container;
					addTab("检测设备", nav, 'u6')
						//viewStack.selectedChild = u6;
				}
				if (e.target.id == "tab7")
				{
					//selectedView = viewStack.getChildByName("tab7") as Container;
					addTab("厂家信息", nav, 'u7')
						//viewStack.selectedChild = u7;
				}
				if (e.target.id == "tab8")
				{
					//selectedView = viewStack.getChildByName("tab7") as Container;
					addTab("设备预案", nav, 'u8')
						//viewStack.selectedChild = u7;
				}

			}

			public function divider_handler(event:DividerEvent):void
			{
				if (hDividedBox.getChildAt(0).width == 0)
				{
					rightResize.end();
					rightResize.play();
				}
				else
				{
					leftResize.end();
					leftResize.play();
				}
			}

			public function changDeviderStyle(event:Event):void
			{

				if (hDividedBox.getChildAt(0).width == 0)
				{
					hDividedBox.styleName="right";
				}
				else
				{
					hDividedBox.styleName="left";
				}
			}
		]]>

	</mx:Script>

	<mx:Grid id="grid"
			 width="100%"
			 height="100%"
			 horizontalGap="0"
			 verticalGap="0"
			 >
		<mx:GridRow width="100%"
					height="100%">
			<mx:GridItem width="100%"
						 height="100%"
						 >
				<mx:HDividedBox id="hDividedBox"
								width="100%"
								height="100%"
								dividerRelease="divider_handler(event)"
								mouseMove="changDeviderStyle(event)">
					<mx:Canvas id="leftCanv"
							   width="150"
							   height="100%"
							   >
						<flexlib:VAccordion id="accordion2"
											width="100%"
											height="100%" headerStyleName="accordionHeader" styleName="vaccordion">
							<!-- Define each panel using a VBox container. -->
							<mx:VBox label="基础信息" verticalGap="0">
								<mx:LinkButton id="tab1"
											   click="open(event)"
											   label="用户信息"
											    styleName="lvbox"/>
								<mx:LinkButton id="tab2"
											   click="open(event)"
											   label="区域维护"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab3"
											   click="open(event)"
											   label="分项信息"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab4"
											   click="open(event)"
											   label="耗能设备"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab5"
											   click="open(event)"
											   label="权限设置"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab6"
											   click="open(event)"
											   label="检测设备"
											   styleName="lvbox"/>
								<mx:LinkButton id="tab7"
											   click="open(event)"
											   label="厂家信息"
											   styleName="lvbox"/>
							</mx:VBox>

							<mx:VBox label="预约信息维护" >
								<mx:LinkButton id="tab8"
											   click="open(event)"
											   label="设备预约"
											   styleName="lvbox"/>
							</mx:VBox>

							<mx:VBox label="专家信息维护">
								<mx:LinkButton id="other1"
											   click="open(event)"
											   label="专家信息1"
											   styleName="lvbox"/>
							</mx:VBox>

							<mx:VBox label="其他信息">
								<mx:LinkButton id="other2"
											   click="open(event)"
											   label="其他信息1"
											   styleName="lvbox"/>
							</mx:VBox>

						</flexlib:VAccordion>
					</mx:Canvas>
					<mx:Canvas id="rightCanv"
							   width="100%"
							   height="100%"
							   backgroundColor="#bec3ca">


						<flexlib:SuperTabNavigator id="nav"
												   scrollSpeed="25"
												   dropShadowEnabled="true"
												   stopScrollingEvent="{MouseEvent.MOUSE_UP}"
												   startScrollingEvent="{MouseEvent.MOUSE_DOWN}"
												   width="100%"
												   height="100%"
												   horizontalGap="0"
												   tabWidth="180" fontSize="12" fontFamily="宋体" fontWeight="normal"
												   fontSharpness="-200" fontThickness="-100"
												   tabHeight="30"
												   backgroundColor="#f0f6e9"  
												   closePolicy="{SuperTab.CLOSE_ROLLOVER}">
						</flexlib:SuperTabNavigator>
					</mx:Canvas>
				</mx:HDividedBox>
			</mx:GridItem>

		</mx:GridRow>
	</mx:Grid>
	<views:STICK_USER id="u1"
					  visible="false"/>

	<views:STICK_GROP_TYPE id="u2"
						   visible="false"/>

	<views:STICK_ENERGY_ITEM id="u3"
							 visible="false"/>

	<views:STICK_EQUIP id="u4"
					   visible="false"/>

	<views:STICK_RIGHT id="u5"
					   visible="false"/>

	<views:STICK_EQUIP id="u6"
					   visible="false"/>

	<views:STICK_FACTORY id="u7"
						 visible="false"/>

	<views:set_plan id="u8"
						 visible="false"/>
						 
	<mx:Resize id="leftResize"
			   target="{leftCanv}"
			   widthTo="0"/>
	<mx:Resize id="rightResize"
			   target="{leftCanv}"
			   widthTo="150"/>
</mx:Canvas>

  • 大小: 32 KB
分享到:
评论

相关推荐

    div跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动

    在网页设计中,"div跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动"是一种常见的布局技巧,主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧,提供持续的导航...

    3.3CSS 内容总结(三)浮动.md

    首先利用标准流的父盒子来排列元素的上下位置,然后通过为内部子元素设置浮动来排列左右位置。这种做法符合“多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动”的网页布局第一准则。 #### 三、清除浮动 ...

    ios-EZPlayer:基于AVPlayer封装的视频播放器,功能丰富,快速集成,可定制性强(swift3).zip

    定制手势:播放/暂停(全屏/嵌入模式双击,浮动模式单击),浮动和全屏切换(双击),音量/亮度调节(上下滑动),进度调节(左右滑动) 支持airPlay 支持UITableview自动管理嵌入和浮动模式切换 视频比例填充...

    横向实用立体css导航菜单

    通过设置`box-shadow`属性,我们可以为导航菜单项添加上下左右的阴影,从而制造出深度和立体感。例如: ```css .menu-item { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } ``` 2. **渐变(Gradients)**:...

    html+css笔试附答案 .pdf

    - margin 属性可以设置为单个值、两个值、三个值或四个值,表示所有边距、左右边距、上下边距或分别指定每个边距。可以为 auto,所以 B 选项是错误的。 - position 属性用于定位,静态定位是 `position: static`,...

    DXP快捷键一览资料.pdf

    * X:将浮动图件左右翻转 * Y:将浮动图件上下翻转 * SPACE:将浮动图件旋转90度 * CTRL+INS:将选取图件复制到编辑区里 * SHIFT+INS:将剪贴板里的图件贴到编辑区里 * SHIFT+DEL:将选取图件剪切放入剪贴板里 * ALT...

    web前端学习总结(精华版).pdf

    19. 水平(垂直)居中:在页面中的某个元素处于父级的上下或左右的相同距离。 20. 标准头(尾):定义相同的页面头或尾元素集合。 二、文本格式化 1. 段落:p 2. 斜体:address(联系信息)、em(强调)、i(突出...

    CSS常用的代码单词

    - **取值**: `both`(清除左右两侧浮动)、`left`(清除左侧浮动)、`right`(清除右侧浮动)。 - **作用**: 避免元素受到前面浮动元素的影响。 **3. position** - **功能**: 定义元素的定位类型。 - **取值**: `...

    web前段学习心得体会.docx

    17. **水平/垂直居中**是将元素在父容器内保持上下或左右相同距离的布局技巧。 18. **标准头/尾**是指在多个页面中重复出现的头部或尾部元素集合,如logo、导航菜单等。 在文本格式化方面,HTML提供了多种标签来...

    航海基础知识航标与资料解析PPT学习教案.pptx

    孤立危险标志用于标记周围有可航水域但存在局限性危险的物体,标志颜色为黑色,中间带有红色横纹,顶标为上下两个黑球,夜间发出白色光。 安全水域标志表示在其周围均可以安全航行,常用于中线、航道中央或入口标识...

    多方向滚动的焦点图

    【标题】:“多方向滚动的焦点图”是一种网页设计中的动态展示技术,它结合了jQuery库,使得图像或内容能够以多种方式(如上下、左右、对角线等)进行平滑滚动,从而吸引用户的注意力并提升用户体验。这种效果常用于...

    web前端复习总结.doc

    19. 水平(水平居中)是指在页面中的某个元素处于父级的上下或左右的相同距离。 20. 标准头(Standard Header)是指定义相同的页面头或尾元素集合。 二、文本格式化 1. 段落(Paragraph)是指使用标签定义的文本块...

    最全的word应用技巧巨著大全(成就word高手).doc

    按住Alt键(或同时按住鼠标上的两个按钮)再拖动左右(上下)边距,可精确调整其值(在标尺上会显示具体值)。  2. 按住Alt再进行相应操作,还可以精确调整图形、艺术字等“对象”的形状、大小和在文档中的位置等。  ...

    word小技巧word小技巧

    - 在调整文档边距时,按住Alt键拖动左右或上下边距,可以在标尺上看到精确数值,实现精确调整。 - 按住Alt进行图形或艺术字的操作,能实现精确的形状、大小和位置调整。 - 按住Alt单击单元格,可快速选定整列;按...

    CSS标签大全.docx

    - `margin`和`padding`:设置元素边距和内边距,可以单独设置上下左右,也可以简写。 - `border`:边框属性,包括`border-style`(样式,如`dotted`、`solid`等)、`border-width`(宽度)和`border-color`(颜色...

    浅谈HTML(css基础样式)

    提供两个值,则上下共享一个,左右共享另一个;三个值时,第一个为上,第二个为左右,第三个为下;四个值则分别对应上、右、下、左。 `padding` 是内边距,它定义了元素内容与边框之间的空间。与 `margin` 类似,`...

    div+css属性.docx

    4. `margin`和`padding`分别设置元素的外边距和内边距,可以单独设置上下左右或简写。 5. `border-style`定义边框样式,如`dotted`、`dashed`、`solid`等。 6. `border-width`设置边框宽度,`border-color`定义边框...

Global site tag (gtag.js) - Google Analytics