# aardio 范例: 简单选项卡（ classic tab control ）



```aardio
//简单选项卡（ classic tab control ）
import win.ui;
/*DSG{{*/
var mainForm = win.form(text="使用简单选项卡控件（win.ui.ctrl.tab）";right=663;bottom=387)
mainForm.add(
tab={cls="tab";left=14;top=16;right=645;bottom=360;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

/*
"简单选项卡（ classic tab control ）"使用指南：
https://www.aardio.com/zh-cn/docs/library-guide/std/win/ui/ctrl/tab.html

tab 选项卡的子页面可以直接加载一个窗体文件，例如：
mainForm.tab.loadForm("\res\frmPage1.aardio")
实际开发软件的时候建议用这种方法。

也可以用 mainForm.tab.add() 函数直接创建窗口。
mainForm.tab.add()的参数与 win.form的参数完全相同，
直接从窗体设计器生成的代码中复制构建窗体的参数放到 mainForm.tab.add() 里面就可以。

tab 子窗口并不需要与 tab 控件保持大小完全一致，不需要去计算坐标。
aardio 窗体设计器可以通过控件的【固定边距】【自适应大小】等属性设置控件在运行时位置保持不变、或自动调整适应窗口大小。 
*/
 
//添加一个窗口作为选项卡的子页面 
var frmPage1 = mainForm.tab.loadForm( text="选项卡标题"; bottom=140;right=325 )
frmPage1.add( 
	button={ bottom=49;text="你好";left=36;right=135;top=21;z=1;cls="button" } 
) 
frmPage1.button.oncommand = function(id,event){
	frmPage1.msgbox( frmPage1.button.text,"也可以使用回调函数" ); 
} 

//添加一个子页面
var frmPage2 = mainForm.tab.loadForm( text="选项卡标题2";bottom=2140;right=325  )
frmPage2.add( 
button={ bottom=49;text="Hello";left=36;right=135;top=21;z=1;cls="button" }
) 
frmPage2.button.oncommand = function(id,event){
	frmPage2.msgbox( frmPage2.button.text,"Hello!" ); 
} 

//切换选项卡时触发此事件
mainForm.tab.onSelChange = function(idx,form){
	mainForm.msgbox("切换选项卡，当前索引：" + idx)
} 

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