//<div id="box">
//   <div title="tab1">内容1</div>
//</div



$(function () {

	$('#box').tabs({
		//width : 300,  
		//height : 100,
		//plain : true,  //不显示 背景
		//fit : true,  //全屏铺满
		//border : false,
		//tabWidth : 300,  //选项卡单个宽度
		//tabHeight : 50,  //选项卡单个高度
		//scrollIncrement : 50,  选项卡滚动值
		//scrollDuration : 1000,  每次滚动的持续时间
		//tools : [{     在右上角添加图标并且为图标加事件
		//	iconCls : 'icon-add',
		//	handler : function () {
		//		alert('add');
		//	},
		//},{}],
		//tools : '#tt',
		//toolPosition : 'left', 图标显示左边
		//tabPosition : 'left',  选项卡显示左边
		//headerWidth : 300,   选项卡栏的宽度(tabPosition值必须是left或者right才有效果)
		//selected : 1,  索引为0，初始化被选中的选项卡
		//showHeader : false,  不显示选项卡
		/*
		onSelect : function (title, index) {  选项卡被选中触发
			alert(title + '|' + index);
		}
		
		onUnselect : function (title, index) {  选项卡被选中是，触发获取到上一次点击过的选项卡
			alert(title + '|' + index);
		}
		
		onBeforeClose : function (title, index) {  单个选项卡关闭之前触发，要在选项上加data-options="closable:true"
			alert(title + '|' + index);
		}
		
		onClose : function (title, index) {  单个选项卡关闭之后触发，要在选项上加data-options="closable:true"
			alert(title + '|' + index);
		}
		*/
		onContextMenu : function (e,title, index) {  //右击选项卡触发
			alert(e.type + '|' + title + '|' + index);
		},
		
		onAdd : function (title, index) {  //新增选项卡触发
			alert(title + '|' + index);
		},
		
		onLoad : function (panel) {  //加载远程文件就触发
			alert(panel);
		},
		
		onUpdate : function (title, index) { //内容修改后触发
			alert(title + '|' + index);
		}
		
		
	});

	
	
	
	
	//console.log($('#box').tabs('tabs'));  获取选项卡所有对象
	

	//	$('#box').tabs('resize');    //智能调整宽高

	
/*
	$('#box').tabs('add', {   添加额外选项卡
		id : 'bbb',
		title : '新选项卡',
		content : '新面板',
		href : 'content.html',
		iconCls : 'icon-add',
		width : 1,
		height : 1,
		collapsible : true,  //类似显示隐藏切换效果
		closable : true,  //添加关闭按钮
		selected : false,  //是否被选中
	});
*/
	
	//$('#box').tabs('close', 1);  //第二个选项卡默认隐藏
	//console.log($('#box').tabs('getTab', 1));  //获取第二个选项卡对象
	//console.log($('#box').tabs('getTabIndex', $('#tab2'))); //获取ID为#tab2选项卡的索引值
	//console.log($('#box').tabs('getSelected'));//获取选中的选项卡
	//$('#box').tabs('select', 1);  //选中第二个选项卡
	//$('#box').tabs('unselect', 0); //取消第几个被选中的选项卡
	//$('#box').tabs('hideHeader');  //显示选项卡栏
	//$('#box').tabs('showHeader');  //隐藏选下卡栏
	//console.log($('#box').tabs('exists', 1)); // 检查第几个选项卡是否存在
	
	$(document).click(function () {
		$('#box').tabs('update', {  //修改标题或者内容
			tab : $('#tab2'),
			options : {
				title : '修改标题',
			},
		});
	});
	
	
	
	//$('#box').tabs('disableTab', 1); //禁用某个选项卡
	//$('#box').tabs('enableTab', 1);  //启用某个选项卡
	
	//$('#box').tabs('scrollBy', 100);  //选项卡太长，这里可以设置偏移位置	
	
	
	
	
	
	
	
	
	
});