<?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跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动"是一种常见的布局技巧,主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧,提供持续的导航...
首先利用标准流的父盒子来排列元素的上下位置,然后通过为内部子元素设置浮动来排列左右位置。这种做法符合“多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动”的网页布局第一准则。 #### 三、清除浮动 ...
定制手势:播放/暂停(全屏/嵌入模式双击,浮动模式单击),浮动和全屏切换(双击),音量/亮度调节(上下滑动),进度调节(左右滑动) 支持airPlay 支持UITableview自动管理嵌入和浮动模式切换 视频比例填充...
通过设置`box-shadow`属性,我们可以为导航菜单项添加上下左右的阴影,从而制造出深度和立体感。例如: ```css .menu-item { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } ``` 2. **渐变(Gradients)**:...
- margin 属性可以设置为单个值、两个值、三个值或四个值,表示所有边距、左右边距、上下边距或分别指定每个边距。可以为 auto,所以 B 选项是错误的。 - position 属性用于定位,静态定位是 `position: static`,...
* X:将浮动图件左右翻转 * Y:将浮动图件上下翻转 * SPACE:将浮动图件旋转90度 * CTRL+INS:将选取图件复制到编辑区里 * SHIFT+INS:将剪贴板里的图件贴到编辑区里 * SHIFT+DEL:将选取图件剪切放入剪贴板里 * ALT...
19. 水平(垂直)居中:在页面中的某个元素处于父级的上下或左右的相同距离。 20. 标准头(尾):定义相同的页面头或尾元素集合。 二、文本格式化 1. 段落:p 2. 斜体:address(联系信息)、em(强调)、i(突出...
- **取值**: `both`(清除左右两侧浮动)、`left`(清除左侧浮动)、`right`(清除右侧浮动)。 - **作用**: 避免元素受到前面浮动元素的影响。 **3. position** - **功能**: 定义元素的定位类型。 - **取值**: `...
17. **水平/垂直居中**是将元素在父容器内保持上下或左右相同距离的布局技巧。 18. **标准头/尾**是指在多个页面中重复出现的头部或尾部元素集合,如logo、导航菜单等。 在文本格式化方面,HTML提供了多种标签来...
孤立危险标志用于标记周围有可航水域但存在局限性危险的物体,标志颜色为黑色,中间带有红色横纹,顶标为上下两个黑球,夜间发出白色光。 安全水域标志表示在其周围均可以安全航行,常用于中线、航道中央或入口标识...
【标题】:“多方向滚动的焦点图”是一种网页设计中的动态展示技术,它结合了jQuery库,使得图像或内容能够以多种方式(如上下、左右、对角线等)进行平滑滚动,从而吸引用户的注意力并提升用户体验。这种效果常用于...
19. 水平(水平居中)是指在页面中的某个元素处于父级的上下或左右的相同距离。 20. 标准头(Standard Header)是指定义相同的页面头或尾元素集合。 二、文本格式化 1. 段落(Paragraph)是指使用标签定义的文本块...
按住Alt键(或同时按住鼠标上的两个按钮)再拖动左右(上下)边距,可精确调整其值(在标尺上会显示具体值)。 2. 按住Alt再进行相应操作,还可以精确调整图形、艺术字等“对象”的形状、大小和在文档中的位置等。 ...
- 在调整文档边距时,按住Alt键拖动左右或上下边距,可以在标尺上看到精确数值,实现精确调整。 - 按住Alt进行图形或艺术字的操作,能实现精确的形状、大小和位置调整。 - 按住Alt单击单元格,可快速选定整列;按...
- `margin`和`padding`:设置元素边距和内边距,可以单独设置上下左右,也可以简写。 - `border`:边框属性,包括`border-style`(样式,如`dotted`、`solid`等)、`border-width`(宽度)和`border-color`(颜色...
提供两个值,则上下共享一个,左右共享另一个;三个值时,第一个为上,第二个为左右,第三个为下;四个值则分别对应上、右、下、左。 `padding` 是内边距,它定义了元素内容与边框之间的空间。与 `margin` 类似,`...
4. `margin`和`padding`分别设置元素的外边距和内边距,可以单独设置上下左右或简写。 5. `border-style`定义边框样式,如`dotted`、`dashed`、`solid`等。 6. `border-width`设置边框宽度,`border-color`定义边框...