jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
来源：互联网 发布：软装设计软件 编辑：程序博客网 时间：2024/04/30 13:09
<html><head><script src="jquery-easyui/jquery.min.js"></script><script src="jquery-easyui/jquery.easyui.min.js"></script><script src="jquery-easyui/easyloader.js"></script><script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"></head><body><!--tabs的属性width：选项卡所在容器（控制面板）的宽度。<div id="tt" class="easyui-tabs" data-options="width:100"> <div title="Tab1" > tab1 </div> </div> height：选项卡所在容器（控制面板）的宽度。<div id="tt" class="easyui-tabs" data-options="height:500"> <div title="Tab1" > tab1 </div> </div> plain：为true时，将不显示控制面板背景，相反则显示，默认是false<div id="tt" class="easyui-tabs" data-options="plain:true"> <div title="Tab1"> tab1 </div> </div> fit：为true时，选项卡的大小将铺满它所在的容器。相反要按照设置的大小，默认是false<div id="tt" class="easyui-tabs" data-options="fit:true"> <div title="Tab1" > tab1 </div> </div> border：为false时，不显示边框，相反则显示边框，默认是true<div id="tt" class="easyui-tabs" data-options="border:true"> <div title="Tab1" > tab1 </div> </div> scrollIncrement：选项卡滚动条每次滚动的像素值。默认是100<div id="tt" class="easyui-tabs" data-options="scrollIncrement:10000> <div title="Tab1" > tab1 </div> </div> scrollDuration：每次滚动持续的时间，单位为毫秒。默认是400<div id="tt" class="easyui-tabs" data-options="scrollDuration:1000"> <div title="Tab1" > tab1 </div> </div> tools：控制面板右侧的工具栏，每个工具选项都跟链接按钮一样。tabs的方法onLoad：当一个选项卡完成ajax远程载入对象时触发。onSelect：当用户选择一个选项卡时触发。<div id="tt" class="easyui-tabs" data-options="width:500, height:500, onSelect:aa"> <div title="Tab1"> tab1 </div> </div>onBeforeClose：在一个选项卡被关闭之前触发，返回false将取消关闭。<div id="tt" class="easyui-tabs" data-options="width:500, height:500, onBeforeClose:aa"> <div title="Tab1" closable="true"> tab1 </div> </div>onClose：在用户关闭一个选项卡面板后触发。<div id="tt" class="easyui-tabs" data-options="width:500, height:500, onClose:aa"> <div title="Tab1" closable="true"> tab1 </div> </div>onAdd：在一个选项卡面板被添加后触发。<div id="tt" class="easyui-tabs" data-options="width:500, height:500, onAdd:aa"> <div title="Tab1" closable="true"> tab1 </div> </div>onUpdate：在一个选项卡面板被更新后触发。<div id="tt" class="easyui-tabs" data-options="width:500, height:500, onUpdate:aa"> <div title="Tab1" closable="true"> tab1 </div> </div>onContextMenu:在一个选项卡面板被鼠标右键单击后触发。<div id="tt" class="easyui-tabs" data-options="width:500, height:500, onContextMenu:aa"> <div title="Tab1" closable="true"> tab1 </div> </div>tabs的方法options：返回选项卡属性对象。tabs：返回所有的选项卡面板。resize：重置选项卡容器（控制面板）大小并且自动布局。add：添加一个新的选项卡面板，options参数是一个可以配置的对象，查看选项卡控制面板属性获取更多信息。close：关闭一个选项卡面板，title参数表示哪个选项卡将被关闭。getTab：获取特定的选项卡面板名称。getSelected：获取被选择的选项卡面板名称。select：选择一个选项卡面板。exists：验证一个特定的选项卡面板是否存在。update：更新特定的选项卡面板，param参数包含2个属性:tab: 将被更新的选项卡。options: 选项卡相关配置项。tabs的选项卡面板title：选项卡面板的标题。 content：选项卡面板的内容。 href：从超链接载入远程内容到选项卡 面板。cache：设置为true将缓存选项卡面板，当href（超链接）属性被设置时有效。iconCls：一个显示选项卡面板标题图标的CSS类。 width：选项卡面板的宽度。height：选项卡面板的高度。closable：为true时，选项卡面板将会显示一个关闭按钮，点击该按钮将关闭选项卡。默认是falseselected：为true时，将会默认显示该选项卡下的内容。默认是false--><div id="tt" class="easyui-tabs" data-options="width:500, height:500"> <div title="Tab1" closable="true"> tab1 </div> </div><input type="button" id="tian" value="添加"><input type="button" id="guan" value="关闭"></body><script>//tabs方法的用法$(function(){$("#tian").click(function(){$("#tt").tabs('add',{title:'table123',closable:true,content:'asdfsadfsg',href:'1.html'})});$("#guan").click(function(){$("#tt").tabs('close','table123')})});</script></html>
