# aardio 范例: 用 win.ui.tabs 创建水平"高级选项卡"



```aardio
//用 win.ui.tabs 创建水平"高级选项卡"
import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
var winform = win.form(text="简单多标签浏览器 —— 使用「高级选项卡」实现";right=992;bottom=623;bgcolor=16777215)
winform.add(
tabBorder={cls="bkplus";left=0;top=33;right=991;bottom=34;bgcolor=32768;border=1;disabled=1;dl=1;dr=1;dt=1;z=1};
tabPanel={cls="custom";left=-2;top=53;right=989;bottom=622;bgcolor=0xFFFFFF;db=1;dl=1;dr=1;dt=1;z=4};
tabPlus1={cls="plus";text="网页开发";left=0;top=2;right=149;bottom=34;bgcolor=0xFFFFFF;border={bottom=1;color=-16744448};dl=1;dt=1;font=LOGFONT(h=-14);z=2};
tabPlus2={cls="plus";text="JavaScript 脚本";left=149;top=2;right=299;bottom=34;bgcolor=0xFFFFFF;border={bottom=1;color=-16744448};dl=1;dt=1;font=LOGFONT(h=-14);z=3}
)
/*}}*/

import win.ui.tabs;
var tabs = win.ui.tabs(winform.tabPlus1,winform.tabPlus2);
tabs.clear(); //清除模板

//选项卡样式	
tabs.skin({
	foreground={
		active=0xFFFFFFFF;
		default=0x00FFFFFF;
		hover=0xFFCCCCCC;
	};
	checked={
		foreground={ 
			default=0x00FFFFFF; 
		};
		border = { 
			default = {left=1;right=1;top=1;color=0xFF008000} 
			disabled = {left=1;right=1;top=1;color=0xFF008000} 
		}; 
	}
}); 


import win.ui.tooltip; 
var tooltipCtr = win.ui.tooltip( winform );//在窗口上创建tooltip控件 

import web.form;
tabs.createWebForm = function(url){
 
	//动态添加更多选项卡
	var tabIndex = tabs.add(text="正在加载...",hasCloseButton = true) 
	tabs.selIndex = tabIndex;//选中新选项卡
	
	var form = tabs.loadForm(tabIndex); 
	form.show();
	
	var wb = web.form( form );
	wb.noScriptErr=true;
	
	//获取选项卡按钮
	var tab = tabs.tabList[tabIndex];
	
	//绑定选项卡鼠标悬停提示控件
	var ti = tooltipCtr.addTool(tab)
	
	//网页标题变更时更新选项卡文本与提示
	wb.TitleChange = function(title){ 
		tab.text = title; 
		ti.setText( title + '\r\n' + wb.location );
	} 

	//自定义网页弹窗
	wb.NewWindow3 = function(ppDisp, Cancel,dwFlags,bstrUrlContext, bstrUrl ) {
		if(dwFlags & 0x10000/*_NWMF_FORCEWINDOW*/ ){
			var form = win.form(text="正在加载......";width = 800;height=600);
			var wb = web.form( form );
			form.show();
			
			wb.TitleChange = function(title){ 
				winform.text = title; 
			} 
			return wb.application;
		}
		return tabs.createWebForm( "about:blank" ).application;
	}  
 
	if(url){
		wb.go(url);	
	}
	
	return wb;
}

tabs.createWebForm("http://www.aardio.com");

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

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

winform.show(3/*_SW_MAXIMIZE*/);
win.loopMessage();
```