# aardio 范例: 高级选项卡 - 入门



```aardio
//入门
import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
mainForm = win.form(text="高级选项卡 - 入门";right=1040;bottom=642;bgcolor=0xFFFFFF;border="none")
mainForm.add(
caption={cls="bkplus";text="选项卡演示";left=35;top=12;right=160;bottom=30;color=0xF0CAA6;dl=1;dt=1;font=LOGFONT(h=-16);z=5};
logo={cls="bkplus";text='\uF0AD';left=6;top=9;right=35;bottom=34;color=0xF0CAA6;dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=4};
tabButton1={cls="plus";text="测试1";left=166;top=5;right=294;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF00A';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=3};
tabButton2={cls="plus";text="测试2";left=294;top=5;right=422;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF11C ';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=6};
tabPanel={cls="custom";left=0;top=40;right=1040;bottom=643;bgcolor=0xFFFFFF;db=1;dl=1;dr=1;dt=1;z=1};
titleBar={cls="bkplus";left=0;top=0;right=1042;bottom=41;bgcolor=0xE48900;dl=1;dr=1;dt=1;z=2}
)
/*}}*/

//导入"高级选项卡（ tab plus control ）"
import win.ui.tabs;

/*
高级选项卡入门指南: https://www.aardio.com/zh-cn/docs/library-guide/std/win/ui/tabs/_.html

创建"高级选项卡"步骤：

1. 在窗体上添加两个 plus 控件 mainForm.tabButton1, mainForm.tabButton2 
这些 plus 控件显示在选项卡头部（ header ）位置，并且用于确定选项卡的外观与排列方向。
	
2. 在窗体上添加一个 custom 控件 mainForm.tabPanel 作为页面容器，
用于在选项卡的客户区（ client area ）加载子窗口以显示不同的页面内容。

然后调用下面的代码创建 win.ui.tabs 控件。
*/
var tabs = win.ui.tabs(mainForm.tabButton1,mainForm.tabButton2);

//可选清除  mainForm.tabButton1,mainForm.tabButton2，这些选项卡获取的默认样式与排列方向与间距已经保存。
tabs.clear();

//指定选项卡右侧预留的空白边距（用于显示下拉菜单，以及其他需要放置的控件）
tabs.margin = 150;

//指定所有选项卡按钮的交互样式，用法与 plus 控件相同
tabs.skin({
	foreground={
		active=0xFFFFFFFF;
		default=0x00FFFFFF;
		hover=0x38FFFFFF
	};
	color={
		default=0xFFFFFFFF; 
	};
	checked={
		foreground={default=0xFFFFFFFF;}; 
		color={default=0xFF42A875;};
	}
})

//添加更多选项卡按钮，调用参数为创建选项卡控件（plus 控件）的属性表
var tabIndex1 = tabs.add({
	text="标签页1";
	iconText='\uF0AD';
	hasCloseButton = true;
})

//继续添加选项卡按钮。
var tabIndex2 = tabs.add({
	text="标签页2";
	iconText='\uF0AD';
	hasCloseButton = true;
})

 //在创建窗体并设为第一个标签页，page1 是一个 win.form 对象。
var formPage1 = tabs.loadForm(tabIndex1);//参数 1 指加载到索引为 tabIndex1 的标签页。

/*
//可自参数指定的窗体代码文件加载子窗口到标签页容器，第一个参数指定选项卡索引（省略则为 #tabs.forms + 1） 
tabs.loadForm(tabIndex1,"\dlg\first.aardio" );  
tabs.loadForm(tabIndex2,"\dlg\hotkey.aardio" );   
*/
 
// 在第一个标签页上添加按钮，用法与 winform.add 相同。
formPage1.add({
   button1 = { 
   		cls="button";//指定控件类名，对应 win.ui.ctrl.button
    	text="按钮2";
    	left=20;top=20;right=120;bottom=50;
    	
    	}
	}
)

formPage1.button1.oncommand = function(){
	formPage1.msgbox("hello")
}

//切换选项卡触发下面的事件
tabs.onSelChange = function(tabIndex,tabButton,form){
	
}

/*
//选项卡调整位置会触发下面的函数
tabs.adjust = function(){
	var x,y,cx,cy = owner.getPos(); //获取选项卡的x,y 坐标,cx为宽度,cy 为高度
}
*/

//设置当前选项卡
tabs.selIndex = 1; 

//也可以用下面的代码自定义关闭按钮的外观样式
tabs.closeButton.skin(
    background = {
        hover = 0xFFe35c51;
        active = 0xFF8f241b;
        default = 0x99FFCC66;
    }
    color = {
        hover = 0xFFFFFFFF;
        active = 0xFFEEEEEE;
        default = 0xCCFFFFFF;
    }
)

//可以自定义关闭按钮在选项卡上的显示位置
tabs.beforeShowCloseButton = function(tabButton,rcTab,rcCloseButton,dpiScaleX){ 
    return rcTab.right - 10 * dpiScaleX, rcTab.top -2* dpiScaleX;
}

//在无边框窗口上添加自定义的标题栏（包含最小化、最大化、关闭等标题栏按钮）
import win.ui.simpleWindow;
win.ui.simpleWindow( mainForm );

mainForm.show();
win.loopMessage(); 

```