<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript"> $(function(){ $("#box1").tabs({ width : 350, height : 200, plain : true, fit : false,//是否铺满所在的容器 border : true,//是否显示边框 scrollIncrement : 500,//选项卡每次滚动的像素值 scrollDuration : 200,//每次滚动动画持续的时间 需要标签条的长度大一地啊儿 /*tools : [{//工具栏 iconCls : "icon-add", handler : function(){ //alert("工具"); $(this).tabs("closable",true); }, },{#}],*/ tools : "#tt", toolPosition : "right",//工具栏的位置 tabPosition : "right",//选项卡的位置 headerWidth : 70,//选项卡的宽度 tabWidth : 200,//标签条的宽度 tabHeight : 40,//标签条的高度 selected : 2,//默认被选中的tab页 showHeader : true,//是否显示tab页标题 onLoad : function(panel){//在ajax选项卡面板加载完远程数据时 触发 console.log("加载完数据时触发"); }, onSelect : function(title,index){ console.log("在选择一个选项卡面板时触发"); }, onUnselect : function(title,index){ console.log("在取消选择一个选项卡面板时触发"); }, onBeforeClose : function(title,index){ console.log("在选项卡面板关闭时触发"); }, onClose : function(title,index){ console.log("在用户关闭一个选项卡面板时触发"); }, onAdd : function(title,index){ console.log("在添加一个选项卡面板时触发"); }, onUpdate : function(title,index){ console.log("更新一个选项卡面板时触发"+index +"---"+title); }, onConTextMenu : function(e,title,index){ console.log("右击点击一个选项卡面板时触发"); } }); $("#box1").tabs('update',{ tab :$("#box1_1"), options :{ title :"跟新后的标题", } }); console.log($("#box1").tabs("getTabIndex","#box1_1")); }); </script> </head> <body> <div id="box" class="easyui-tabs" style="300px;height : 100px;"> <div title="tab1"></div> <div title="tab2"></div> <div title="tab3" data-options="inconCls : 'icon-reload',closable : true"></div> </div> <div id="box1"> <div id="box1_1" title="tab1">tab1</div> <div title="tab2">tab2</div> <div title="tab3">tab3</div> <a href="#" class="icon-add" onclick="javascript:alert("add")"></a> </div> <div id="tt"> <a class="icon-add" onclick="javascript:alert('add')"> </a> <a class="icon-edit" onclick="javascript:alert('edit')"> </a> <a class="icon-cut" onclick="javascript:alert('cut')"> </a> </div> </body> </html>