一. 加载方式

//class 加载方式
<div id="box" class="easyui-tabs" style="width:500px;height:250px;">

<div title="Tab1">
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 加载调用
$('#box').tabs({
//...
});

二.属性列表

//属性设置
$('#box').tabs({
width : 500,
height : 300,
plain : true,
fit : true,
border : true,
scrollIncrement : 1,
scrollDuration : 1000,
tools : [{
iconCls : 'icon-add',
handler : function () {
alert('添加!');
},

},{}],
tools : '#tab-tools',
toolPosition : 'left',
tabPosition : 'left',
headerWidth : 300,
tabWidth : 100,
tabHeight : 50,
selected : 1,
showHeader : false,
});
<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>
<a class="icon-help" onclick="javascript:alert('help')"></a>
</div>  

三.事件列表

$('#box').tabs({
onLoad : function (panel) {
alert(panel);
},
onSelect : function (title,index) {
alert(title + '|' + index);

},
onUnselect : function (title, index) {
alert(title + '|' + index);
},
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);
PS:我们可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;
五.选项卡面板
选项卡面板继承了 panel 一些属性,以下是公共属性。

此文出处来子网络---在此只为自己收藏没事看看方便自己查阅。。。。。。

easyui-tab标签的更多相关文章

  1. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  2. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  3. jquery easyui tab加载内容的几种方法

    转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...

  4. jquery easyui Tab 引入页面的问题

    jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href ...

  5. JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

    前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),只是在ASP.NE ...

  6. 【转】 jquery easyui Tab 引入页面的问题

    原地址:http://blog.csdn.net/superdog007/article/details/8225518 jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上 ...

  7. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  8. JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  9. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  10. 支持自动切换的tab标签代码札记

    html代码如下: <!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div ...

随机推荐

  1. Select默认选择后台参数

    之前写过一个这样的方法,后来需求开发中,发现了方法的BUG,然后我又重新找了一种方法,今天来记录一下. 先声明前台 <select name="type" class=&qu ...

  2. 如何使用在三星840 SSD硬件加密下使用Bitlocker

    我的笔记本存放到比较重要的资料,需要加密,想到我的三星EVO 850 SSD支持三种加密模式,于是想使用全盘加密模式.但是找了半天没找到一点合适的中文资料,于是怒而翻译一下加密全盘加密的Bitlock ...

  3. [心得] SQL Server Partition(表分區) 資料分佈探討

    最近在群裡有個朋友問了個問題是這樣的 用户表有一千多万行,主键是用户ID,我做了分区.但经常查询时,其它的表根据用户ID来关联,这样跨区查询,reads非常高.有什么好的处理办法?不分区的话,索引维护 ...

  4. InnoSetup 客户端程序打包教程

    之前介绍过InstallShield打包工具,本文再介绍更加方便的打包工具Inno Setup Inno Setup相对来说,比InstallShield更容易使用,不需要在VS中创建项目,只要提供D ...

  5. X级联动

    前端数据 @{ ViewBag.Title = "Index"; } <script src="~/Scripts/jquery-1.10.2.js"&g ...

  6. Java开发笔记(二)Java工程的帝国区划

    上一篇文章介绍了如何运行了第一个Java程序“Hello World”.然而这个开发环境看起来那么陌生,一个个名字符号完全不知道它们是干啥的呀,对于初学者来说,好比天书一般,多看几眼感觉都要走火入魔了 ...

  7. LIMIT与OFFSET的使用

    limit 与 offset:从下标0开始 offset X   是跳过X个数据 limit Y      是选取Y个数据 limit  X,Y  中X表示跳过X个数据,读取Y个数据 例如: sele ...

  8. 前端入门13-JavaScript进阶之原型

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  9. iOS----------取数据的两种取法

    NSMutableArray * dataArray =[responseDictionary valueForKeyPath:@"data.list_dic.list"]; NS ...

  10. Scrapped or attached views may not be recycled

    在使用recycleView的时候出现了错误Scrapped or attached views may not be recycled 原因: view没有被recycled,recyclerVie ...