Jquery Easyui选项卡组件Tab使用详解（10）

本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下
加载方式
Class加载

<div class="easyui-tabs" style="width: 400px;height: 250px"><div title="Tab1" data-options="closable:true"> tab1</div><div title="Tab2" data-options="closable:true"> tab2</div><div title="Tab3" data-options="iconCls:"icon-reload",closable:true"> tab3</div></div>

JS调用加载

 <div id="box" style="width: 400px;height: 250px"><div title="Tab1" data-options="closable:true"> tab1</div><div title="Tab2" data-options="closable:true"> tab2</div><div title="Tab3" data-options="iconCls:"icon-reload",closable:true"> tab3</div> </div> <script>$（function （） { $（"#box"）.tabs（{// 选项卡容器宽度width : 500,// 项卡容器高度height: 400,// 是否不显示控制面板背景。plain : false,// 选项卡是否将铺满它所在的容器fit : false,// 是否显示选项卡容器边框border : true,// 选项卡滚动条每次滚动的像素值scrollIncrement : 200,// 每次滚动动画持续的时间scrollDuration : 400,// 工具栏添加在选项卡面板头的左侧或右侧tools:[{ iconCls : "icon-add", handler : function （） {alert（"添加！"）; },}],// 工具栏位置toolPosition : "left",// 选项卡位置tabPosition : "left",// 选项卡标题宽度，在 tabPosition 属性设置为"left"或"right"的时候才有效headerWidth : 300,// 标签条的宽度tabWidth : 250,// 标签条的高度tabHeight : 25,// 初始化选中一个 tab 页, 从0开始selected : 2,// 是否显示 tab 页标题showHeader: true }） ;}）; </script>

属性列表

事件列表

 $（function （） { $（"#box"）.tabs（{// 在 ajax 选项卡面板加载完远程数据的时候触发。onLoad : function （pannel） { alert（panel）;},// 用户在选择一个选项卡面板的时候触发onSelect : function （title,index） { alert（title + "|" + index）;},// 用户在取消选择一个选项卡面板的时候触发。// （选择另一个时，先触发上一个的此方法，再触发下一个的onSelect方法）onUnselect : function （title, index） { alert（title + "|" + index）;},// 在选项卡面板关闭的时候触发，返回false 取消关闭操作onBeforeClose : function （title, index） { alert（title + "|" + index）; return false;},// 在关闭一个选项卡面板的时候触发onClose : function （title, index） { alert（title + "|" + index）;},// 在添加一个新选项卡面板的时候触发onAdd : function （title, index） { alert（title + "|" + index）;},// 在更新一个选项卡面板的时候触发onUpdate : function （title, index） { alert（title + "|" + index）;},// 在右键点击一个选项卡面板的时候触发onContextMenu : function （e, title, index） { alert（e + "|" + title + "|" + index）;} }） ;}）;

方法列表

//返回属性对象console.log（$（"#box"）.tabs（"options"））;//返回所有选项卡面板console.log（$（"#box"）.tabs（"tabs"））;//新增一个选项卡$（"#box"）.tabs（"add", { title : "新面板", selected : false,}）;//选择指定下标的选项卡$（"#box"）.tabs（"select", 1）;//取消选择指定下标的选项卡$（"#box"）.tabs（"select", 0）;//关闭指定下标的选项卡$（"#box"）.tabs（"close", 1）;//重新调整面板布局和大小$（"#box"）.tabs（"resize"）;//指定下标的选项卡是否存在console.log（$（"#box"）.tabs（"exists", 4））;//获取指定下标的选项卡console.log（$（"#box"）.tabs（"getTab", 1））;//获取指定面板的索引console.log（$（"#box"）.tabs（"getTabIndex","#tab2"））;//获取被选定的选项卡console.log（$（"#box"）.tabs（"getSelected"））;//显示选项卡标题$（"#box"）.tabs（"showHeader"）;//隐藏选项卡标题$（"#box"）.tabs（"hideHeader"）;//更新一个选项卡$（"#box"）.tabs（"update", { tab : $（"#tab2"）, options : { Title : "新标题", }}）;//禁用指定下标或标题的选项卡$（"#box"）.tabs（"disableTab", 1）;$（"#box"）.tabs（"disableTab", "Tab2"）;//启用指定下标或标题的选项卡$（"#box"）.tabs（"enableTab", 1）;$（"#box"）.tabs（"enableTab", "Tab2"）;//滚动选项卡标题，正值向左，负值向右$（"#box"）.tabs（"scrollBy", 100）;//可以使用$.fn.tabs.defaults 重写默认值对象。$.fn.tabs.defaults.border = false;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。